/*
 * D-138 (owner, 30 Oct 2026): the PI page in the light glass design approved in the claude.ai artifact "CoverYou Obsidian".
 * Everything is scoped to .pg (view pi-landing/glass), so the site header, footer and other pages are untouched.
 * The CTA buttons are the site's own .cy-btn (components.css), unchanged. Inter throughout; Pacifico for the accent word.
 */
.pg {
  color-scheme: light;
  --shell: #f3efed;
  --surface: #fdfbfa;
  --surface-base: #ffffff;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(21, 17, 15, 0.08);
  --text: #15110f;
  --text-2: #5e5651;
  --text-3: #766d68;
  --coral: #f05d49;          
  --coral-soft: #f8aea4;     
  --coral-glow: rgba(240, 93, 73, 0.24);
  --coral-line: rgba(240, 93, 73, 0.45);
  --emerald: #10b981;
  --ink: #15110f;            
  --contrast-bg: #15110f;    
  --contrast-ink: #f3ece8;
  --contrast-2: rgba(243, 236, 232, 0.7);
  --grid-line: rgba(21, 17, 15, 0.045);
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Pacifico", "Brush Script MT", cursive;
  --r-card: 1.5rem; --r-min: 2rem; --r-shell: 2.5rem; --r-section: 4rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
.pg { background: var(--shell); color: var(--text); font: 400 16px/1.6 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 24px 64px; }
.pg h1, .pg h2, .pg h3, .pg p { margin: 0; }
.pg h1, .pg h2, .pg h3 { font-family: var(--font-display); text-wrap: balance; }
.pg .label { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.pg .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); animation: pg-pulse 2s infinite; }
@keyframes pg-pulse { 50% { opacity: .35; } }
.pg .glass { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: var(--r-card); }
.pg .float { animation: pg-float 6s ease-in-out infinite; }
@keyframes pg-float { 50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); } 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } }
.pg .sphere { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.pg .sphere--coral { width: 520px; height: 520px; right: -120px; top: -160px; background: var(--coral-glow); }
.pg .sphere--emerald { width: 420px; height: 420px; left: 18%; top: 520px; background: rgba(16, 185, 129, .10); }
.pg .in { position: relative; z-index: 1; padding-inline: clamp(20px, 4vw, 56px); }
.pg .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 150px; align-items: center; padding-block: 48px 72px; }
.pg .hero h1 { margin-top: 22px; font-size: clamp(48px, 6.6vw, 100px); line-height: .88; font-weight: 700; letter-spacing: -.055em; }
.pg .hero h1 em { font: 400 1em/1 var(--font-script); letter-spacing: 0; font-style: normal; padding-right: .08em;
  background: linear-gradient(100deg, #f7836f 0%, var(--coral) 45%, #d9472f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg .hero__lead { margin-top: 26px; max-width: 54ch; font-size: 17px; color: var(--text-2); }
.pg .ticks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.pg .ticks li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.pg .ticks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(240, 93, 73, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f05d49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pg .mock { position: relative; padding: 34px 0 24px; }
.pg .form { position: relative; z-index: 2; padding: 28px; }
.pg .notice { position: absolute; z-index: 1; left: -176px; right: auto; top: 38%; width: 200px; padding: 14px 16px; --rot: 6deg; transform: rotate(6deg); background: rgba(255, 255, 255, .78); box-shadow: 0 20px 40px -24px rgba(92, 23, 14, .4); }
.pg .notice b { display: block; margin: 6px 0 10px; font: 600 14px/1.25 var(--font-display); letter-spacing: -.02em; }
.pg .stamp { display: inline-block; padding: 3px 10px; border: 2.5px solid var(--coral); border-radius: 10px; transform: rotate(-10deg); font: 700 15px/1.1 var(--font-display); letter-spacing: .08em; color: var(--coral); }
.pg .stamp small { display: block; font: 700 8px/1.2 var(--font-mono); letter-spacing: .14em; }
.pg .chip { position: absolute; z-index: 3; right: -18px; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--coral); color: var(--ink);
  font: 600 13px/1.2 var(--font-body); box-shadow: 0 0 30px var(--coral-glow); }
.pg .chip i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--coral); font: 700 12px/1 var(--font-mono); font-style: normal; }
.pg .steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1001px) and (max-width: 1199px) {
.pg .hero { column-gap: 72px; }
.pg .notice { left: -120px; width: 170px; }
}
@media (max-width: 1000px) {
.pg .hero { grid-template-columns: minmax(0, 1fr); }
.pg .mock { max-width: 520px; margin-inline: auto; width: 100%; }
.pg .notice { left: auto; right: 0; top: 0; }
.pg .mock { padding-top: 118px; }
}
@media (max-width: 640px) {
.pg .notice { right: 4px; top: 6px; width: 180px; }
.pg .mock { padding-top: 112px; }
.pg .chip { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pg .float, .pg .dot { animation: none; }
}
.pg { --text-body: #3f3833; --tint: #fdebe7; --soft: #fff6f3; }
.pg .ic { width: 1em; height: 1em; flex: none; }
.pg .lnk { color: #a03e31; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 93, 73, .4); }
.pg .strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: stretch; padding-bottom: 24px; }
.pg .strip__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 22px; }
.pg .strip__step { position: relative; display: grid; gap: 4px; min-width: 0; }
.pg .strip__step i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--coral); box-shadow: inset 0 0 0 1.5px #f6c1b6; font-size: 19px; font-style: normal; }
.pg .strip__step:nth-child(2) i { background: var(--coral); color: #fff; box-shadow: 0 10px 24px -10px var(--coral); }
.pg .strip__step:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 52px; right: -6px; border-top: 2px dashed rgba(240, 93, 73, .35); }
.pg .strip__step b { font-size: 14.5px; }
.pg .strip__step span { font-size: 12.5px; color: var(--text-2); }
.pg .strip__figs { display: grid; gap: 10px; }
.pg .strip__figs div { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; }
.pg .strip__figs b { font: 700 22px/1 var(--font-display); letter-spacing: -.04em; color: var(--coral); }
.pg .strip__figs span { font-size: 13px; color: var(--text-2); }
.pg .ps { position: relative; padding-block: 76px; }
.pg .ps + .ps { border-top: 1px solid var(--glass-border); }
.pg .ps--plain-top { border-top: 0 !important; }
.pg .ps__head { display: grid; gap: 12px; max-width: 820px; margin-bottom: 34px; }
.pg .ps__head--center { margin-inline: auto; justify-items: center; text-align: center; }
.pg .ps__head h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; }
.pg .ps__lead { font-size: 17px; color: var(--text-2); max-width: 64ch; }
.pg .ps__body { display: grid; gap: 22px; }
.pg .ps__body > p:not([class]) { max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.pg .ps__body > h3 { margin-top: 10px; font-size: 21px; font-weight: 650; letter-spacing: -.03em; }
.pg .ps--media .ps__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.pg .ps__media { position: relative; margin: 0; border-radius: var(--r-shell); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(92, 23, 14, .5); }
.pg .ps__media img { display: block; width: 100%; height: auto; }
.pg .ps__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.pg .disc { display: flex; align-items: baseline; gap: 14px; padding-top: 14px; border-top: 1.5px dashed rgba(240, 93, 73, .3); font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: none !important; }
.pg .disc__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--tint); color: #a03e31; font: 700 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transform: translateY(-1px); }
.pg .disc__tag .ic { font-size: 14px; }
.pg .lst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.pg .lst--one { grid-template-columns: minmax(0, 1fr); }
.pg .lst li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.pg .lst li > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--tint); color: var(--coral); font-size: 14px; font-style: normal; }
.pg .lst--cross li > i { background: #f1edeb; color: #7a716c; }
.pg .lst b { color: var(--text); }
.pg .bub { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg .bub li { justify-self: start; display: flex; align-items: center; gap: 12px; max-width: 94%; padding: 12px 18px 12px 12px; border-radius: 22px 22px 22px 6px; font-size: 15px; }
.pg .bub li:nth-child(2) { margin-left: 32px; border-radius: 22px 22px 6px 22px; }
.pg .bub li:nth-child(3) { margin-left: 12px; }
.pg .bub i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--coral); font-size: 16px; font-style: normal; }
.pg .spread { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 56px; margin: 0; }
.pg .spread__lead dt { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pg .spread__lead dt em { font: 400 24px/1 var(--font-script); font-style: normal; color: var(--coral); }
.pg .spread__lead dd { margin: 0; font: 500 22px/1.55 var(--font-display); letter-spacing: -.015em; color: var(--text); }
.pg .spread__item { display: flex; gap: 16px; padding: 16px 0; }
.pg .spread__item + .spread__item { border-top: 1.5px dashed rgba(240, 93, 73, .22); }
.pg .spread__item:first-child { padding-top: 0; }
.pg .spread__item > i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--coral); box-shadow: inset 0 0 0 1.5px #f6c1b6; font-size: 20px; font-style: normal; }
.pg .spread__item dt { margin-bottom: 4px; }
.pg .spread__item dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.pg .band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg .band li { display: grid; gap: 4px; padding: 20px 22px; }
.pg .band b { font: 700 clamp(30px, 3vw, 42px)/1 var(--font-display); letter-spacing: -.045em; background: linear-gradient(120deg, #f7836f, var(--coral) 55%, #d9472f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg .band span { font-size: 14px; color: var(--text-2); }
.pg .big { position: relative; padding-top: 42px; font: 500 clamp(19px, 2vw, 24px)/1.5 var(--font-display) !important; letter-spacing: -.015em; color: var(--text) !important; max-width: none !important; }
.pg .big::before { content: "\201C"; position: absolute; left: -2px; top: -12px; font: 400 76px/1 var(--font-script); color: var(--coral); }
.pg .cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
.pg .cols2 p { font-size: 16px; line-height: 1.7; color: var(--text-body); }
.pg .personas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg .personas li { display: grid; align-content: start; gap: 14px; padding: 24px; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.pg .personas li b { display: block; margin-bottom: 4px; font-size: 17px; color: var(--text); }
.pg .medal { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--soft) 70%); color: var(--coral); box-shadow: inset 0 0 0 1.5px #f6c1b6, 0 16px 30px -18px rgba(229, 83, 63, .8); font-size: 26px; font-style: normal; }
.pg .medal--solid { background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; box-shadow: 0 16px 30px -14px rgba(229, 83, 63, .9); }
.pg .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 700 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pg .legend .ic { color: var(--coral); }
.pg .tabs__list { display: flex; flex-wrap: wrap; gap: 10px; }
.pg .tabs__tab { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 0; background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-border); font: 600 14.5px/1.2 var(--font-body); color: var(--text-2); cursor: pointer; transition: box-shadow .25s var(--ease), color .25s var(--ease); }
.pg .tabs__tab span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: #a03e31; font-size: 12px; }
.pg .tabs__tab[aria-selected="true"] { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--coral), 0 12px 26px -16px rgba(229, 83, 63, .7); }
.pg .tabs__tab[aria-selected="true"] span { background: var(--coral); color: #fff; }
.pg .tabs__tab:focus-visible { outline: 2px solid var(--coral-soft); outline-offset: 2px; }
.pg .tabs__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; margin-top: 16px; padding: 28px 32px; }
.pg .tabs__panel h3 { grid-column: 1 / -1; font-size: 24px; font-weight: 650; letter-spacing: -.035em; }
.pg .tabs__panel div { padding-left: 16px; border-left: 2px solid rgba(240, 93, 73, .3); }
.pg .tabs__panel dt { margin-bottom: 4px; }
.pg .tabs__panel dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-body); }
.pg .cover2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg .cover2 > div { padding: 28px; }
.pg .cover2 h3 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 21px; font-weight: 650; letter-spacing: -.03em; }
.pg .cover2 ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg .cover2 li { position: relative; padding: 10px 0 10px 26px; font-size: 15.5px; line-height: 1.55; color: var(--text-body); }
.pg .cover2 li + li { border-top: 1px dashed var(--glass-border); }
.pg .cover2 li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(240, 93, 73, .15); }
.pg .cover2 .no li { color: #6b625d; }
.pg .cover2 .no li::before { width: 12px; height: 2px; top: 22px; border-radius: 2px; background: #a39a95; box-shadow: none; }
.pg .cover2 .no .medal { background: #f1edeb; color: #7a716c; box-shadow: inset 0 0 0 1px rgba(21, 17, 15, .1); }
.pg .quad { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pg .quad::before, .pg .quad::after { content: ""; position: absolute; pointer-events: none; }
.pg .quad::before { left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(240, 93, 73, .28); }
.pg .quad::after { top: 50%; left: 0; right: 0; border-top: 2px dashed rgba(240, 93, 73, .28); }
.pg .quad li { display: grid; align-content: start; gap: 10px; padding: 30px 60px 34px 0; }
.pg .quad li:nth-child(2n) { padding: 30px 0 34px 60px; }
.pg .quad h3 { font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.pg .quad p { font-size: 15.5px; line-height: 1.65; color: var(--text-body); }
.pg .quad__core { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px var(--surface), 0 0 0 11.5px rgba(240, 93, 73, .2), 0 22px 40px -16px rgba(229, 83, 63, .9) !important; width: 76px !important; height: 76px !important; font-size: 32px !important; }
.pg .hub { display: grid; grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1fr); gap: 44px 56px; align-items: center; margin: 20px 0 0; padding: 0; list-style: none; }
.pg .hub__core { grid-area: core; justify-self: center; position: relative; display: grid; place-items: center; align-content: center; gap: 4px; width: 250px; height: 250px; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 35% 28%, #fff, var(--soft) 55%, #ffe3db); box-shadow: 0 40px 70px -40px rgba(229, 83, 63, .6), inset 0 0 0 1px rgba(240, 93, 73, .18); }
.pg .hub__core::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1.5px dashed rgba(240, 93, 73, .35); }
.pg .hub__core b { font: 700 21px/1.2 var(--font-display); letter-spacing: -.02em; }
.pg .hub__core em { max-width: 180px; font: 400 18px/1.3 var(--font-script); font-style: normal; color: var(--coral); }
.pg .hub__core .medal { margin-bottom: 8px; }
.pg .hub li { display: flex; gap: 16px; align-items: flex-start; }
.pg .hub li.l { flex-direction: row-reverse; text-align: right; }
.pg .hub li.b { grid-column: 1 / -1; justify-self: center; flex-direction: column; align-items: center; max-width: 440px; text-align: center; }
.pg .hub h3 { margin: 4px 0 6px; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.pg .hub p { font-size: 15px; line-height: 1.6; color: var(--text-body); }
.pg .ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin: 0; padding: 0; list-style: none; border-bottom: 2px solid rgba(240, 93, 73, .2); }
.pg .ladder li { display: grid; gap: 14px; }
.pg .ladder__txt { display: grid; gap: 8px; }
.pg .ladder__txt p { font-size: 15px; line-height: 1.55; color: var(--text-body); }
.pg .ladder__pill { justify-self: start; padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border); font-size: 13px; font-weight: 600; }
.pg .ladder__bar { position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; padding: 22px 24px; border-radius: 26px 26px 8px 8px; }
.pg .ladder li:nth-child(1) .ladder__bar { height: 110px; background: linear-gradient(180deg, #fff3ef, #fddcd3); }
.pg .ladder li:nth-child(2) .ladder__bar { height: 160px; background: linear-gradient(180deg, #fcc7bb, #f8a08e); }
.pg .ladder li:nth-child(3) .ladder__bar { height: 210px; background: linear-gradient(180deg, #f7836f, var(--coral) 60%, #e5533f); color: #fff; box-shadow: 0 30px 50px -26px rgba(229, 83, 63, .9); }
.pg .ladder__bar span { font: 700 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.pg .ladder__bar b { font: 750 28px/1.1 var(--font-display); letter-spacing: -.035em; }
.pg .path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; margin: 0; padding: 0; list-style: none; }
.pg .path li { position: relative; display: grid; align-content: start; gap: 8px; }
.pg .path li::before { content: ""; position: absolute; top: 28px; left: 68px; right: -22px; border-top: 2px dashed rgba(240, 93, 73, .35); }
.pg .path li:nth-child(4n)::before, .pg .path li:last-child::before { display: none; }
.pg .path__n { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--coral); box-shadow: inset 0 0 0 2px #f6c1b6, 0 14px 28px -16px rgba(229, 83, 63, .85); font: 700 15px/1 var(--font-display); }
.pg .path li:first-child .path__n { background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; box-shadow: 0 14px 28px -12px rgba(229, 83, 63, .9); }
.pg .path h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; }
.pg .path p { font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.pg .donts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 56px; margin: 0; padding: 0; list-style: none; }
.pg .donts li { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; font-size: 16px; line-height: 1.55; }
.pg .donts__n { position: relative; font: 700 52px/1 var(--font-display); letter-spacing: -.03em; color: #fbcfc4; }
.pg .donts__n::after { content: ""; position: absolute; left: -2px; right: 30px; top: 50%; height: 2.5px; border-radius: 3px; background: var(--coral); transform: rotate(-10deg); }
.pg .donts__x { position: absolute; left: 34px; top: 8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 13px; font-style: normal; }
.pg .journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pg .journey li { position: relative; display: grid; align-content: start; gap: 8px; }
.pg .journey li:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 74px; right: -18px; height: 2px; background: linear-gradient(90deg, var(--coral), rgba(240, 93, 73, .2)); }
.pg .journey__n { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%; background: #fff; color: var(--coral); box-shadow: inset 0 0 0 2px #f6c1b6; font: 700 20px/1 var(--font-display); }
.pg .journey li:first-child .journey__n { background: var(--coral); color: #fff; box-shadow: 0 16px 30px -12px rgba(229, 83, 63, .9); }
.pg .journey b { font-size: 17px; }
.pg .journey span { font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.pg .reasons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.pg .reasons li { display: grid; justify-items: center; gap: 14px; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.pg .reasons .medal { width: 72px; height: 72px; font-size: 30px; }
.pg .vs { margin-top: 8px; padding: 28px 30px; }
.pg .vs__head, .pg .vs__row { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); align-items: center; column-gap: 24px; }
.pg .vs__head { margin-bottom: 10px; font: 700 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg .vs__head p:first-child { text-align: right; color: var(--text-2); }
.pg .vs__head p:last-child { color: #a03e31; }
.pg .vs__badge { justify-self: center; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; font: 800 17px/1 var(--font-display); box-shadow: 0 0 0 8px rgba(240, 93, 73, .12), 0 16px 30px -12px rgba(229, 83, 63, .9); }
.pg .vs__rows { position: relative; margin: 0; }
.pg .vs__rows::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(240, 93, 73, .3); }
.pg .vs__row { padding: 14px 0; }
.pg .vs__row + .vs__row { border-top: 1px dashed var(--glass-border); }
.pg .vs__row dt { position: relative; z-index: 1; justify-self: center; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 18px -14px rgba(92, 23, 14, .5); font-size: 13px; font-weight: 650; text-align: center; }
.pg .vs__row dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pg .vs__a { text-align: right; color: #7a716c; }
.pg .vs__b { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.pg .vs__b i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 13px; font-style: normal; }
.pg .vs__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg .midcta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 26px 30px; }
.pg .midcta > div { flex: 1; min-width: 220px; }
.pg .midcta b { display: block; font-size: 21px; letter-spacing: -.02em; }
.pg .midcta span { font-size: 15px; color: var(--text-2); }
.pg .dark { position: relative; z-index: 1; margin-top: 8px; padding-block: 84px; border-radius: var(--r-section); background: #15110f; color: #f3ece8; overflow: hidden; }
.pg .dark .sphere { width: 460px; height: 460px; right: -140px; top: -140px; background: rgba(240, 93, 73, .3); }
.pg .dark .label { color: rgba(243, 236, 232, .7); }
.pg .dark .ps__head h2 { color: #fff; }
.pg .dark .ps__body > p, .pg .dark .ps__body > h3 { color: #f3ece8; }
.pg .dark .ps__body > p { color: rgba(243, 236, 232, .78); }
.pg .dark .disc { border-top-color: rgba(255, 255, 255, .16); color: rgba(243, 236, 232, .72); }
.pg .dark .disc__tag { background: rgba(240, 93, 73, .2); color: #f9b4a6; }
.pg .track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.pg .track li { position: relative; display: grid; align-content: start; gap: 16px; font-size: 15.5px; line-height: 1.6; color: rgba(243, 236, 232, .84); }
.pg .track li b { color: #fff; }
.pg .track li:not(:last-child)::before { content: ""; position: absolute; top: 30px; left: 72px; right: -22px; height: 2px; background: linear-gradient(90deg, rgba(240, 93, 73, .85), rgba(240, 93, 73, .15)); }
.pg .track__n { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; font: 800 21px/1 var(--font-display); box-shadow: 0 0 0 8px rgba(240, 93, 73, .14), 0 0 40px rgba(240, 93, 73, .45); }
.pg .tl__head, .pg .tl__row { display: grid; grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr); gap: 24px; align-items: center; }
.pg .tl__head { font: 700 11.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #f7a493; }
.pg .tl__head span:first-child { text-align: right; }
.pg .tl__head span:nth-child(2) { text-align: center; }
.pg .tl__list { position: relative; margin: 0; padding: 0; list-style: none; }
.pg .tl__list::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, rgba(240, 93, 73, .85), rgba(240, 93, 73, .2)); }
.pg .tl__row { padding: 13px 0; }
.pg .tl__row p { font-size: 15px; line-height: 1.55; }
.pg .tl__a { text-align: right; color: rgba(243, 236, 232, .74); }
.pg .tl__b { color: #fff; }
.pg .tl__row h3 { position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 10px; border-radius: 999px; background: #2a1d1a; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .45); font-size: 13.5px; font-weight: 650; color: #fff; white-space: nowrap; }
.pg .tl__row h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(240, 93, 73, .25), 0 0 14px rgba(240, 93, 73, .8); }
.pg .tl__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg .gtk { display: grid; gap: 10px; }
.pg .gtk__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; color: var(--text-2); font-size: 15px; }
.pg .gtk details { border-radius: 20px; }
.pg .gtk summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.pg .gtk summary::-webkit-details-marker { display: none; }
.pg .gtk summary h2 { flex: 1; min-width: 0; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.pg .gtk summary .medal { width: 42px; height: 42px; font-size: 19px; }
.pg .gtk__meta { padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border); font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pg .gtk__chev { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: var(--coral); transition: transform .25s var(--ease); }
.pg .gtk details[open] .gtk__chev { transform: rotate(180deg); }
.pg .gtk details[open] summary .medal { background: var(--coral); color: #fff; }
.pg .gtk__body { display: grid; gap: 18px; padding: 4px 22px 24px 80px; }
.pg .gtk__body > p { font-size: 15.5px; line-height: 1.7; color: var(--text-body); max-width: 72ch; }
.pg .steps2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.pg .steps2 li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.6; color: var(--text-body); counter-increment: s; }
.pg .steps2 li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: #a03e31; font-size: 13px; font-weight: 700; }
.pg .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pg .terms div { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border); }
.pg .terms dt { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.pg .terms dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.pg .tbl { overflow-x: auto; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border); }
.pg .tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pg .tbl th, .pg .tbl td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--glass-border); }
.pg .tbl thead th { font: 700 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #a03e31; background: var(--soft); }
.pg .tbl tbody tr:last-child > * { border-bottom: 0; }
.pg .faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.pg .faq__head { position: sticky; top: 24px; display: grid; gap: 14px; }
.pg .faq__head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; }
.pg .faq__head p { color: var(--text-2); }
.pg .faq__list { display: grid; gap: 10px; }
.pg .faq details { border-radius: 18px; }
.pg .faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.pg .faq summary::-webkit-details-marker { display: none; }
.pg .faq summary h3 { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pg .faq details[open] .gtk__chev { transform: rotate(180deg); }
.pg .faq__a { padding: 0 20px 20px; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.pg .faq__more[hidden] { display: none; }
.pg .related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg .related a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-decoration: none; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.pg .related a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--coral-line), 0 16px 30px -20px rgba(229, 83, 63, .6); }
.pg .related .medal { width: 44px; height: 44px; font-size: 20px; }
.pg .related b { flex: 1; font-size: 15px; }
.pg .related .go { color: var(--coral); font-size: 18px; }
@media (max-width: 1000px) {
.pg .strip { grid-template-columns: minmax(0, 1fr); }
.pg .strip__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg .ps--media .ps__grid, .pg .spread, .pg .faq { grid-template-columns: minmax(0, 1fr); }
.pg .faq__head { position: static; }
.pg .band, .pg .personas, .pg .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .path li:nth-child(2n)::before { display: none; }
.pg .hub { grid-template-columns: minmax(0, 1fr); }
.pg .hub__core { grid-area: auto; }
.pg .hub li, .pg .hub li.l, .pg .hub li.b { grid-area: auto !important; flex-direction: row; text-align: left; justify-self: stretch; align-items: flex-start; max-width: none; }
.pg .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .reasons li { justify-items: start; grid-template-columns: 60px minmax(0, 1fr); text-align: left; align-items: start; }
.pg .reasons .medal { width: 56px; height: 56px; font-size: 24px; }
.pg .track, .pg .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg .track li:nth-child(2)::before, .pg .journey li:nth-child(2)::after { display: none; }
.pg .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.pg .ps { padding-block: 56px; }
.pg .strip__steps, .pg .strip__figs { grid-template-columns: minmax(0, 1fr); }
.pg .strip__step:not(:last-child)::after { display: none; }
.pg .lst, .pg .cols2, .pg .band, .pg .personas, .pg .cover2, .pg .path, .pg .donts, .pg .ladder, .pg .track, .pg .journey, .pg .reasons, .pg .steps2, .pg .terms, .pg .related { grid-template-columns: minmax(0, 1fr); }
.pg .quad { grid-template-columns: minmax(0, 1fr); }
.pg .quad::before, .pg .quad::after, .pg .quad__core { display: none !important; }
.pg .quad li, .pg .quad li:nth-child(2n) { padding: 20px 0; }
.pg .quad li + li { border-top: 1.5px dashed rgba(240, 93, 73, .28); }
.pg .path li::before, .pg .track li::before, .pg .journey li::after { display: none !important; }
.pg .ladder { border-bottom: 0; }
.pg .ladder__bar { height: auto !important; order: -1; }
.pg .tabs__panel { grid-template-columns: minmax(0, 1fr); padding: 22px; }
.pg .vs { padding: 20px; }
.pg .vs__head { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); column-gap: 10px; font-size: 10.5px; }
.pg .vs__head p { text-align: center !important; }
.pg .vs__badge { width: 46px; height: 46px; font-size: 14px; }
.pg .vs__rows::before { display: none; }
.pg .vs__row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.pg .vs__row dt { justify-self: start; order: -1; }
.pg .vs__a { text-align: left; }
.pg .vs__b { display: block; position: relative; padding-left: 32px; }
.pg .vs__b i { position: absolute; left: 0; top: 1px; }
.pg .vs__who { position: static; width: auto; height: auto; clip: auto; font-weight: 700; }
.pg .tl__head { display: none; }
.pg .tl__list::before { left: 12px; }
.pg .tl__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0 16px 36px; }
.pg .tl__row h3 { order: -1; justify-self: start; margin-left: -36px; }
.pg .tl__a { text-align: left; }
.pg .tl__k { position: static; width: auto; height: auto; clip: auto; display: block; font: 700 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #f7a493; }
.pg .gtk__body { padding: 4px 18px 20px; }
.pg .gtk__meta { display: none; }
.pg .disc { flex-direction: column; gap: 8px; }
.pg .dark { border-radius: var(--r-min); }
}

/* ---------- on the site: the shell under the site header, resets, the real form, FAQ tabs, closing CTA ---------- */
.pg { padding-top: calc(var(--cy-hdr-h, 64px) + 36px); padding-bottom: 48px; font-family: var(--font-body); }
.pg h1, .pg h2, .pg h3, .pg p, .pg figure, .pg dl, .pg dd, .pg ul, .pg ol { margin: 0; }
.pg ul, .pg ol { padding: 0; list-style: none; }
.pg a:not(.cy-btn):not(.lnk) { text-decoration: none; }
.pg__shell { position: relative; max-width: 1400px; margin: 0 auto; overflow: hidden; border-radius: var(--r-shell); background: var(--surface);
  box-shadow: 0 0 0 1px var(--glass-border), 0 30px 60px -24px rgba(92, 23, 14, .22); }
.pg__shell::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 22%, transparent 40%); mask-image: linear-gradient(180deg, #000 0, #000 22%, transparent 40%); }
.pg .hero h1 { color: var(--text); }
.pg .hero h1 em { font-family: var(--font-script); }
.pg .lnk { color: #a03e31; }
.pg .quadwrap { position: relative; }

/* the real quote form (pi-landing.form) in the glass card */
.pg .ph-card.form { position: relative; z-index: 2; max-width: none; margin: 0; padding: 28px; border-radius: var(--r-card); background: var(--glass-strong);
  border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 60px -36px rgba(92, 23, 14, .45); }
.pg .ph-card__head { margin-bottom: 18px; }
.pg .ph-card__title { font: 600 24px/1.2 var(--font-display); letter-spacing: -.035em; color: var(--text); }
.pg .ph-card__title span { color: var(--coral); }
.pg .ph-card__sub { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }
.pg .ph-card .cy-input, .pg .ph-card .pl-input { background: #fff; border-color: var(--glass-border); }
.pg .ph-card__legal { margin-top: 10px; font-size: 11.5px; color: var(--text-3); text-align: center; }

/* FAQ tabs (partials/cy-faq-tabs) in the glass look */
.pg .pg-faq { position: relative; z-index: 1; border-top: 1px solid var(--glass-border); }
.pg .pg-faq .cy-faq { background: transparent; padding-left: clamp(20px, 4vw, 56px); padding-right: clamp(20px, 4vw, 56px); }
.pg .pg-faq .cy-faq__item { border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pg .pg-faq .cy-faq__tab[aria-selected="true"] { background: var(--coral); color: #fff; }

/* closing call to action with the COVERYOU watermark */
.pg .pg-close { position: relative; z-index: 1; overflow: hidden; padding-block: 104px 96px; border-top: 1px solid var(--glass-border); text-align: center; }
.pg .pg-close__mark { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font: 700 clamp(80px, 15vw, 210px)/1 var(--font-display); letter-spacing: -.07em; color: rgba(21, 17, 15, .05); white-space: nowrap; pointer-events: none; }
.pg .pg-close__in { position: relative; display: grid; justify-items: center; gap: 18px; }
.pg .pg-close h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -.045em; }
.pg .pg-close p { max-width: 52ch; font-size: 17px; color: var(--text-2); }

@media (max-width: 700px) {
  .pg { padding-top: calc(var(--cy-hdr-h-mobile, 56px) + 20px); padding-left: 8px; padding-right: 8px; }
  .pg__shell { border-radius: var(--r-min); }
  .pg .ph-card.form { padding: 22px 18px; }
}
/* fixes found on the site: the hub centre is a li too (keep it a centred column); medals never shrink; script words keep their case */
.pg .hub li.hub__core { display: grid; flex-direction: column; text-align: center; }
.pg .medal { flex: none; }
.pg .label em, .pg .hero h1 em { text-transform: none; }
.pg .hero h1 { text-transform: none; }
/* the site's H1 rule (typography.css, D-027: bold, uppercase, black, !important); this hero keeps the approved sentence case, as the product heroes do */
body .pg .hero h1 { text-transform: none !important; color: var(--text) !important; }
/* in-page links land below the fixed header */
.pg [id] { scroll-margin-top: calc(var(--cy-hdr-h, 64px) + 32px); }
.pg .dark__in { position: relative; z-index: 1; padding-inline: clamp(20px, 4vw, 56px); }
.pg .related a { color: var(--text); }
.pg .related a b { color: var(--text); }
@media (max-width: 1000px) {
  .pg .hub { grid-template-areas: none !important; }
  .pg .hub li.hub__core { grid-area: auto !important; margin: 24px auto 30px; }
}
@media (max-width: 700px) {
  .pg .disc__tag, .pg .tl__k, .pg .vs__head, .pg .ladder__bar span, .pg .tabs__tab span { font-size: 11px; }
  .pg .hub li.hub__core { width: 210px; height: 210px; }
}

/* D-139 (owner: "why are there grey bars, properly set this"): no framed shell on the site. The page is one seamless
   light surface from the header to the footer; the content keeps its centred 1400px column. */
.pg { padding: 0; background: var(--surface); }
.pg__shell { max-width: none; margin: 0; border-radius: 0; box-shadow: none; padding-top: calc(var(--cy-hdr-h, 64px) + 20px); }
.pg .in { max-width: 1400px; margin-inline: auto; }
.pg .dark__in { max-width: none; }
@media (max-width: 700px) {
  .pg { padding: 0; }
  .pg__shell { border-radius: 0; padding-top: calc(var(--cy-hdr-h-mobile, 56px) + 12px); }
}
/* D-139: a calmer hero on the site - the H1 tops out at 76px (three lines at most), less air above it */
.pg .hero { padding-block: 24px 56px; }
body .pg .hero h1 { font-size: clamp(40px, 4.4vw, 64px) !important; line-height: .98; text-wrap: wrap; }
/* D-139: copy starts level with the form; the legal notice sits in the gap beside the lead, clear of the H1 */
@media (min-width: 1001px) {
  .pg .hero { align-items: start; }
  .pg .hero__copy { padding-top: 48px; }
  .pg .notice { left: -150px; top: 50%; }
}
/* D-140 (owner: "so much space between the hero and the nav bar"): the layout already places .pg below the header,
   so the shell no longer adds the header height again; the hero and form padding is trimmed to match */
.pg__shell { padding-top: 24px; }
.pg .hero { padding-top: 8px; }
.pg .mock { padding-top: 16px; }
@media (min-width: 1001px) { .pg .hero__copy { padding-top: 28px; } }
@media (max-width: 700px) { .pg__shell { padding-top: 16px; } }
/* D-142: the hero strip holds only the four steps (the figures live in the Quick answer band) */
.pg .strip { grid-template-columns: minmax(0, 1fr); }

/* D-143 (owner: "why is the nav and page not properly merging"): the header is sticky and transparent, so the white
   page body showed in its band and the glass page began below it with a hard edge. Like the product heroes (.ph,
   product-hero.css), the page now slides up under the header; its surface, grid and glows run behind the nav. */
.pg { --pg-hdr: 76px; margin-top: calc(-1 * var(--pg-hdr)); }
.pg__shell { padding-top: calc(var(--pg-hdr) + 24px); }
@media (max-width: 991px) { .pg { --pg-hdr: 64px; } }
@media (max-width: 700px) { .pg__shell { padding-top: calc(var(--pg-hdr) + 16px); } }

/* D-144: the live page's illustrations - one beside each matching section heading, one on each How to buy step */
.pg .ps__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 34px; }
.pg .ps__top .ps__head { margin-bottom: 0; }
.pg .ps__art { position: relative; margin: 0; width: clamp(200px, 22vw, 290px); }
.pg .ps__art::before { content: ""; position: absolute; inset: 12% 4% 0; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(240, 93, 73, .14), transparent 68%); }
.pg .ps__art img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .pg .ps__art img { animation: pg-float 7s ease-in-out infinite; } }
.pg .journey__art { display: block; width: 100%; max-width: 200px; height: 130px; object-fit: contain; object-position: left bottom; margin-bottom: 14px; }
@media (max-width: 700px) {
  .pg .ps__top { grid-template-columns: minmax(0, 1fr); }
  .pg .ps__art { width: 200px; justify-self: center; order: -1; }
  .pg .journey__art { height: 110px; }
}

/* D-144 (owner: "decrease the font size of paras"): running text one step smaller across the page */
.pg .ps__body > p:not([class]), .pg .cols2 p { font-size: 15px; line-height: 1.7; }
.pg .ps__lead { font-size: 16px; }
.pg .hero__lead { font-size: 16px; line-height: 1.65; }
.pg .ticks li { font-size: 14.5px; }
.pg .spread__lead dd { font-size: 19px; }
.pg .big { font-size: clamp(18px, 1.7vw, 21px) !important; }
.pg .spread__item dd, .pg .tabs__panel dd, .pg .lst li, .pg .cover2 li, .pg .quad p, .pg .personas li, .pg .track li, .pg .donts li { font-size: 14.5px; }
.pg .hub p, .pg .path p, .pg .journey span, .pg .reasons li, .pg .ladder__txt p, .pg .vs__row dd, .pg .tl__row p, .pg .bub li, .pg .gtk__body > p, .pg .faq__a, .pg .terms dd, .pg .steps2 li { font-size: 14px; }
.pg .pg-faq .cy-faq__a { font-size: 14.5px; }
.pg .pg-close p { font-size: 16px; }
/* the step connector runs between the numbered circles, under the illustrations (130px art + 14px gap + half a circle) */
.pg .journey li:has(.journey__art):not(:last-child)::after { top: 182px; }

/* D-145 (owner: "why blank space"): a section with no illustration puts its opening paragraphs beside the heading */
.pg .ps--intro .ps__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.pg .ps__intro { display: grid; gap: 14px; padding-left: 28px; border-left: 2px solid rgba(240, 93, 73, .25); }
.pg .ps__intro p { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.7; color: var(--text-body); }
.pg .ps__intro p:first-child { font-size: 16px; color: var(--text); }
@media (max-width: 1000px) {
  .pg .ps--intro .ps__top { grid-template-columns: minmax(0, 1fr); }
  .pg .ps__intro { padding-left: 18px; }
}
/* D-146 (owner: "it's off, fix it"): the heading and the opening paragraphs centre on each other (they were bottom-aligned, so a
   short heading sat low beside a tall paragraph) */
.pg .ps--intro .ps__top { align-items: center; }
/* D-146: once the page scrolls, the transparent header band takes the page colour (frosted), so text scrolling under the
   floating nav no longer shows around it; at the top it stays clear and the page still runs behind the nav (D-143) */
body:has(.pg) header.cy-hdr { transition: background-color .25s ease, box-shadow .25s ease; }
body:has(.pg) header.cy-hdr.is-scrolled { background: rgba(253, 251, 250, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(21, 17, 15, .06); }
/* D-147 (owner: "make this centre aligned"): How to buy steps centred in their columns; the connector runs from one
   circle to the next (circle 60px, 8px clear each side, 24px column gap) */
.pg .journey li { justify-items: center; text-align: center; }
.pg .journey__art { margin-inline: auto; object-position: center bottom; }
.pg .journey li:not(:last-child)::after,
.pg .journey li:has(.journey__art):not(:last-child)::after { left: calc(50% + 38px); right: auto; width: calc(100% + 24px - 76px); }
@media (max-width: 700px) { .pg .journey li { max-width: 420px; justify-self: center; } }
/* D-148 (owner: "no line under the nav bar, cleaner"): the scrolled header band has no hairline or shadow */
body:has(.pg) header.cy-hdr.is-scrolled { box-shadow: none; border-bottom: 0; }
/* D-148: the 60px grid belongs to the hero only - it fades out by ~900px (the % mask reached deep into the content on
   this long page) */
.pg__shell::before { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 420px, transparent 900px); mask-image: linear-gradient(180deg, #000 0, #000 420px, transparent 900px); }
/* D-149 (owner: "move this more to left"): the legal notice sits fully in the gap, its right edge just tucked under the form */
@media (min-width: 1001px) { .pg .notice { left: -212px; } }
@media (min-width: 1001px) and (max-width: 1199px) { .pg .notice { left: -168px; width: 170px; } }
/* 1001-1279px: the gap is too narrow for the card without covering the bullets; it sits above the form's top-right corner */
@media (min-width: 1001px) and (max-width: 1279px) {
  .pg .mock { padding-top: 112px; }
  .pg .notice { left: auto; right: -6px; top: 0; width: 190px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .pg .mock { padding-top: 150px; } }
/* D-150 (owner: "fix this", the hub centre): the circle's content is centred as one block and the script line is set
   smaller over two lines, so it stays well inside the circle where it narrows */
.pg .hub li.hub__core { align-content: center; justify-items: center; gap: 2px; padding: 34px; box-sizing: border-box; }
.pg .hub__core .medal { margin-bottom: 10px; width: 60px; height: 60px; }
.pg .hub__core b { font-size: 20px; }
.pg .hub__core em { max-width: 150px; margin-top: 4px; font-size: 16px; line-height: 1.35; text-align: center; }
.pg .hub__core em { max-width: 140px; text-wrap: balance; }

/* ===================== D-151: the glass design on every SEO-brief product page ===================== */
/* tables drawn as cards (data 'as' => 'cards'): one glass card per row, every column kept */
.pg .tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pg .tcards li { display: grid; align-content: start; gap: 8px; padding: 22px; }
.pg .tcards__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint); color: #a03e31; font: 700 12.5px/1 var(--font-display); }
.pg .tcards li:first-child .tcards__n { background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; }
.pg .tcards h3 { margin: 4px 0 2px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.pg .tcards p { font-size: 14px; line-height: 1.6; color: var(--text-body); }
.pg .tcards p .label { display: block; margin-bottom: 2px; font-size: 10.5px; }
/* short one-paragraph sections side by side (SeoPage::story groups) */
.pg .gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pg .gcard { display: grid; align-content: start; gap: 10px; padding: 26px; }
.pg .gcard h2 { font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
.pg .gcard .ps__body { gap: 12px; }
.pg .gcard .ps__body > p:not([class]) { font-size: 14.5px; }
.pg .ps--group + .ps, .pg .ps + .ps--group { border-top: 1px solid var(--glass-border); }
/* a broker line under a hero strip (briefs' hero 'note') */
.pg .hero__note { margin: -8px 0 24px; font-size: 12.5px; color: var(--text-3); }
/* the D-108 scene markup is not drawn in glass heroes */
.pg .hero .phs { display: none; }
@media (max-width: 700px) { .pg .gcards, .pg .tcards { grid-template-columns: minmax(0, 1fr); } }
body .pg .hero h1 { text-wrap: balance; }
@media (max-width: 700px) { .pg .tcards p .label, .pg .label { font-size: 11px; } }

/* ===================== D-152: the home page on the light glass ground (index.blade.php, coveryou.glass_home) ===================== */
/* ground: the product pages' surface instead of the pink hexagon artwork; a faint grid behind the hero and soft glows */
.homepage-figma-bg.hg { position: relative; background: #fdfbfa; }
.homepage-figma-bg.hg::before { content: ""; position: absolute; inset: 0 0 auto; height: 980px; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(21, 17, 15, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 17, 15, .045) 1px, transparent 1px); background-size: 60px 60px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%); }
.homepage-figma-bg.hg::after { content: ""; position: absolute; right: -120px; top: -140px; width: 560px; height: 560px; border-radius: 50%; background: rgba(240, 93, 73, .2); filter: blur(120px); pointer-events: none; z-index: 0; }
.homepage-figma-bg.hg > * { position: relative; z-index: 1; }
.hg .cy-section-decor__layer { display: none !important; }
body:has(.hg) header.cy-hdr.is-scrolled { background: rgba(253, 251, 250, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }

/* glass sections placed inside the page (brief sections, FAQ): no pull-up, no own ground */
.pg.pg--inline { margin-top: 0; padding: 0; background: transparent; }
.pg.pg--inline .pg__shell { padding-top: 0; background: transparent; overflow: visible; }
.pg.pg--inline .pg__shell::before { display: none; }
.pg.pg--inline .ps:first-child { border-top: 0; }
.pg.pg--inline .pg-faq { border-top: 0; }
.pg .related a b small { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--text-2); }

/* the older sections in the same language: Inter headings set tight, a dot label instead of the dash ornament, glass cards */
.hg .compare-accent { display: none; }
.hg :is(.doctor-trust-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) h2 {
  font-family: Inter, system-ui, sans-serif; font-weight: 700 !important; font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1.05 !important; letter-spacing: -.045em; color: #15110f; text-wrap: balance; }
.hg :is(.doctor-trust-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) h2::before {
  content: "• CoverYou"; display: block; margin-bottom: 12px; font: 600 11px/1.4 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #5e5651; }
.hg .protection-decisions-section h2::before { content: "• Tools for doctors"; }
.hg .doctor-calculators-section h2::before { content: "• Calculators"; }
.hg .insurance-partners-section h2::before { content: "• Partner insurers"; }
.hg .voices-trust-section h2::before { content: "• Reviews"; }
.hg :is(.protection-card, .calc-card, .voices-rating, .trust-orbit-ring) { background: rgba(255, 255, 255, .62) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(21, 17, 15, .08) !important; box-shadow: 0 18px 40px -32px rgba(92, 23, 14, .45) !important; }
.hg :is(.protection-card, .calc-card) { border-radius: 24px !important; }
.hg :is(.protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) + section,
.hg :is(.protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { border-top: 1px solid rgba(21, 17, 15, .06); }

/* closing call to action with the COVERYOU watermark, as on the product pages */
.hg .doctor-ecosystem-cta { position: relative; overflow: hidden; }
.hg .hg-mark { position: absolute; left: 50%; top: 18px; z-index: 0; transform: translateX(-50%); font: 700 clamp(80px, 15vw, 210px)/1 Inter, system-ui, sans-serif; letter-spacing: -.07em; color: rgba(21, 17, 15, .05); white-space: nowrap; pointer-events: none; }
.hg .doctor-ecosystem-cta .compare-container { position: relative; z-index: 1; }
/* D-152: links inside running text in the brand ink (Bootstrap's blue showed through) */
.pg :is(.ps__body, .ps__intro, .gcard, .tcards, .spread, .gtk__body, .tabs__panel, .vs, .tl, .cover2, .lst, .disc) a:not(.cy-btn):not(.glass) { color: #a03e31; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 93, 73, .45); }
.pg .dark a:not(.cy-btn) { color: #f9b4a6; }
.hg .doctor-ecosystem-cta { padding-top: 150px !important; }
.hg .hg-mark { top: 10px; }
@media (max-width: 700px) { .hg .doctor-ecosystem-cta { padding-top: 96px !important; } }

/* ===================== D-154: each product's own hero object (PiGlass::heroObject), in the notice's place ===================== */
.pg .hobj { display: grid; gap: 8px; width: 230px; padding: 16px 18px; }
@media (min-width: 1280px) { .pg .hobj { left: -244px; } }
.pg .hobj b { margin: 0; font: 650 15px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.pg .hobj__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; box-shadow: 0 12px 24px -12px rgba(229, 83, 63, .9); }
.pg .hobj__icon .ic { width: 28px; height: 28px; }
.pg .hobj__big { font: 800 30px/1 var(--font-display); letter-spacing: -.04em; background: linear-gradient(120deg, #f7836f, var(--coral) 55%, #d9472f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg .hobj__chart { width: 100%; height: 56px; }
.pg .hobj__chart polygon { fill: rgba(240, 93, 73, .14); }
.pg .hobj__chart polyline { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pg .hobj__rows { display: grid; gap: 7px; margin: 2px 0 0; padding: 0; list-style: none; }
.pg .hobj__rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); }
.pg .hobj__rows i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--tint); color: var(--coral); font-style: normal; }
.pg .hobj__rows i .ic { width: 13px; height: 13px; }
.pg .hobj__rows em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.pg .hobj__rows em .ic { width: 13px; height: 13px; color: #0a8a52; }
.pg .hobj__total { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 0; padding-top: 8px; border-top: 1.5px dashed rgba(240, 93, 73, .35); font-size: 13px; color: var(--text-2); }
.pg .hobj__total b { font: 800 20px/1 var(--font-display); color: var(--coral); }
.pg .hobj__avatars { display: flex; margin: 2px 0; }
.pg .hobj__avatars span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(0, 0, 0, .35); font: 700 11px/1 var(--font-display); color: #a03e31; }
.pg .hobj__avatars span:first-child { margin-left: 0; background: var(--coral); color: #fff; }
.pg .hobj__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.pg .hobj__chips span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--glass-border); font-size: 11.5px; font-weight: 600; color: var(--text); }
.pg .hobj__chips .ic { width: 13px; height: 13px; color: var(--coral); }
.pg .hobj .stamp { justify-self: start; margin-top: 2px; }
.pg .hobj__note { font-size: 10.5px; color: var(--text-3); }
@media (min-width: 1001px) and (max-width: 1279px) { .pg .hobj { width: 220px; } .pg .mock:has(.hobj) { padding-top: 210px; } }
/* the hero copy leaves room for the product object in the gap */
@media (min-width: 1280px) { .pg .hero:has(.hobj) .hero__copy { padding-right: 120px; } }
/* D-154: a worked sum as a calculation slip (term: how much cover) */
.pg .slip { max-width: 640px; padding: 24px 28px; }
.pg .slip__head { display: flex; justify-content: space-between; margin: 0 0 10px; font: 700 11px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #a03e31; }
.pg .slip__rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg .slip__rows li { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; font-size: 15px; color: var(--text-body); }
.pg .slip__rows i { border-bottom: 2px dotted rgba(21, 17, 15, .18); transform: translateY(-4px); }
.pg .slip__rows b { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.pg .slip__minus b { color: #6b625d; }
.pg .slip__minus b::before { content: "− "; }
.pg .slip__total { margin-top: 6px; padding-top: 14px !important; border-top: 2px solid var(--text); }
.pg .slip__total span { font-weight: 700; color: var(--text); }
.pg .slip__total b { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; color: var(--coral); }
@media (max-width: 700px) { .pg .slip { padding: 20px; } .pg .slip__rows li { grid-template-columns: minmax(0, 1fr) auto; } .pg .slip__rows i { display: none; } }
/* D-154: three or more covers compared as side-by-side columns; this page's product raised in coral */
.pg .ccols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; align-items: start; }
.pg .ccols__col { display: grid; gap: 14px; margin: 0; padding: 24px; }
.pg .ccols__col h3 { padding-bottom: 12px; border-bottom: 1.5px dashed rgba(240, 93, 73, .3); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.pg .ccols__col dt { margin-bottom: 3px; font: 700 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pg .ccols__col dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.pg .ccols__col.is-hl { box-shadow: inset 0 0 0 2px var(--coral), 0 24px 44px -26px rgba(229, 83, 63, .7); transform: translateY(-6px); }
.pg .ccols__col.is-hl h3 { color: var(--coral); }
@media (max-width: 900px) { .pg .ccols { grid-template-columns: minmax(0, 1fr); } .pg .ccols__col.is-hl { transform: none; } }
.pg .slip { max-width: none; }

/* D-156 (glass home hero) was rolled back on 31 Oct at the owner's request: the home hero keeps its original style (style.css). */
@media (max-width: 700px) { .pg .ccols__col dt, .pg .hobj__note { font-size: 11px; } }
/* D-158: the home page's four reasons sit as a row of four, with room before the VS comparison under them */
.pg .ps__body > .reasons:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg .ps__body > .reasons + h3 { margin-top: 28px; }
@media (max-width: 1000px) { .pg .ps__body > .reasons:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pg .ps__body > .reasons:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.pg .gcards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* D-160: each product's own animated scene (hero-scenes.css) behind the glass form card again */
.pg .hero .phs { display: block; }
.pg .mock:has(> .phs) { position: relative; }
.pg .mock > .phs { z-index: 0; }
.pg .mock > .phs ~ .ph-card.form { z-index: 2; }
@media (min-width: 1280px) { .pg .hero:has(.mock > .phs) .hero__copy { padding-right: 150px; } }
.pg .mock > .phs .phs-blob { opacity: .8; }
/* D-160: the glass hero's gap is wider than the D-108 one, so the scene reaches further into it and the chips hanging
   under the card get room above the steps strip */
@media (min-width: 1280px) {
  .pg .mock > .phs { inset: -30px -40px -20px -280px; }
  .pg .hero:has(.mock > .phs) { padding-bottom: 76px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .pg .hero:has(.mock > .phs) { padding-bottom: 76px; } .pg .mock:has(> .phs) { padding-top: 16px; } }
@media (min-width: 1001px) and (max-width: 1279px) { .pg .hero:has(.mock > .phs) .hero__copy { padding-right: 150px; } }

/* ===================== D-161: bento card grids, illustration layouts ===================== */
.pg .bento { display: grid; grid-template-columns: repeat(var(--bc, 4), minmax(0, 1fr)); gap: 16px; }
.pg .bento > .is-wide { grid-column: span 2; }
.pg .bento > .is-wide.glass { background: radial-gradient(120% 120% at 100% 0%, rgba(240, 93, 73, .12), transparent 60%), rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .22), 0 22px 44px -30px rgba(229, 83, 63, .55); }
.pg .bento > .is-wide h3, .pg .bento > .is-wide h2 { font-size: 20px; }
.pg .bento > li, .pg .bento > article { height: 100%; }
@media (max-width: 1000px) {
  .pg .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg .bento > .is-wide { grid-column: auto; }
  .pg .bento > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .pg .bento { grid-template-columns: minmax(0, 1fr); } .pg .bento > :last-child:nth-child(odd) { grid-column: auto; } }

/* text-only section with an illustration: text left, art right, centred on each other */
.pg .ps__side { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); gap: 32px 64px; align-items: center; }
.pg .ps__side .ps__head { margin-bottom: 22px; }
.pg .ps--side .ps__art { width: 100%; }
.pg .ps--side .ps__art img { max-height: 260px; }
/* wide section with an illustration: compact heading row, art no taller than the heading block */
.pg .ps--art:not(.ps--side) .ps__top { align-items: center; margin-bottom: 28px; }
.pg .ps--art:not(.ps--side) .ps__art { width: clamp(180px, 18vw, 240px); }
.pg .ps--art:not(.ps--side) .ps__art img { max-height: 170px; }
@media (max-width: 1000px) { .pg .ps__side { grid-template-columns: minmax(0, 1fr); } .pg .ps--side .ps__art { width: 220px; justify-self: center; order: -1; } }
.pg .ps--side .ps__body > p:not([class]) { max-width: none; }

/* D-163 (owner: "fix this negative space", Quick answer): the short lead is a full-width statement card; the answers sit
   in a row under it instead of a tall column beside it */
.pg .spread { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pg .spread__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 28px; padding: 26px 30px; border-radius: 24px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(240, 93, 73, .12), transparent 60%), rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .2), 0 22px 44px -32px rgba(229, 83, 63, .55); }
.pg .spread__lead::before { display: none; }
.pg .spread__lead dt { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.pg .spread__lead dd { font-size: clamp(18px, 1.7vw, 21px); }
.pg .spread > div:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pg .spread__item, .pg .spread__item:first-child { padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px var(--glass-border); }
.pg .spread__item + .spread__item { border-top: 0; }
@media (max-width: 700px) { .pg .spread__lead { grid-template-columns: minmax(0, 1fr); padding: 22px; } }
/* D-164: the conclusion under a comparison, card grid, table or steps: a full-width takeaway line joined to the block */
.pg .takeaway { display: flex; align-items: flex-start; gap: 12px; max-width: none !important; margin: -6px 0 0; padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(240, 93, 73, .1), rgba(240, 93, 73, .02)); box-shadow: inset 3px 0 0 var(--coral); font-size: 15px; line-height: 1.6; color: var(--text); }
.pg .takeaway .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--coral); }
.pg .dark .takeaway { background: rgba(255, 255, 255, .06); color: #f3ece8; }

/* D-165: compact sideways card scroller (table cards with more than four rows) */
.pg .scroller { position: relative; }
.pg .tcards--scroll { display: flex; gap: 16px; margin: 0; padding: 4px 2px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(240, 93, 73, .4) transparent; list-style: none; }
.pg .tcards--scroll > li { flex: 0 0 clamp(250px, 24%, 300px); scroll-snap-align: start; padding: 20px; gap: 6px; }
.pg .tcards--scroll h3 { font-size: 16.5px; }
.pg .tcards--scroll p { font-size: 13.5px; }
.pg .scroller__btn { position: absolute; top: calc(50% - 26px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--coral); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 12px 26px -12px rgba(92, 23, 14, .5); }
.pg .scroller__btn .ic { width: 22px; height: 22px; }
.pg .scroller__btn--prev { left: -18px; }
.pg .scroller__btn--next { right: -18px; }
.pg .scroller__btn[hidden] { display: none; }
@media (max-width: 700px) { .pg .scroller__btn { display: none; } .pg .tcards--scroll > li { flex-basis: 80%; } }

/* paragraphs run the full width and wrap without a lone last word */
.pg .ps__body > p:not([class]), .pg .ps__intro p, .pg .gcard p, .pg .cols2 p { max-width: none; text-wrap: pretty; }
.pg p, .pg dd, .pg li { text-wrap: pretty; }

/* ===================== D-166 (owner, 31 Oct: "everywhere it is a shade of coral, the page needs more colours") =====================
   The design system's own families (tokens.css: info, success, warning, critical) beside the brand coral. Coral stays the
   brand: buttons, the H1 accent, labels, selected tabs, the ladder. The rest by meaning, and a four-colour rotation on
   icons and numbers so sections read apart. Text colours are the 700/800 steps, which pass 4.5:1 on their tints. */
.pg {
  --c-coral: #c9412e; --c-coral-t: #fdeae7; --c-coral-b: #f6c1b6; --c-coral-s: #f05d49;
  --c-blue: #1b3cce; --c-blue-t: #e9effe; --c-blue-b: #b6cffc; --c-blue-s: #365eed;
  --c-green: #0e8743; --c-green-t: #e4faee; --c-green-b: #a8ecc6; --c-green-s: #0ca750;
  --c-amber: #a15e00; --c-amber-t: #fff6d6; --c-amber-b: #f6dc5e; --c-amber-s: #eaad00;
  --c-red: #b00e00; --c-red-t: #ffece4; --c-red-b: #ffc0a8; --c-red-s: #fe3311;
}
/* the rotation: 1 coral, 2 blue, 3 green, 4 amber */
.pg :is(.personas, .reasons, .hub, .quad, .related, .gtk, .tcards, .gcards, .path, .journey, .spread > div:last-child, .strip__steps, .track, .ccols) > :nth-child(4n+1) { --ac: var(--c-coral); --at: var(--c-coral-t); --ab: var(--c-coral-b); --as: var(--c-coral-s); }
.pg :is(.personas, .reasons, .hub, .quad, .related, .gtk, .tcards, .gcards, .path, .journey, .spread > div:last-child, .strip__steps, .track, .ccols) > :nth-child(4n+2) { --ac: var(--c-blue); --at: var(--c-blue-t); --ab: var(--c-blue-b); --as: var(--c-blue-s); }
.pg :is(.personas, .reasons, .hub, .quad, .related, .gtk, .tcards, .gcards, .path, .journey, .spread > div:last-child, .strip__steps, .track, .ccols) > :nth-child(4n+3) { --ac: var(--c-green); --at: var(--c-green-t); --ab: var(--c-green-b); --as: var(--c-green-s); }
.pg :is(.personas, .reasons, .hub, .quad, .related, .gtk, .tcards, .gcards, .path, .journey, .spread > div:last-child, .strip__steps, .track, .ccols) > :nth-child(4n+4) { --ac: var(--c-amber); --at: var(--c-amber-t); --ab: var(--c-amber-b); --as: var(--c-amber-s); }
/* the hub's centre is its first child: the features start at the second, so shift them back to coral first */
.pg .hub > .hub__core ~ :nth-child(4n+2) { --ac: var(--c-coral); --at: var(--c-coral-t); --ab: var(--c-coral-b); --as: var(--c-coral-s); }
.pg .hub > .hub__core ~ :nth-child(4n+3) { --ac: var(--c-blue); --at: var(--c-blue-t); --ab: var(--c-blue-b); --as: var(--c-blue-s); }
.pg .hub > .hub__core ~ :nth-child(4n+4) { --ac: var(--c-green); --at: var(--c-green-t); --ab: var(--c-green-b); --as: var(--c-green-s); }
.pg .hub > .hub__core ~ :nth-child(4n+5) { --ac: var(--c-amber); --at: var(--c-amber-t); --ab: var(--c-amber-b); --as: var(--c-amber-s); }

/* icons and numbers take their item's colour */
.pg :is(.personas, .reasons, .hub, .quad, .related, .gtk) > * .medal:not(.medal--solid) { background: var(--at, var(--tint)); color: var(--ac, var(--coral)); box-shadow: inset 0 0 0 1.5px var(--ab, #f6c1b6), 0 14px 28px -18px rgba(21, 17, 15, .35); }
.pg :is(.personas, .reasons, .gtk) > * .medal--solid { background: linear-gradient(140deg, var(--ab, #f7836f), var(--as, var(--coral))); color: #fff; }
.pg .spread__item > i { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ab); }
.pg .spread__item dt { color: var(--ac); }
.pg .tcards__n, .pg .tcards li:first-child .tcards__n { background: var(--at); color: var(--ac); box-shadow: none; }
.pg .tcards > li { box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 3px 0 var(--as, var(--coral)); }
.pg .gcard { box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 3px 0 var(--as, var(--coral)); }
.pg .gcard > .label .dot { background: var(--as); box-shadow: none; }
.pg .path__n, .pg .path li:first-child .path__n { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 2px var(--ab); }
.pg .path li:hover .path__n { background: var(--as); color: #fff; }
.pg .journey__n, .pg .journey li:first-child .journey__n { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 2px var(--ab); }
.pg .journey li:last-child .journey__n { background: var(--c-green-s); color: #fff; box-shadow: 0 14px 28px -12px rgba(12, 167, 80, .7); }
.pg .strip__step i, .pg .strip__step:nth-child(2) i { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ab); }
.pg .strip__step:last-child i { background: var(--c-green-s); color: #fff; box-shadow: 0 10px 24px -10px rgba(12, 167, 80, .7); }
.pg .track__n { background: linear-gradient(140deg, var(--ab), var(--as)); box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 34px color-mix(in srgb, var(--as) 45%, transparent); }
.pg .ccols__col:not(.is-hl) h3 { color: var(--ac); }
.pg .ccols__col:not(.is-hl) { box-shadow: inset 0 0 0 1px var(--glass-border), inset 0 3px 0 var(--as); }
.pg .hub__core { background: radial-gradient(circle at 35% 28%, #fff, #fff5f2 55%, #ffe3db); }

/* by meaning: covered = green, not covered and mistakes = red */
.pg .lst--check li > i { background: var(--c-green-t); color: var(--c-green); }
.pg .lst--cross li > i { background: var(--c-red-t); color: var(--c-red); }
.pg .cover2 > div:not(.no) h3 .medal { background: linear-gradient(140deg, #40e889, var(--c-green-s)); color: #fff; box-shadow: 0 14px 28px -12px rgba(12, 167, 80, .7); }
.pg .cover2 > div:not(.no) { box-shadow: inset 0 0 0 1px var(--c-green-b), 0 18px 40px -32px rgba(12, 167, 80, .5); }
.pg .cover2 > div:not(.no) li::before { background: var(--c-green-s); box-shadow: 0 0 0 4px rgba(12, 167, 80, .15); }
.pg .cover2 .no h3 .medal { background: var(--c-red-t); color: var(--c-red); box-shadow: inset 0 0 0 1.5px var(--c-red-b); }
.pg .cover2 .no { box-shadow: inset 0 0 0 1px var(--c-red-b); }
.pg .cover2 .no li::before { background: var(--c-red-s); }
.pg .donts__n { color: var(--c-red-b); }
.pg .donts__n::after { background: var(--c-red-s); }
.pg .donts__x { background: var(--c-red-s); }
.pg .vs__b i { background: var(--c-green-s); }
.pg .vs__badge { background: linear-gradient(140deg, #6b6b6b, #2d2d2d); box-shadow: 0 0 0 8px rgba(21, 17, 15, .06), 0 16px 30px -12px rgba(21, 17, 15, .6); }
.pg .ticks li::before { background-color: var(--c-green-t); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8743' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

/* disclaimers in amber, takeaways in blue */
.pg .disc { border-top-color: var(--c-amber-b); }
.pg .disc__tag { background: var(--c-amber-t); color: var(--c-amber); }
.pg .dark .disc__tag { background: rgba(234, 173, 0, .18); color: #f6dc5e; }
.pg .takeaway { background: linear-gradient(90deg, var(--c-blue-t), rgba(233, 239, 254, .3)); box-shadow: inset 3px 0 0 var(--c-blue-s); }
.pg .takeaway .ic { color: var(--c-blue); }

/* figures band: each figure its own colour */
.pg .band li:nth-child(2) b { background: linear-gradient(120deg, #6488ff, var(--c-blue-s)); -webkit-background-clip: text; background-clip: text; }
.pg .band li:nth-child(3) b { background: linear-gradient(120deg, #40e889, var(--c-green)); -webkit-background-clip: text; background-clip: text; }
.pg .band li:nth-child(4) b { background: linear-gradient(120deg, #f4c519, var(--c-amber)); -webkit-background-clip: text; background-clip: text; }

/* soft colour in the ground: a different glow behind each third section */
.pg .ps:nth-of-type(3n+1) { background: radial-gradient(40% 60% at 100% 0%, rgba(54, 94, 237, .06), transparent 70%); }
.pg .ps:nth-of-type(3n+2) { background: radial-gradient(40% 60% at 0% 100%, rgba(12, 167, 80, .05), transparent 70%); }
.pg .ps:nth-of-type(3n) { background: radial-gradient(40% 60% at 100% 100%, rgba(234, 173, 0, .06), transparent 70%); }

/* D-167 (owner: "why is the same style back to back, try something else"): illustration sections alternate sides, and
   every other section sits on a soft tinted band, so neighbouring sections never share a layout or a ground */
@media (min-width: 1001px) {
  .pg .ps--flip .ps__side { grid-template-columns: clamp(240px, 26vw, 340px) minmax(0, 1fr); }
  .pg .ps--flip .ps__side > .ps__art { order: -1; }
  .pg .ps--flip .ps__top { grid-template-columns: auto minmax(0, 1fr); }
  .pg .ps--flip .ps__top > .ps__art { order: -1; }
}
.pg .ps:nth-of-type(even):not(.ps--plain-top) { background: linear-gradient(180deg, #f7f2ef, #faf6f4); }
.pg .ps:nth-of-type(even) + .ps, .pg .ps + .ps:nth-of-type(even) { border-top-color: transparent; }

/* ===================== D-169 (owner, 31 Oct: "negative space, fix it" and "why are these generic cards here, I am using glass style") ===================== */
/* 1. Hero: on pages whose quote card is much taller than the copy (x-product-hero tuck), the steps strip moves up under the
      copy, beside the card, on wide screens. Its foot lines up with the card (or with the scene's chips under the card). */
.pg .hero--tuck > .strip { grid-column: 1 / -1; margin-top: 36px; padding-bottom: 0; }
.pg .in > .hero.hero--tuck:has(> .strip) { padding-bottom: 24px; }
@media (min-width: 1280px) {
  .pg .in > .hero.hero--tuck:has(> .strip) { grid-template-areas: "copy mock" "strip mock"; grid-template-rows: auto 1fr; align-items: start; }
  .pg .hero--tuck > .hero__copy { grid-area: copy; }
  .pg .hero--tuck > .mock { grid-area: mock; }
  .pg .hero--tuck > .strip { grid-area: strip; align-self: end; margin: 0 0 24px; }
  .pg .in > .hero.hero--tuck:has(.phs-chip) { padding-bottom: 76px; }
  .pg .hero--tuck:has(.phs-chip) > .strip { margin-bottom: -46px; }
  .pg .hero--tuck .strip__steps { padding: 18px 18px; gap: 10px; }
  .pg .hero--tuck .strip__step span { font-size: 12px; }
}

/* 2. Glass cards: a frosted pane instead of a white card with a coloured top rule (D-166). Each card keeps its rotation
      colour as a soft glow in its top corner and in its shadow; a bright edge on top, a faint line round it. Colour orbs
      behind the card sections give the frost something to blur. The quote form card is left as it is. */
.pg .glass:where(:not(.form, .is-hl)) {
  --gl: var(--as, #f05d49);
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--gl) 13%, transparent), transparent 62%),
    linear-gradient(155deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .5));
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 26px 50px -34px color-mix(in srgb, var(--gl) 60%, rgba(21, 17, 15, .4));
}
.pg .tcards > li, .pg .gcard, .pg .ccols__col:not(.is-hl) {
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 26px 50px -34px color-mix(in srgb, var(--gl) 60%, rgba(21, 17, 15, .4));
}
.pg :is(.tcards > li, .gcard, .personas > li, .gtk details, .related a) { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pg :is(.tcards > li, .gcard, .personas > li):hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--gl) 35%, transparent), 0 30px 54px -30px color-mix(in srgb, var(--gl) 70%, rgba(21, 17, 15, .4)); }
.pg .ps:has(:is(.tcards, .personas, .gcards, .ccols, .gtk, .tabs__panel, .slip, .vs)) > .in::before,
.pg .ps:has(:is(.tcards, .personas, .gcards, .ccols, .gtk, .tabs__panel, .slip, .vs)) > .in::after {
  content: ""; position: absolute; z-index: -1; width: min(420px, 50vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(30px); }
.pg .ps:has(:is(.tcards, .personas, .gcards, .ccols, .gtk, .tabs__panel, .slip, .vs)) > .in::before { right: 2%; top: 18%; background: radial-gradient(circle, rgba(54, 94, 237, .16), transparent 66%); }
.pg .ps:has(:is(.tcards, .personas, .gcards, .ccols, .gtk, .tabs__panel, .slip, .vs)) > .in::after { left: 4%; bottom: 0; background: radial-gradient(circle, rgba(240, 93, 73, .16), transparent 66%); }
@media (prefers-reduced-motion: reduce) { .pg :is(.tcards > li, .gcard, .personas > li):hover { transform: none; } }
/* steps with a one-line note keep their title level with the others; the scroller has room for the cards' shadows */
.pg .strip__step { align-content: start; }
.pg .tcards--scroll { padding-bottom: 44px; margin-bottom: -30px; }
/* the wide group cards are now the longest ones (glass-sections); dense flow closes any hole a wide card would leave */
.pg .gcards.bento { grid-auto-flow: row dense; }
@media (max-width: 1000px) { .pg .hero--tuck > .strip { margin-top: 0; } }

/* ===================== D-171 (owner, 31 Oct: "use a very small font for disclaimers and make them green, no need to show them in a card or differently; do it for all disclaimers") =====================
   Site-wide (this file loads on every page): every disclaimer is one plain line of small green text. No pill, icon, rule
   or italics. Green is the design system's success 700 (#0e8743, 4.6:1 on white). The quote forms' consent labels
   (.quote-disclaimer) are not disclaimers and are left as they are. */
.pg .disc { display: block; margin-top: 12px; padding: 0; border: 0; font-size: 11.5px; line-height: 1.55; color: #0e8743; }
.pg .disc > span:last-child { color: inherit; }
.pg .disc__tag { display: inline; padding: 0; margin-right: 4px; border-radius: 0; background: none; color: inherit; font: 700 11.5px/1.55 var(--font-body); letter-spacing: 0; text-transform: none; }
.pg .disc__tag::after { content: ":"; }
.pg .disc__tag .ic, .pg .disc__tag svg { display: none; }
.pg .dark .disc, .pg .dark .disc__tag { background: none; color: #7ee2a8; }
.pg .disc a:not(.cy-btn):not(.glass)[href] { color: inherit; text-decoration-color: rgba(14, 135, 67, .45); }
.pg .hero__note { font-size: 11.5px; line-height: 1.55; color: #0e8743; }
body :is(.term-calc-disclaimer, .bmi-calc-disclaimer, .calorie-calc-disclaimer, .pi-calc-disclaimer, .voices-disclaimer)[class] { font-size: 11.5px; line-height: 1.55; font-style: normal; color: #0e8743; }
body .voices-trust-section .voices-disclaimer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(14, 135, 67, .45); }
@media (max-width: 700px) { .pg .disc, .pg .disc__tag { font-size: 11px; } .pg .disc { display: block; } }

/* ===================== D-172 (owner, 31 Oct: "why is every card a curved rectangle? I need circles and others too for some") =====================
   Shapes follow the text: short items become circles or capsules, medium ones arches or leaves; long cards (groups,
   cover columns, comparisons, tabs) stay rounded rectangles so their paragraphs have room. */
/* circles: the figures band */
.pg .band { grid-template-columns: repeat(auto-fit, minmax(150px, 200px)); justify-content: space-evenly; gap: 24px; }
.pg .band li { aspect-ratio: 1; border-radius: 50%; align-content: center; justify-items: center; text-align: center; padding: 18px; }
.pg .band span { max-width: 13ch; }
/* circles: the "why choose" reasons, as frosted discs (wide screens; tablets and phones keep the icon-and-line rows) */
@media (min-width: 1101px) {
  .pg .reasons { gap: 20px; }
  .pg .reasons li { aspect-ratio: 1; border-radius: 50%; align-content: center; gap: 10px; padding: 15% 13%; font-size: 13.5px; line-height: 1.5;
    --gl: var(--as, #f05d49);
    background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--gl) 14%, transparent), transparent 62%), linear-gradient(155deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .5));
    border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 26px 50px -34px color-mix(in srgb, var(--gl) 60%, rgba(21, 17, 15, .4)); }
  .pg .reasons .medal { width: 54px; height: 54px; font-size: 23px; }
}
/* capsules: related links, closed Good-to-know rows, the mid-page call to action */
.pg .related a { border-radius: 999px; padding: 10px 22px 10px 10px; }
.pg .gtk details:not([open]) { border-radius: 999px; }
.pg .gtk details:not([open]) summary { padding: 12px 14px 12px 12px; }
.pg .gtk details[open] { border-radius: 32px; }
@media (min-width: 901px) { .pg .midcta { border-radius: 999px; padding: 18px 20px 18px 20px; } }
/* arches: the practice-setting / who-it-is-for cards */
.pg .personas > li { border-radius: 150px 150px 26px 26px / 110px 110px 26px 26px; justify-items: center; text-align: center; padding: 30px 24px 26px; }
.pg .personas > li.is-wide { border-radius: 220px 220px 26px 26px / 90px 90px 26px 26px; }
/* leaves: the scroller and table cards */
.pg .tcards > li { border-radius: 36px 10px 36px 10px; }
@media (max-width: 1100px) { .pg .personas > li { border-radius: 110px 110px 24px 24px / 80px 80px 24px 24px; } }
/* circles stay round: the reasons' text sits inside a fixed disc (no growing into ovals); figures on one line */
@media (min-width: 1101px) { .pg .reasons li { min-height: 0; padding: 11% 10%; font-size: 13px; line-height: 1.45; } .pg .reasons li > span { max-width: 22ch; } }
.pg .band b { white-space: nowrap; font-size: clamp(26px, 2.5vw, 36px); }
.pg .in:has(> .midcta) { padding-bottom: 28px; }
@media (min-width: 1101px) {
  .pg .reasons li { width: 100%; max-width: 268px; justify-self: center; }
  .pg .reasons:has(> li:nth-child(4):last-child) li { font-size: 14.5px; padding: 12% 11%; }
}
@media (max-width: 700px) { body .pg .band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body .pg .band li { padding: 12px; } body .pg .band b { font-size: 24px; } body .pg .band span { font-size: 12.5px; } }
/* D-171 (owner: "why are disclaimers still like this"): the takeaway line under a comparison / cards / steps block reads
   the same way - one small green line, no blue panel, rule or icon (OLD: D-166 blue panel, D-151 tinted box) */
.pg .takeaway, .pg .dark .takeaway { display: block; margin: 12px 0 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 11.5px; line-height: 1.55; color: #0e8743; }
.pg .dark .takeaway { color: #7ee2a8; }
.pg .takeaway .ic, .pg .takeaway > svg { display: none; }
.pg .takeaway a:not(.cy-btn):not(.glass)[href] { color: inherit; text-decoration-color: rgba(14, 135, 67, .45); }
@media (max-width: 700px) { .pg .takeaway { font-size: 11px; } }

/* ===================== D-174 (owner, 31 Oct: "try something else for this [VS comparison], it takes space and there is a lot of negative space") =====================
   The versus block as a compact table: feature | first option | second option (a tinted column with green ticks). One short
   line per row instead of a centred pill that wrapped to four lines between two half-empty sides. Same markup (dt, dd.vs__a,
   dd.vs__b); phones keep their stacked rows. */
@media (min-width: 701px) {
  .pg .vs { padding: 10px; }
  .pg .vs__head, .pg .vs__row { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 0; align-items: stretch; }
  .pg .vs__head { margin: 0; }
  .pg .vs__head > * { padding: 14px 20px; }
  .pg .vs__head p:first-child { text-align: left; }
  .pg .vs__head p:last-child { border-radius: 18px 18px 0 0; background: rgba(12, 167, 80, .08); color: #0e8743; }
  .pg .vs__badge { order: -1; justify-self: start; align-self: center; width: 34px; height: 34px; padding: 0; margin-left: 20px; font-size: 11px; box-shadow: 0 0 0 5px rgba(21, 17, 15, .05); }
  .pg .vs__rows::before { display: none; }
  .pg .vs__row { padding: 0; }
  .pg .vs__row + .vs__row { border-top: 1px solid rgba(21, 17, 15, .06); }
  .pg .vs__row > * { padding: 13px 20px; }
  .pg .vs__row dt { order: -1; justify-self: stretch; z-index: auto; padding: 13px 20px; border-radius: 0; background: none; box-shadow: none; text-align: left; font-size: 14.5px; font-weight: 650; line-height: 1.5; color: var(--text); }
  .pg .vs__row dd { font-size: 14.5px; line-height: 1.5; }
  .pg .vs__a { text-align: left; }
  .pg .vs__b { background: rgba(12, 167, 80, .08); align-items: flex-start; }
  .pg .vs__row:last-child .vs__b { border-radius: 0 0 18px 18px; }
  .pg .vs__b i { width: 20px; height: 20px; margin-top: 1px; font-size: 12px; }
}

/* ===================== D-177 (owner, 31 Oct: "negative space, try some other style in this" - the term steps strip) =====================
   Term (journey fan): on wide screens the four steps are a 2 x 2 of small glass tiles (icon beside the words) under the
   copy, their foot level with the quote card's. The scene's chips are hidden in the glass hero (D-176), so the strip no
   longer drops below the card to line up with them. */
@media (min-width: 1280px) {
  .pg .in > .hero.hero--tuck:has(.phs--term) { padding-bottom: 24px; }
  .pg .hero--tuck:has(.phs--term) > .strip { margin-bottom: 24px; }
  .pg .hero--tuck .strip--j-fan .strip__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pg .hero--tuck .strip--j-fan .strip__step { grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 1px; padding: 11px 16px; border-radius: 22px;
    --gl: var(--as, #f05d49);
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gl) 14%, transparent), transparent 62%), linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .55));
    border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 22px 40px -30px color-mix(in srgb, var(--gl) 60%, rgba(21, 17, 15, .4)); }
  .pg .hero--tuck .strip--j-fan .strip__step::after { display: none; }
  .pg .hero--tuck .strip--j-fan .strip__step i { grid-row: span 2; width: 46px; height: 46px; margin: 0; }
  .pg .hero--tuck .strip--j-fan .strip__step b { align-self: end; font-size: 15px; }
  .pg .hero--tuck .strip--j-fan .strip__step span { align-self: start; font-size: 12.5px; }
}

/* ===================== D-178 (owner, 31 Oct: "at section changes I sometimes see a proper break line; everything needs to be smooth. And not these blue / green shadows everywhere, some places are okay") =====================
   1. No rule between sections anywhere (glass pages and the home page's legacy sections).
   2. The alternate sections' warm band fades in and out over 96px instead of starting on a hard edge; the D-166 per-section
      blue / green / amber corner glows (cut off at the section edge) are gone.
   3. Colour orbs only behind group cards and the scroller cards, warm coral only; no blue ones.
   4. Card shadows are a soft neutral; each card keeps its colour as a faint tint in its top corner. */
.pg .ps + .ps, .pg .ps--group + .ps, .pg .ps + .ps--group, .pg .pg-close, .pg.pg--inline .ps:first-child { border-top: 0; }
.hg :is(.protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { border-top: 0; }
.pg .ps:nth-of-type(n) { background: none; }
.pg .ps:nth-of-type(even):not(.ps--plain-top) { background: linear-gradient(180deg, rgba(247, 242, 239, 0) 0, #f7f2ef 96px, #f8f4f1 calc(100% - 96px), rgba(248, 244, 241, 0) 100%); }
.pg .ps > .in::before, .pg .ps > .in::after { display: none; }
.pg .ps:is(.ps--group, :has(.tcards--scroll)) > .in::after { display: block; content: ""; position: absolute; z-index: -1; left: 6%; bottom: 4%; width: min(460px, 50vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(40px); background: radial-gradient(circle, rgba(240, 93, 73, .12), transparent 66%); }
.pg .glass:where(:not(.form, .is-hl)), .pg .tcards > li, .pg .gcard, .pg .ccols__col:not(.is-hl) {
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 22px 44px -32px rgba(21, 17, 15, .28);
}
.pg :is(.tcards > li, .gcard, .personas > li):hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .08), 0 28px 50px -30px rgba(21, 17, 15, .32); }
@media (min-width: 1101px) { .pg .reasons li { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 22px 44px -32px rgba(21, 17, 15, .28); } }
@media (min-width: 1280px) { .pg .hero--tuck .strip--j-fan .strip__step { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 18px 36px -28px rgba(21, 17, 15, .28); } }
.pg .glass:where(:not(.form, .is-hl)) { background: radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--gl, #f05d49) 9%, transparent), transparent 60%), linear-gradient(155deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .55)); }
/* the last two section rules (FAQ on the glass pages, the home page's testimonials) */
body .pg .pg-faq, body .hg :is(.protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { border-top-width: 0; border-top-style: none; }
/* D-178: the other pages' pale bands fade into the white page instead of starting on a hard edge */
.ab-section.ab-network { background: linear-gradient(180deg, #fff 0, #f5f5f5 110px, #f5f5f5 calc(100% - 110px), #fff 100%); }
#our-story { background: linear-gradient(180deg, #fff 0%, #fdeae7 60%, #fff 100%); }
.cs-section.cs-section--tint { background: linear-gradient(180deg, #fff 0, #fafafa 80px, #fafafa calc(100% - 80px), #fff 100%); }

/* ===================== D-179 (owner, 31 Oct: "the navigator on the left should be there so customers can quickly navigate") =====================
   The "On this page" rail (seo-sections.css, D-118) on the glass pages, as a frosted glass pill: dots under 1560px with the
   labels on hover / focus, labels at 1560px and up; phones and tablets keep the dropdown bar. */
.pg .pg-toc .ppx-toc__in { border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(155deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 22px 44px -28px rgba(21, 17, 15, .35); }
.pg .pg-toc a { color: var(--text-2); text-decoration: none; font-weight: 600; }
.pg .pg-toc a:hover { background: rgba(240, 93, 73, .08); color: var(--text); }
.pg .pg-toc a.is-active { background: linear-gradient(140deg, #f7836f, var(--coral)); color: #fff; box-shadow: 0 10px 20px -10px rgba(229, 83, 63, .8); }
@media (min-width: 1100px) { .pg .pg-toc .ppx-toc__in { border-radius: 22px; } .pg .pg-toc .ppx-toc__lbl { color: var(--text-3); } }
@media (max-width: 1099px) { .pg .pg-toc { margin-inline: -16px; } }
/* the shell clips without being a scroll box (overflow: hidden made it one): the phone "On this page" bar can stick, and
   the chapter links scroll the page, not the shell */
.pg__shell { overflow: clip; }

/* D-180 (owner, 31 Oct: "why is there a small point above each section? remove it from all sections throughout the
   website"): the decorative pulsing dot before every section / hero label is removed from the markup (glass-sections,
   x-product-hero, pi-landing/glass, PiGlass); this hides any left in cached or older markup */
.pg .label > .dot, .hg .label > .dot { display: none; }

/* D-181 (owner, 31 Oct: "remove the line above each section headline, the headline already says it; keep 'Why doctors
   choose CoverYou', remove 'Why CoverYou'"): no eyebrow above the home page's legacy section titles (OLD: "• CoverYou",
   "• Tools for doctors", "• Calculators", "• Partner insurers", "• Reviews" as h2::before, D-152) */
.hg :is(.doctor-trust-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) h2::before { content: none; display: none; }

/* D-198 (owner, 2 Nov, PI page: "reduce the spacing between sections, it creates a lot of negative space"): tighter
   section padding on every glass product page (one stylesheet). The gap between one section's last line and the next
   headline drops from about 155-300px to about 90-150px. OLD: .ps 76px (56px under 700px), .dark 84px, FAQ 64px,
   closing call to action 104px / 96px */
.pg .ps { padding-block: 44px; }
.pg .dark { padding-block: 56px; }
.pg .pg-faq .cy-faq { padding-block: 44px; }
.pg .pg-close { padding-block: 64px 56px; }
@media (max-width: 700px) { .pg .ps { padding-block: 36px; } .pg .pg-faq .cy-faq { padding-block: 36px; } }
/* D-198: the media section's photo sits level with the headline (OLD: centred against the tall text column, which left
   an empty block above it); on wide screens it stays in view while the text scrolls past */
.pg .ps--media .ps__grid { align-items: start; }
@media (min-width: 1001px) { .pg .ps--media .ps__grid > :last-child { position: sticky; top: 110px; } }

/* D-199 (owner, 2 Nov: "utilise the whole page properly; the padding of sections is not uniform throughout the page"):
   one content edge for every section of the glass product pages.
   - Wide screens (1600px+, where the "On this page" navigator opens to x 137): the content runs from x 160 to the same
     distance from the right edge, up to 1720px of content. OLD: a 1400px box, so a 1920 screen had about 180px unused each
     side. Below 1600 nothing changes.
   - The FAQ uses the same edge (OLD: its own 1200px box, so it started 44px further in).
   - Every section headline starts on the left edge (OLD: Practice setting, Features and How to buy were centred, the rest
     left). The closing call to action stays centred.
   - Headlines may run to 960px, so long ones wrap less (OLD: 820px; "Why professional indemnity insurance is essential for
     doctors in India" took four lines). */
@media (min-width: 1600px) { .pg .in { max-width: min(1832px, calc(100% - 208px)); } }
.pg .pg-faq .cy-faq__inner { max-width: 1288px; }
@media (min-width: 1600px) { .pg .pg-faq .cy-faq__inner { max-width: min(1720px, calc(100vw - 320px)); } }
.pg .ps .ps__head--center { margin-inline: 0; justify-items: start; text-align: left; }
.pg .ps__head { max-width: 960px; }

/* D-200 (owner, 2 Nov, PI hero "Notice arrives → Resolved" strip: "justify this properly"): the first step starts on the
   card's left edge and the last one ends on its right edge. The first three columns share the width and the last is as
   wide as its text, so the four icons stay evenly spaced and nothing is left empty after "Resolved". OLD: four equal
   columns, the last one half empty. Not Motor's road strip (its steps are centred on the road). :where() keeps this below the Term page's 2 x 2 steps (1280px+); phones keep one
   column. */
@media (min-width: 701px) {
  .pg :where(.strip:not(.strip--road)) > .strip__steps:where(:has(> li:nth-child(4):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

/* D-201 (owner, 2 Nov, PI "Why professional indemnity insurance is essential…": "remove this image, add an illustration
   and design this section properly"): the 'art' layout of partials/glass-sections. Headline and opening paragraph beside
   the two-doctors drawing; the claim situations as a numbered row of three glass cards across the full width; "Why
   hospital cover may not be enough" as a glass panel with the hospital drawing. OLD: a stock photo beside one long text
   column, the situations as staggered bubbles under it, and the right half empty below the photo. */
.pg .ps--feat .feat__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.pg .feat__art { position: relative; justify-self: center; width: 100%; max-width: 430px; margin: 0; }
.pg .feat__art::before { content: ""; position: absolute; inset: 8% 4% -2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 93, 73, .16), transparent); }
.pg .feat__art img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 100 / 86; }
.pg .feat__cases { margin-top: 40px; }
.pg .feat__label { margin-bottom: 16px; font-size: 15px; font-weight: 600; color: var(--text-body); }
.pg .feat__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pg .feat__list > li { position: relative; display: grid; align-content: start; gap: 14px; padding: 24px 24px 26px; border-radius: 26px; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.pg .feat__list > li:nth-child(3n+1) { --ac: var(--c-coral); --at: var(--c-coral-t); --ab: var(--c-coral-b); }
.pg .feat__list > li:nth-child(3n+2) { --ac: var(--c-blue); --at: var(--c-blue-t); --ab: var(--c-blue-b); }
.pg .feat__list > li:nth-child(3n) { --ac: var(--c-green); --at: var(--c-green-t); --ab: var(--c-green-b); }
.pg .feat__list i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ab); font-size: 23px; font-style: normal; }
.pg .feat__n { position: absolute; top: 14px; right: 20px; font: 700 46px/1 var(--font-display); letter-spacing: -.04em; color: var(--ac); opacity: .16; }
.pg .feat__aside { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 22px; padding: 26px 36px; border-radius: 28px; }
.pg .feat__aside figure { margin: 0; }
.pg .feat__aside img { display: block; width: 100%; height: auto; aspect-ratio: 118 / 90; }
.pg .feat__aside .ps__body > h3 { margin: 0 0 8px; }
@media (max-width: 1000px) {
  .pg .ps--feat .feat__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pg .feat__art { max-width: 320px; }
}
@media (max-width: 700px) {
  .pg .feat__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pg .feat__list > li { grid-template-columns: 50px minmax(0, 1fr); align-items: center; padding: 18px 20px; }
  .pg .feat__aside { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; }
  .pg .feat__aside figure { max-width: 160px; }
}
.pg .feat__aside .ps__body { gap: 8px; }
@media (max-width: 700px) { .pg .feat__art { max-width: 230px; } }
@media (max-width: 700px) { .pg .feat__list > li { padding-right: 56px; } }

/* D-202 (owner, 2 Nov: "adjust the design according to their respective sections, it is not proper"; PI first, then the
   other product pages). Section by section on the glass product pages:
   - Illustrated sections: the headline (and any opening paragraph, now under it) on the left edge, the drawing on the
     right and a little larger. OLD: every other drawing on the left (D-167), pushing the headline to x 448 and leaving the
     right half of the row empty; the opening paragraph sat alone under that row.
   - Covered / not covered: the drawing beside the headline and the two cards across the full width (the blade sends a
     section with two titled lists to this layout). OLD: the drawing beside the cards, with empty space above and below.
   - "CoverYou at a glance": the label beside the four circles, which are joined by a dashed line. OLD: the label above
     four circles floating far apart across the full width. */
@media (min-width: 1001px) { .pg .ps--art:not(.ps--side) .ps__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 56px; } }
.pg .ps__lede { display: grid; gap: 18px; min-width: 0; }
.pg .ps__lede .ps__intro { padding-left: 0; border-left: 0; }
.pg .ps__lede .ps__intro p { max-width: 78ch; }
.pg .ps--art:not(.ps--side) .ps__art { width: clamp(220px, 19vw, 320px); }
.pg .ps--art:not(.ps--side) .ps__art img { max-height: 230px; }
@media (min-width: 1001px) {
  .pg .ps--flip .ps__side { grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 340px); }
  .pg .ps--flip .ps__side > .ps__art, .pg .ps--flip .ps__top > .ps__art { order: 0; }
  .pg .ps--flip .ps__top { grid-template-columns: minmax(0, 1fr) auto; }
  .pg .ps__body:has(> h3 + .band) { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 48px; align-items: center; }
  .pg .ps__body:has(> h3 + .band) > * { grid-column: 1 / -1; }
  .pg .ps__body:has(> h3 + .band) > h3:has(+ .band) { grid-column: 1; margin: 0; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; }
  .pg .ps__body:has(> h3 + .band) > h3 + .band { grid-column: 2; }
  .pg .ps__body > h3 + .band { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; justify-content: stretch; gap: 16px; }
  .pg .ps__body > h3 + .band::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; border-top: 2px dashed rgba(240, 93, 73, .3); }
  .pg .ps__body > h3 + .band > li { position: relative; width: min(100%, 210px); background: radial-gradient(circle at 30% 20%, #fff, #fbf2ef); }
}
/* D-202: sum insured tiers - each tier's "typically suited for" text and pill sit inside its own card, under the amount,
   and the three cards rise like steps (OLD: the text floated above three bars of 110 / 160 / 210px, leaving an empty
   block above the first two). Phones keep the stacked layout (max-width 700 rules). */
@media (min-width: 701px) {
  .pg .ladder { gap: 16px; }
  .pg .ladder > li { align-content: space-between; gap: 22px; padding: 24px 26px 26px; border-radius: 28px 28px 10px 10px; }
  .pg .ladder > li:nth-child(1) { min-height: 250px; background: linear-gradient(180deg, #fff3ef, #fddcd3); }
  .pg .ladder > li:nth-child(2) { min-height: 300px; background: linear-gradient(180deg, #fcc7bb, #f8a08e); }
  .pg .ladder > li:nth-child(3) { min-height: 350px; background: linear-gradient(180deg, #f7836f, var(--coral) 60%, #e5533f); box-shadow: 0 30px 50px -26px rgba(229, 83, 63, .9); }
  .pg .ladder .ladder__bar { order: -1; height: auto !important; padding: 0; overflow: visible; background: none !important; box-shadow: none !important; }
  .pg .ladder > li:nth-child(3) :is(.ladder__bar, .ladder__txt p, .ladder__txt .label) { color: #fff; }
  .pg .ladder > li:nth-child(3) .ladder__pill { color: var(--text); }
}

/* D-203 (owner, 2 Nov: "the icon pointers are not uniform: one has a solid / gradient colour and the others are
   translucent; fix these throughout the website"): every icon in a set uses the same tinted style, each in its own colour
   from the rotation. OLD solid odd-ones-out: the hero strip's last step (green), How to buy's last number (green), the
   "What's covered" tick (green gradient), and in PiGlass the last persona card's icon and the first "why" reason's icon
   (now no longer marked solid). Single icons (the mid-page call to action, the "One policy" centre), active tabs and the
   claims timeline (all four solid alike) are unchanged. */
.pg .strip__step:last-child i { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ab); }
.pg .journey li:last-child .journey__n { background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 2px var(--ab); }
.pg .cover2 > div:not(.no) h3 .medal { background: var(--c-green-t); color: var(--c-green); box-shadow: inset 0 0 0 1.5px var(--c-green-b); }

/* D-204 (owner, 2 Nov, PI hero: "increase the size from the bottom of the legal notice floater, the COVERED line is not
   properly set"): more room under the tilted COVERED stamp, so it sits inside the card. OLD: 14px bottom padding, the
   stamp's lower corner touching the card's edge. */
.pg .notice { padding-bottom: 26px; }
.pg .notice .stamp { margin: 2px 0 0 4px; }
/* D-204: with the strip now under the copy (1280px+), the legal notice sits a little higher so it never touches the
   strip's top corner. OLD: top 38-50% of the card column */
@media (min-width: 1280px) { .pg .hero--tuck .notice { top: 36%; } }  /* D-206 (owner: "shift the legal notice down a bit, it is too close to the line above"): OLD 28% */

/* D-205 (owner, 2 Nov: "why is the header like this; the nav menu should be the header and it had a transparent style,
   why is the nav menu outside it"): no full-width band behind the floating nav once the page scrolls - the header is the
   frosted nav pill only (header.css: .cy-hdr__bar, white 72% with blur), and the page shows around it.
   OLD (D-146 / home): header.cy-hdr.is-scrolled took a 94% page-colour band with blur across the full width. */
body:has(.pg) header.cy-hdr.is-scrolled, body:has(.hg) header.cy-hdr.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* D-207 (owner, 2 Nov, covered / not covered: "every icon should be translucent; in this set it can have a gradient - the
   tick green and red for wrong"): the two header icons keep the translucent style with a soft gradient in their own
   colour, the tick green and the cross red (OLD, D-203: flat green tint / flat red tint) */
.pg .cover2 > div:not(.no) h3 .medal { background: linear-gradient(140deg, rgba(228, 250, 238, .9), rgba(64, 232, 137, .32)); color: var(--c-green); box-shadow: inset 0 0 0 1.5px var(--c-green-b), 0 14px 28px -18px rgba(12, 167, 80, .55); }
.pg .cover2 .no h3 .medal { background: linear-gradient(140deg, rgba(255, 236, 228, .9), rgba(254, 51, 17, .2)); color: var(--c-red); box-shadow: inset 0 0 0 1.5px var(--c-red-b), 0 14px 28px -18px rgba(254, 51, 17, .45); }
/* D-207 (owner: "every icon style should be translucent"): the last solid icons go translucent too - the practice-setting
   centre, the "One policy" centre, the mid-page call-to-action icon and the numbered claim steps (tinted in their own
   colour; on the dark claims band a see-through tint with a light numeral). OLD: solid coral / gradient fills. */
.pg .quad__core, .pg .hub__core .medal, .pg .midcta .medal { background: linear-gradient(140deg, rgba(255, 241, 237, .95), rgba(240, 93, 73, .22)) !important; color: var(--coral) !important; }
.pg .quad__core { box-shadow: 0 0 0 10px var(--surface), 0 0 0 11.5px rgba(240, 93, 73, .2), inset 0 0 0 1.5px #f6c1b6, 0 18px 34px -20px rgba(229, 83, 63, .7) !important; }
.pg .hub__core .medal, .pg .midcta .medal { box-shadow: inset 0 0 0 1.5px #f6c1b6, 0 14px 28px -18px rgba(229, 83, 63, .6) !important; }
.pg .track__n { background: var(--at, var(--tint)); color: var(--ac, var(--coral)); box-shadow: inset 0 0 0 2px var(--ab, #f6c1b6); }
.pg .dark .track__n { background: linear-gradient(140deg, color-mix(in srgb, var(--as) 34%, transparent), color-mix(in srgb, var(--as) 12%, transparent)); color: var(--ab); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--as) 70%, transparent), 0 0 0 8px rgba(255, 255, 255, .04); }

/* D-209 (owner, 2 Nov: "increase spacing between each section, it feels way too congested"): section padding between the
   D-198 tight values and the original ones. OLD (D-198): .ps 44px (36px under 700px), .dark 56px, FAQ 44px (36px), closing
   call to action 64px / 56px. Original (before D-198): 76 / 84 / 64 / 104-96. */
.pg .ps { padding-block: 60px; }
.pg .dark { padding-block: 68px; }
.pg .pg-faq .cy-faq { padding-block: 60px; }
.pg .pg-close { padding-block: 84px 76px; }
@media (max-width: 700px) { .pg .ps { padding-block: 44px; } .pg .pg-faq .cy-faq { padding-block: 44px; } }

/* D-210 (owner, 2 Nov, PI "Why professional indemnity insurance is essential…": "move the illustration to the left and the
   content to the right"): on wide screens the two-doctors drawing leads on the left, the headline and paragraph follow on
   the right. Phones keep the headline first. OLD (D-201): text left (7fr), drawing right (5fr). */
@media (min-width: 1001px) {
  .pg .ps--feat .feat__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pg .ps--feat .feat__art { order: -1; }
}

/* D-211 (owner, 2 Nov: "make a small banner of this line"): the line above the claim situations is a slim glass banner -
   a coral-tinted warning icon, the lead in bold, and the "illustrative patterns, not actual cases" caveat as a quieter note
   after a divider. OLD (D-201): a plain bold line ending in a colon. */
.pg .feat__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 18px; padding: 7px 18px 7px 7px; border-radius: 999px; background: linear-gradient(100deg, rgba(255, 241, 237, .95), rgba(255, 255, 255, .7)); box-shadow: inset 0 0 0 1px #f6c9bf, 0 12px 26px -20px rgba(229, 83, 63, .55); font-size: 14.5px; }
.pg .feat__label i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, rgba(255, 241, 237, .95), rgba(240, 93, 73, .22)); color: var(--coral); box-shadow: inset 0 0 0 1.5px #f6c1b6; font-size: 16px; font-style: normal; }
.pg .feat__label b { font-weight: 650; color: var(--text); }
.pg .feat__label small { position: relative; padding-left: 13px; font-size: 12.5px; color: var(--text-3); }
.pg .feat__label small::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: #f0c7bd; }
@media (max-width: 700px) {
  .pg .feat__label { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 2px 12px; border-radius: 20px; padding: 10px 14px 10px 10px; text-align: left; }
  .pg .feat__label i { grid-row: span 2; }
  .pg .feat__label small { padding-left: 0; }
  .pg .feat__label small::before { display: none; }
}

/* D-212 (owner, 3 Nov: the PI page "section by section"; "quick answers can be like one section of 4 cards"):
   - Quick answer: four equal glass cards, each with a translucent icon in its own colour, the label and the answer.
     OLD (D-?): one wide "in short" card above three small ones.
   - "CoverYou at a glance" is its own section: the headline beside the four stat circles joined by a dashed line (as the
     D-202 h3 + circles row). */
.pg .qa4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; }
.pg .qa4__item { display: grid; align-content: start; gap: 12px; padding: 26px 24px 28px; border-radius: 26px; }
.pg .qa4__item:nth-child(4n+1) { --ac: var(--c-coral); --at: var(--c-coral-t); --ab: var(--c-coral-b); }
.pg .qa4__item:nth-child(4n+2) { --ac: var(--c-blue); --at: var(--c-blue-t); --ab: var(--c-blue-b); }
.pg .qa4__item:nth-child(4n+3) { --ac: var(--c-green); --at: var(--c-green-t); --ab: var(--c-green-b); }
.pg .qa4__item:nth-child(4n+4) { --ac: var(--c-amber); --at: var(--c-amber-t); --ab: var(--c-amber-b); }
.pg .qa4__item i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--at); color: var(--ac); box-shadow: inset 0 0 0 1.5px var(--ab); font-size: 23px; font-style: normal; }
.pg .qa4__item dt { margin: 4px 0 0; color: var(--ac); }
.pg .qa4__item dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-body); }
@media (max-width: 1100px) { .pg .qa4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pg .qa4 { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pg .qa4__item { padding: 20px; } }
@media (min-width: 1001px) {
  .pg .ps:has(> .in > .ps__body > .band:only-child) > .in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; column-gap: 48px; }
  .pg .ps:has(> .in > .ps__body > .band:only-child) .ps__head { margin: 0; }
  .pg .ps__body > .band:only-child { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; justify-content: stretch; gap: 16px; }
  .pg .ps__body > .band:only-child::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; border-top: 2px dashed rgba(240, 93, 73, .3); }
  .pg .ps__body > .band:only-child > li { position: relative; width: min(100%, 210px); background: radial-gradient(circle at 30% 20%, #fff, #fbf2ef); }
}
/* D-212: the claims process now sits on the light ground (the walkthrough keeps the dark band): its step text in the page's
   body colours. OLD: light text meant for the dark band */
.pg .ps .track li { color: var(--text-body); }
.pg .ps .track li b { color: var(--text); }
/* D-212: key terms as one glass glossary panel - each term beside its meaning, ruled rows in two columns (OLD: a grid of
   plain white boxes, the last one alone on its row) */
.pg .terms { gap: 0 56px; padding: 8px 34px 18px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 247, 244, .7)); box-shadow: inset 0 0 0 1px var(--glass-border), 0 24px 48px -36px rgba(92, 23, 14, .35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pg .terms div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 4px 22px; align-items: baseline; padding: 18px 0 16px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid rgba(240, 93, 73, .14); }
.pg .terms dt { position: relative; margin: 0; padding-left: 16px; font-size: 15px; font-weight: 700; color: var(--text); }
.pg .terms dt::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(240, 93, 73, .16); }
@media (max-width: 700px) { .pg .terms { padding: 4px 20px 12px; } .pg .terms div { grid-template-columns: minmax(0, 1fr); } }
/* D-212: a lead-in and its list as one glass card; on wide screens the paragraph after it (Eligibility: final eligibility
   and typical documents) is a second card beside it */
.pg .leadlist { display: grid; gap: 14px; padding: 24px 26px; border-radius: 26px; }
.pg .leadlist__lead { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--text); }
.pg .ps__body > .leadlist + p { margin: 0; padding: 24px 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(239, 244, 255, .7)); box-shadow: inset 0 0 0 1px var(--glass-border); font-size: 15px; line-height: 1.7; color: var(--text-body); }
@media (min-width: 1001px) { .pg .ps__body:has(> .leadlist + p) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }

/* D-213 (owner, 3 Nov, covered / not covered: "for the correct part do green shading in the card and for wrong do red,
   instead of both coral"): the card's corner glow and drop shadow take the card's own colour - green for what is
   covered, red for what is not. OLD: the default coral glow on both cards. */
.pg .cover2 > div:not(.no) { --gl: #0ca750; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--c-green-b), 0 26px 50px -30px rgba(12, 167, 80, .45); }
.pg .cover2 > .no { --gl: #fe3311; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--c-red-b), 0 26px 50px -30px rgba(254, 51, 17, .38); }
/* D-213: a clearer wash in each card's own colour (the site's glass glow is 9%; these two read as good / bad at a glance) */
.pg .cover2 > div.glass { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gl) 16%, transparent), transparent 62%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--gl) 6%, transparent), transparent 70%), linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); }

/* ===================== D-215 (owner, 4 Nov: "check the homepage and fix the issues I gave you for the PI page") =====================
   The home page's older sections (shared partials: trust, fraud alert, tools, calculators, partners, reviews, closing banner)
   in the PI page's layout. Scoped to .hg, so the same partials on other pages are unchanged. */
/* one content edge (D-199): the same box as .pg .in - 1400px under 1600px wide, then up to 104px from each side.
   OLD: a 1140px .compare-container (x 390-1530 at 1920, where the glass sections run 160-1760) */
.homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section, .doctor-ecosystem-cta) > .compare-container {
  width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); box-sizing: border-box; }
@media (min-width: 1600px) {
  .homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section, .doctor-ecosystem-cta) > .compare-container { max-width: min(1832px, calc(100% - 208px)); }
}
.homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section, .doctor-ecosystem-cta) { padding-left: 0 !important; padding-right: 0 !important; }
/* the same section padding as the glass sections (D-209): 60px, 44px on phones. OLD: 64px */
.homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { padding-top: 60px !important; padding-bottom: 60px !important; }
@media (max-width: 700px) {
  .homepage-figma-bg.hg :is(.doctor-trust-section, .fraud-alert-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) { padding-top: 44px !important; padding-bottom: 44px !important; }
}
/* headings as on PI (D-199): on the left edge, the glass size; the text under the heading beside it behind a coral rule
   (the .ps--intro row, D-145). OLD: centred, 46px, the text centred under it */
.hg :is(.trust-heading, .compare-heading) { max-width: none !important; margin: 0 0 34px !important; padding: 0 !important; text-align: left !important; }
.hg :is(.doctor-trust-section, .protection-decisions-section, .doctor-calculators-section, .insurance-partners-section, .voices-trust-section) :is(.trust-heading, .compare-heading) > h2 {
  max-width: 960px; margin: 0 !important; font-size: clamp(30px, 3.6vw, 48px) !important; line-height: 1.02 !important; text-align: left !important; }
.hg .sec-intro { display: grid; gap: 12px; justify-items: start; margin-top: 16px; padding-left: 18px; border-left: 2px solid rgba(240, 93, 73, .25); }
.hg .sec-intro p { max-width: 64ch !important; margin: 0 !important; text-align: left !important; font-size: 15px !important; line-height: 1.7 !important; color: #3f3833; }
.hg .sec-intro p:first-child { font-size: 16px !important; color: #15110f; }
.hg .sec-intro p.voices-rating { width: auto; margin: 4px 0 0 !important; font-size: 15px !important; }
@media (min-width: 1001px) {
  .hg :is(.trust-heading, .compare-heading):has(> .sec-intro) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; }
  .hg :is(.trust-heading, .compare-heading) > .sec-intro { margin-top: 0; padding-left: 28px; }
}
/* tools: the "Decode your policy" icon in the same tinted box as the checklist icon beside it (D-203 / D-207: no solid
   odd-one-out). OLD: a solid coral square. Site-wide, wherever the tools section shows. */
.protection-icon-box-primary { background: #fdeae7; box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .22); }
/* the "On this page" rail (D-214) in its glass pill, as on the glass pages */
.hg .pg-toc .ppx-toc__in { border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(155deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .05), 0 22px 44px -28px rgba(21, 17, 15, .35); }
.hg .pg-toc a { color: #5e5651; text-decoration: none; font-weight: 600; }
.hg .pg-toc a:hover { background: rgba(240, 93, 73, .08); color: #15110f; }
.hg .pg-toc a.is-active { background: linear-gradient(140deg, #f7836f, #f05d49); color: #fff; box-shadow: 0 10px 20px -10px rgba(229, 83, 63, .8); }
@media (min-width: 1100px) { .hg .pg-toc .ppx-toc__in { border-radius: 22px; } .hg .pg-toc .ppx-toc__lbl { color: #766d68; } }
.hg .hg-anchor { display: block; height: 0; scroll-margin-top: 96px; }
/* D-215: the blocks inside those sections use the full edge too. OLD: each capped at 1140px and centred */
.hg :is(.trust-content, .calc-columns, .voices-trust-grid, .ecosystem-cta-card) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
.hg .voices-trust-toolbar { justify-content: space-between; }
.hg .voices-trust-filters { max-width: none; justify-content: flex-start; margin-left: 0; }
@media (min-width: 1001px) {
  .hg .protection-cards { justify-content: stretch; }
  .hg .protection-cards > .protection-card { flex: 1 1 0; max-width: none; width: auto; }
  .hg .calc-columns { justify-content: stretch; gap: 20px; }
  .hg .calc-columns > .calc-column { flex: 1 1 0; max-width: none; width: auto; }
  .hg .trust-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: center; align-items: center; gap: 48px; }
}
.hg .calc-column .calc-card { width: 100%; box-sizing: border-box; }
.hg .voices-trust-section .voices-disclaimer { text-align: left; }
@media (min-width: 1200px) {
  .hg .voices-trust-grid { grid-template-columns: minmax(0, 1.62fr) repeat(3, minmax(0, 1fr)); }
  .hg .voices-trust-bottom-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* the decode shield is drawn pale (#fdeae7) with a coral tick, so on the plain tint its outline vanished: both tools icons sit
   on a slightly deeper see-through coral, which keeps the pale shield readable */
.protection-icon-box-primary, .protection-icon-box-light { background: linear-gradient(140deg, rgba(240, 93, 73, .2), rgba(240, 93, 73, .08)); box-shadow: inset 0 0 0 1px rgba(240, 93, 73, .24); }
.protection-icon-box-primary .cy-icon { width: 34px; height: 34px; color: #e5533f; stroke-width: 1.6; }
/* the rail is a direct child of the home ground, whose children are all position: relative (D-152); give it back its own
   positioning: fixed at the left on desktop, a sticky bar on phones and tablets (seo-sections.css D-117 / D-118) */
.homepage-figma-bg.hg > .ppx-toc { position: sticky; z-index: 40; }
@media (min-width: 1100px) { .homepage-figma-bg.hg > .ppx-toc { position: fixed; z-index: 45; } }
/* D-217 (owner, 4 Nov: "remove the checked boxes from the background of the hero section, keep the shading"): no grid behind the
   home hero; the coral glow top right stays. OLD (D-152): a 60px grid fading out down the first 980px */
.homepage-figma-bg.hg::before { display: none; }

/* ===================== D-220 (owner, 4 Nov: "every section is left aligned … looks like a book; some can be centre aligned,
   some from the right"; chose the proposed rhythm) =====================
   Home page, top to bottom: Why doctors choose CENTRE · Partners RIGHT · What is CoverYou LEFT · fraud card · Tools CENTRE ·
   Calculators RIGHT · Reviews CENTRE · Knowledge LEFT · Claims RIGHT · Trust & compliance CENTRE · FAQ and banner as before.
   RIGHT mirrors the D-145 intro row: the heading on the right edge, its text to the left of it behind the coral rule, both
   set to the right. Phones (under 1001px) keep the heading-then-text stack; centred sections stay centred there too.
   OLD (D-199 / D-215): every section heading on the left edge. */

/* --- CENTRE: older sections (trust, tools, reviews) --- */
.homepage-figma-bg.hg :is(.doctor-trust-section, .protection-decisions-section, .voices-trust-section) :is(.trust-heading, .compare-heading) {
  display: block !important; max-width: 900px !important; margin: 0 auto 38px !important; text-align: center !important; }
.homepage-figma-bg.hg :is(.doctor-trust-section, .protection-decisions-section, .voices-trust-section) :is(.trust-heading, .compare-heading) > h2 { margin-inline: auto !important; text-align: center !important; }
.homepage-figma-bg.hg :is(.doctor-trust-section, .protection-decisions-section, .voices-trust-section) .sec-intro {
  justify-items: center; max-width: 760px; margin: 18px auto 0 !important; padding: 0 !important; border: 0 !important; }
.homepage-figma-bg.hg :is(.doctor-trust-section, .protection-decisions-section, .voices-trust-section) .sec-intro::before {
  content: ""; width: 48px; height: 3px; margin-bottom: 4px; border-radius: 3px; background: linear-gradient(90deg, #f7836f, #f05d49); }
.homepage-figma-bg.hg :is(.doctor-trust-section, .protection-decisions-section, .voices-trust-section) .sec-intro p { margin-inline: auto !important; text-align: center !important; }
/* reviews: the filters centred under the heading, "View all" after them; the disclaimer centred */
.homepage-figma-bg.hg .voices-trust-toolbar { justify-content: center; flex-wrap: wrap; }
.homepage-figma-bg.hg .voices-trust-filters { justify-content: center; }
.homepage-figma-bg.hg .voices-trust-section .voices-disclaimer { text-align: center; }

/* --- RIGHT: glass "Trust, compliance and security" (D-222; OLD D-220: centred): heading on the right edge with the coral
   bar under it; the three points as a block against the right edge --- */
.hg #trust .ps__head { max-width: 900px; margin-left: auto; margin-right: 0; justify-items: end; text-align: right; }
.hg #trust .ps__head::after { content: ""; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f7836f, #f05d49); }
.hg #trust .lst { width: fit-content; max-width: 100%; margin-left: auto; margin-right: 0; }

@media (min-width: 1001px) {
  /* --- RIGHT: older sections (partners, calculators) --- */
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .compare-heading:has(> .sec-intro) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .compare-heading > h2 { grid-column: 2; grid-row: 1; justify-self: end; text-align: right !important; }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .compare-heading > .sec-intro {
    grid-column: 1; grid-row: 1; justify-items: end; padding: 0 28px 0 0; border-left: 0; border-right: 2px solid rgba(240, 93, 73, .25); }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .sec-intro p { text-align: right !important; }
  /* --- RIGHT: glass "Doctor knowledge centre" (D-222; OLD D-220: Claims) --- */
  .hg #knowledge .ps__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hg #knowledge .ps__top > .ps__head { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
  .hg #knowledge .ps__top > .ps__intro { grid-column: 1; grid-row: 1; justify-items: end; padding: 0 28px 0 0; border-left: 0; border-right: 2px solid rgba(240, 93, 73, .25); text-align: right; }
}

/* D-221 (owner, 4 Nov, "Why doctors choose CoverYou": "why is this section's para not utilised properly, it should be evenly
   distributed"): a wider measure and justified lines, so both edges run straight; the last line of each paragraph stays
   centred. OLD (D-220): 760px, centred ragged lines. */
.homepage-figma-bg.hg .doctor-trust-section :is(.trust-heading) { max-width: 1040px !important; }
.homepage-figma-bg.hg .doctor-trust-section .sec-intro { max-width: 980px; }
.homepage-figma-bg.hg .doctor-trust-section .sec-intro p { max-width: none !important; text-align: justify !important; text-align-last: center; hyphens: auto; }

/* D-221 (owner, 4 Nov, Our Insurance Partners: "this section does not look good, fix this"): one glass panel. The heading,
   the partner paragraph and the verify link on the left; the logo strip on the right, fading out at both ends so no logo is
   cut on a hard edge. Phones: heading and text, then the strip, inside the same panel.
   OLD (D-220): text set to the right beside a right-hand heading, the strip below across the full width with hard edges. */
.homepage-figma-bg.hg .insurance-partners-section > .compare-container { position: relative; }
.homepage-figma-bg.hg .insurance-partners-section > .compare-container::before {
  content: ""; position: absolute; z-index: 0; inset: 0 clamp(20px, 4vw, 56px); border-radius: 32px; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(240, 93, 73, .08), transparent 60%), linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(21, 17, 15, .06), 0 30px 60px -40px rgba(92, 23, 14, .35);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.homepage-figma-bg.hg .insurance-partners-section > .compare-container > * { position: relative; z-index: 1; }
.homepage-figma-bg.hg .insurance-partners-section .compare-heading { display: block !important; margin: 0 !important; padding: 36px 28px 8px !important; text-align: left !important; }
.homepage-figma-bg.hg .insurance-partners-section .compare-heading > h2 { text-align: left !important; justify-self: auto; }
.homepage-figma-bg.hg .insurance-partners-section .compare-heading > .sec-intro { margin-top: 16px !important; padding: 0 0 0 18px !important; border-right: 0 !important; border-left: 2px solid rgba(240, 93, 73, .25) !important; justify-items: start; }
.homepage-figma-bg.hg .insurance-partners-section .sec-intro p { text-align: left !important; }
.homepage-figma-bg.hg .insurance-partners-section .cy-logos {
  margin: 0 12px 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
@media (min-width: 1001px) {
  .homepage-figma-bg.hg .insurance-partners-section > .compare-container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 0 32px; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading { padding: 52px 0 52px 52px !important; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading > .sec-intro { padding-left: 24px !important; }
  .homepage-figma-bg.hg .insurance-partners-section .cy-logos { margin: 0 24px 0 0; }
}

/* ===================== D-222 (owner, 4 Nov: "all the left aligned sections look bad; we just need to keep right and centre
   aligned") =====================
   Home rhythm, no left-aligned section: Why doctors choose CENTRE · Partners RIGHT (panel) · What is CoverYou CENTRE ·
   fraud card · Tools CENTRE · Calculators RIGHT · Reviews CENTRE · Knowledge RIGHT · Claims CENTRE · Trust RIGHT · FAQ CENTRE.
   OLD (D-220): What is CoverYou, Knowledge and the FAQ left; Claims right; Trust centre. Phones (under 1001px): every
   section heading and its text centred. */

/* --- CENTRE: glass sections with an intro row (What is CoverYou, Claims): heading, coral bar, then the text, all centred;
   paragraphs justified with a centred last line (as D-221) --- */
.hg :is(#what-is-coveryou, #claims) .ps__top { display: grid; grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: 18px; max-width: 1040px; margin-inline: auto; text-align: center; }
.hg :is(#what-is-coveryou, #claims) .ps__top > .ps__head { justify-items: center; text-align: center; margin: 0; max-width: none; }
.hg :is(#what-is-coveryou, #claims) .ps__top > .ps__head::after { content: ""; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f7836f, #f05d49); }
.hg :is(#what-is-coveryou, #claims) .ps__top > .ps__intro { justify-items: center; padding: 0 !important; border: 0 !important; }
.hg :is(#what-is-coveryou, #claims) .ps__intro p { max-width: 980px !important; text-align: justify; text-align-last: center; hyphens: auto; }

/* --- RIGHT: the partners panel mirrored - the logo strip on the left, the heading and text on the right, set to the right
   behind a coral rule on their right side --- */
@media (min-width: 1001px) {
  .homepage-figma-bg.hg .insurance-partners-section > .compare-container { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .homepage-figma-bg.hg .insurance-partners-section .cy-logos { grid-column: 1; grid-row: 1; margin: 0 0 0 24px; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading { grid-column: 2; grid-row: 1; padding: 52px 52px 52px 0 !important; text-align: right !important; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading > h2 { text-align: right !important; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading > .sec-intro { justify-items: end; padding: 0 24px 0 0 !important; border-left: 0 !important; border-right: 2px solid rgba(240, 93, 73, .25) !important; }
  .homepage-figma-bg.hg .insurance-partners-section .sec-intro p { text-align: right !important; }
}

/* --- CENTRE: the FAQ - heading, tabs and search centred above the questions (OLD: heading, tabs and search in a left column
   beside the questions) --- */
.hg .pg-faq .cy-faq__inner { display: block !important; }
.hg .pg-faq .pp-head { justify-content: center; text-align: center; margin-inline: auto; }
.hg .pg-faq .pp-head .pp-h2 { text-align: center; }
.hg .pg-faq .cy-faq__bar { flex-direction: column; align-items: center; max-width: 820px; margin: 18px auto 28px; }
.hg .pg-faq .cy-faq__tabs { justify-content: center; }
.hg .pg-faq .cy-faq__search { width: min(520px, 100%); }
.hg .pg-faq .cy-faq__panel { max-width: 960px; margin-inline: auto; }

/* --- phones and tablets: every section centred (the right-hand layouts are a desktop arrangement) --- */
@media (max-width: 1000px) {
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .compare-heading { text-align: center !important; }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .compare-heading > h2 { text-align: center !important; margin-inline: auto !important; }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .sec-intro { justify-items: center; padding: 0 !important; border: 0 !important; }
  .homepage-figma-bg.hg :is(.insurance-partners-section, .doctor-calculators-section) .sec-intro p { text-align: center !important; }
  .hg :is(#knowledge, #trust) .ps__head { justify-items: center; text-align: center; margin-inline: auto; }
  .hg #knowledge .ps__intro { justify-items: center; padding: 0 !important; border: 0 !important; text-align: center; }
  .hg #trust .lst { margin-inline: auto; }
}
@media (min-width: 1001px) {
  /* right-hand rows: the heading takes its natural width (one line where it fits), the text fills the rest, centred on each other */
  .hg #knowledge .ps__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .homepage-figma-bg.hg .doctor-calculators-section .compare-heading:has(> .sec-intro) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  /* Trust: the three points as a block against the right edge, at most 1000px wide (OLD: the full width under a right heading) */
  .hg #trust .lst { max-width: 1000px; }
}
/* FAQ heading: the head box was a fixed column width, so it sat left of centre */
.hg .pg-faq .pp-head { width: auto !important; max-width: none !important; display: flex; justify-content: center; }
@media (min-width: 1001px) {
  /* the calculators heading is long: it keeps two lines in a 620px column so its text column stays wide */
  .homepage-figma-bg.hg .doctor-calculators-section .compare-heading:has(> .sec-intro) { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
}
.hg .pg-faq .pp-head > .pp-h2 { margin-inline: auto !important; }

/* ===================== D-223 (owner, 4 Nov: "I told wrong, I don't want right aligned, I wanted left, change that") =====================
   Home: centre and LEFT only. The D-222 right-hand sections are now left: Partners (panel: heading and text left, logos
   right), Calculators, Knowledge (heading left, text beside it behind the coral rule, the D-145 row) and Trust (heading
   left, coral bar under it, points below). Rhythm: Why CENTRE · Partners LEFT · What is CENTRE · fraud card · Tools CENTRE ·
   Calculators LEFT · Reviews CENTRE · Knowledge LEFT · Claims CENTRE · Trust LEFT · FAQ CENTRE. Phones: centred sections
   stay centred, left sections stay left. OLD (D-222): those four set to the right. */
/* partners panel */
.homepage-figma-bg.hg .insurance-partners-section .compare-heading { text-align: left !important; }
.homepage-figma-bg.hg .insurance-partners-section .compare-heading > h2 { text-align: left !important; margin-inline: 0 !important; }
.homepage-figma-bg.hg .insurance-partners-section .compare-heading > .sec-intro { justify-items: start; padding: 0 0 0 18px !important; border-right: 0 !important; border-left: 2px solid rgba(240, 93, 73, .25) !important; }
.homepage-figma-bg.hg .insurance-partners-section .sec-intro p { text-align: left !important; }
/* calculators */
.homepage-figma-bg.hg .doctor-calculators-section .compare-heading { text-align: left !important; }
.homepage-figma-bg.hg .doctor-calculators-section .compare-heading > h2 { text-align: left !important; margin-inline: 0 !important; }
.homepage-figma-bg.hg .doctor-calculators-section .compare-heading > .sec-intro { justify-items: start; padding: 0 0 0 18px !important; border-right: 0 !important; border-left: 2px solid rgba(240, 93, 73, .25) !important; }
.homepage-figma-bg.hg .doctor-calculators-section .sec-intro p { text-align: left !important; }
/* knowledge */
.hg #knowledge .ps__head { justify-items: start; text-align: left; margin-inline: 0; }
.hg #knowledge .ps__intro { justify-items: start; text-align: left; padding: 0 0 0 18px !important; border-right: 0 !important; border-left: 2px solid rgba(240, 93, 73, .25) !important; }
/* trust */
.hg #trust .ps__head { justify-items: start; text-align: left; margin-left: 0; margin-right: auto; }
.hg #trust .lst { margin-left: 0 !important; margin-right: auto !important; }
@media (min-width: 1001px) {
  .homepage-figma-bg.hg .insurance-partners-section > .compare-container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading { grid-column: 1; grid-row: 1; padding: 52px 0 52px 52px !important; }
  .homepage-figma-bg.hg .insurance-partners-section .cy-logos { grid-column: 2; grid-row: 1; margin: 0 24px 0 0; }
  .homepage-figma-bg.hg .insurance-partners-section .compare-heading > .sec-intro { padding-left: 24px !important; }
  .homepage-figma-bg.hg .doctor-calculators-section .compare-heading:has(> .sec-intro) { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .homepage-figma-bg.hg .doctor-calculators-section .compare-heading > h2 { grid-column: 1; grid-row: 1; justify-self: start; }
  .homepage-figma-bg.hg .doctor-calculators-section .compare-heading > .sec-intro { grid-column: 2; grid-row: 1; padding-left: 28px !important; }
  .hg #knowledge .ps__top { grid-template-columns: auto minmax(0, 1fr); }
  .hg #knowledge .ps__top > .ps__head { grid-column: 1; grid-row: 1; }
  .hg #knowledge .ps__top > .ps__intro { grid-column: 2; grid-row: 1; padding-left: 28px !important; }
}
@media (min-width: 1001px) {
  .hg #knowledge .ps__top > .ps__head { justify-items: start; text-align: left; }
  .hg #knowledge .ps__top > .ps__intro { justify-items: start; text-align: left; border-right: 0; }
}

/* ===================== D-226 (owner, 4 Nov, "What is CoverYou?": a reference image, "make it like this") =====================
   Top row, three columns: (1) a short coral bar, the heading with "CoverYou" in coral (homepage.php 'hl'), "Who we are" and
   a "Know more" pill to About Us ('more'); (2) the two-doctors drawing on a soft coral circle; (3) Mission and Vision in one
   white card, big soft-coral icon circles, coral uppercase labels, the statements at 17-20px, a thin divider. Below: the
   three items as white cards, a soft-coral icon circle beside the title, a coral corner blob. A large faint coral circle
   sits behind the top right. Icons all in coral. 1001-1279px: intro and card side by side, no drawing. Phones stack.
   OLD (D-225): centred heading and intro, Mission / Vision in a dark band, numbered columns. */
.hg #what-is-coveryou { overflow: hidden; }
.hg #what-is-coveryou::after { content: ""; position: absolute; z-index: 0; right: -140px; top: -40px; width: 420px; aspect-ratio: 1; border-radius: 50%; background: rgba(240, 93, 73, .07); pointer-events: none; }
.hg #what-is-coveryou > .in { position: relative; z-index: 1; display: grid; gap: 40px 48px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "pair" "trio"; align-items: center; }
.hg #what-is-coveryou .ps__body { display: contents; }

/* (1) intro */
.hg #what-is-coveryou .ps__top { grid-area: top; display: block !important; max-width: none !important; margin: 0 !important; text-align: left !important; }
.hg #what-is-coveryou .ps__top > .ps__head { display: block !important; margin: 0 0 22px !important; text-align: left !important; }
.hg #what-is-coveryou .ps__top > .ps__head::after { display: none !important; }
.hg #what-is-coveryou .ps__top > .ps__head::before { content: ""; display: block; width: 72px; height: 5px; margin-bottom: 24px; border-radius: 5px; background: #f05d49; }
.hg #what-is-coveryou .ps__head h2 { font-size: clamp(36px, 3.6vw, 56px) !important; line-height: 1.04 !important; text-align: left !important; }
.hg #what-is-coveryou .ps__hl { color: #f05d49; }
.hg #what-is-coveryou .ps__top > .ps__intro { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
.hg #what-is-coveryou .ps__intro p { max-width: 60ch !important; text-align: left !important; text-align-last: auto !important; hyphens: manual !important; color: #3f3833; }
.hg #what-is-coveryou .ps__more { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 28px; border-radius: 999px; background: #f7a898; color: #15110f; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; transition: background-color .2s, color .2s; }
.hg #what-is-coveryou .ps__more svg { width: 20px; height: 20px; transition: transform .2s; }
.hg #what-is-coveryou .ps__more:hover { background: #f05d49; color: #fff; }
.hg #what-is-coveryou .ps__more:hover svg { transform: translateX(3px); }

/* (2) the drawing, as a grid item of its own (the grid's ::before) */
.hg #what-is-coveryou > .in::before { content: ""; grid-area: art; display: none; align-self: stretch; min-height: 380px;
  background: url("../../images/illustrations/doctors.svg") center bottom / auto 88% no-repeat, radial-gradient(circle at 50% 56%, rgba(240, 93, 73, .13) 0 40%, transparent 40.5%); }

/* (3) Mission and Vision card */
.hg #what-is-coveryou ul.personas { list-style: none; margin: 0; }
.hg #what-is-coveryou ul.personas::before, .hg #what-is-coveryou ul.personas::after { display: none !important; }
.hg #what-is-coveryou ul.personas > li { border: 0 !important; outline: 0 !important; text-align: left !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hg #what-is-coveryou ul.personas .medal { background: #fde4de !important; color: #f05d49 !important; box-shadow: none !important; margin: 0 !important; }
.hg #what-is-coveryou ul.personas .medal svg { color: #f05d49 !important; }
.hg #what-is-coveryou ul.personas:first-of-type { grid-area: pair; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 10px 40px; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(240, 93, 73, .1), 0 30px 60px -36px rgba(92, 23, 14, .3); }
.hg #what-is-coveryou ul.personas:first-of-type > li { display: grid !important; grid-template-columns: 88px minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 30px 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.hg #what-is-coveryou ul.personas:first-of-type > li::before, .hg #what-is-coveryou ul.personas:first-of-type > li::after { display: none !important; }
.hg #what-is-coveryou ul.personas:first-of-type > li + li { border-top: 1px solid rgba(240, 93, 73, .2) !important; }
.hg #what-is-coveryou ul.personas:first-of-type .medal { width: 88px; height: 88px; font-size: 40px; }
html:not(#cy-bt-1):not(#cy-bt-2) body .hg #what-is-coveryou ul.personas:first-of-type p { margin: 0; font: 500 clamp(17px, 1.3vw, 20px)/1.5 Inter, system-ui, sans-serif !important; color: #1f1a17; }
.hg #what-is-coveryou ul.personas:first-of-type p b { display: block; margin-bottom: 6px; font: 700 13px/1.2 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #f05d49; }

/* the three cards */
.hg #what-is-coveryou ul.personas:last-of-type { grid-area: trio; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; }
.hg #what-is-coveryou ul.personas:last-of-type > li { position: relative; overflow: hidden; display: grid !important; grid-template-columns: 76px minmax(0, 1fr); gap: 0 22px; align-items: start; padding: 30px 30px 34px !important;
  border-radius: 26px !important; background: #fff !important; box-shadow: 0 0 0 1px rgba(240, 93, 73, .14), 0 24px 44px -34px rgba(92, 23, 14, .3) !important; }
.hg #what-is-coveryou ul.personas:last-of-type > li::before { display: none !important; }
.hg #what-is-coveryou ul.personas:last-of-type > li::after { content: "" !important; display: block !important; position: absolute !important; right: -46px !important; bottom: -46px !important; left: auto !important; top: auto !important; width: 130px !important; height: 130px !important; border-radius: 50% !important; background: rgba(240, 93, 73, .08) !important; filter: none !important; opacity: 1 !important; pointer-events: none; }
.hg #what-is-coveryou ul.personas:last-of-type .medal { width: 76px; height: 76px; font-size: 34px; }
.hg #what-is-coveryou ul.personas:last-of-type p { position: relative; z-index: 1; margin: 0; color: #3f3833; }
.hg #what-is-coveryou ul.personas:last-of-type p b { display: block; margin: 8px 0 10px; font: 700 19px/1.3 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #15110f; }

@media (min-width: 1001px) {
  .hg #what-is-coveryou > .in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top pair" "trio trio"; }
}
@media (min-width: 1280px) {
  .hg #what-is-coveryou > .in { grid-template-columns: minmax(0, 5fr) minmax(0, 3.3fr) minmax(0, 5fr); grid-template-areas: "top art pair" "trio trio trio"; }
  .hg #what-is-coveryou > .in::before { display: block !important; }
}
@media (max-width: 1000px) {
  .hg #what-is-coveryou ul.personas:last-of-type { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .hg #what-is-coveryou ul.personas:first-of-type { padding: 4px 22px; }
  .hg #what-is-coveryou ul.personas:first-of-type > li { grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; padding: 22px 0 !important; }
  .hg #what-is-coveryou ul.personas:first-of-type .medal { width: 64px; height: 64px; font-size: 30px; }
  .hg #what-is-coveryou ul.personas:last-of-type > li { grid-template-columns: 60px minmax(0, 1fr); gap: 0 16px; padding: 24px 22px 26px !important; }
  .hg #what-is-coveryou ul.personas:last-of-type .medal { width: 60px; height: 60px; font-size: 28px; }
  .hg #what-is-coveryou::after { width: 260px; right: -110px; }
}
/* D-226 fixes: the intro block and its paragraph start on the content edge (earlier centring rules kept them centred in their
   column); the drawing is a plain grid item, not the blurred, absolutely placed glow the glass sections give .in::before */
.hg #what-is-coveryou .ps__top > .ps__head { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; position: static !important; left: auto !important; transform: none !important; }
.hg #what-is-coveryou .ps__intro p { margin-left: 0 !important; margin-right: auto !important; }
.hg #what-is-coveryou > .in::before { position: static !important; inset: auto !important; width: auto !important; height: auto !important; filter: none !important; opacity: 1 !important; transform: none !important; border-radius: 0 !important; z-index: auto !important; animation: none !important; }
.hg #what-is-coveryou .ps__top, .hg #what-is-coveryou .ps__top > .ps__head, .hg #what-is-coveryou .ps__top > .ps__intro { justify-items: start !important; justify-self: stretch !important; }
/* D-226: the "On this page" rail with its labels (1560px and up) ended at x 166, over the content edge (x 160 at 1920; home and
   PI). Slimmer padding and 12.5px labels keep it clear of the text. OLD: 8px panel padding, 8px 12px 8px 10px links, 13px */
@media (min-width: 1560px) {
  :is(.pg, .hg) .pg-toc .ppx-toc__in { padding: 6px; }
  :is(.pg, .hg) .pg-toc a { gap: 8px; padding: 7px 10px 7px 8px; font-size: 12.5px; }
}
/* D-226b (owner, 4 Nov, the Mission / Vision card: "decrease the content size of this"): statements 16px (OLD 17-20px),
   icon circles 64px (OLD 88px), labels 12px, tighter rows */
@media (min-width: 1001px) {
  .hg #what-is-coveryou ul.personas:first-of-type { padding: 6px 34px; }
  .hg #what-is-coveryou ul.personas:first-of-type > li { grid-template-columns: 64px minmax(0, 1fr); gap: 0 20px; padding: 24px 0 !important; }
  .hg #what-is-coveryou ul.personas:first-of-type .medal { width: 64px; height: 64px; font-size: 28px; }
}
html:not(#cy-bt-1):not(#cy-bt-2) body .hg #what-is-coveryou ul.personas:first-of-type p { font: 500 16px/1.55 Inter, system-ui, sans-serif !important; }
.hg #what-is-coveryou ul.personas:first-of-type p b { margin-bottom: 6px; font-size: 12px; }
/* D-226c (owner, 4 Nov: "illustration is not here for the What is CoverYou section, fix that"): the drawing showed only from
   1280px (OLD: hidden below that, so smaller laptops never saw it). Now at every width: 1001-1279px under the intro, beside
   the Mission / Vision card; phones between the intro and the card. */
.hg #what-is-coveryou > .in::before { display: block !important; }
@media (min-width: 1001px) and (max-width: 1279px) {
  .hg #what-is-coveryou > .in { grid-template-areas: "top pair" "art pair" "trio trio"; }
  .hg #what-is-coveryou > .in::before { min-height: 300px; }
}
@media (max-width: 1000px) {
  .hg #what-is-coveryou > .in { grid-template-areas: "top" "art" "pair" "trio"; }
  .hg #what-is-coveryou > .in::before { min-height: 260px; }
}
@media (min-width: 1001px) and (max-width: 1279px) { .hg #what-is-coveryou > .in::before { height: 280px !important; min-height: 0; align-self: start; } }
@media (max-width: 1000px) { .hg #what-is-coveryou > .in::before { height: 240px !important; min-height: 0; } }

/* ===================== D-227 (owner, 4 Nov: a reference image, "redesign the calculator section as well") =====================
   partials/calculators-showcase (home only). Top: a coral bar, the heading with "Doctors" in coral, the subtitle, an
   "Explore all tools" pill; on the right the savings drawing on a coral circle with two floating glass cards and a dot grid.
   Then filter pills on a hairline, a three-column grid of white cards (icon circle, name, one line, arrow), and a "Show all"
   line. OLD (D-215 / D-223): four scrolling columns of calculator links under a heading row. */
.hg .calc-x { overflow: hidden; }
.hg .calc-x::before { content: ""; position: absolute; z-index: 0; right: -120px; top: -80px; width: 360px; aspect-ratio: 1; border-radius: 50%; background: rgba(240, 93, 73, .07); pointer-events: none; }
.hg .calc-x::after { content: ""; position: absolute; z-index: 0; left: -140px; bottom: -160px; width: 340px; aspect-ratio: 1; border-radius: 50%; background: rgba(240, 93, 73, .06); pointer-events: none; }
.hg .calc-x > .compare-container { position: relative; z-index: 1; }

/* top */
.hg .calc-x__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 40px; }
.hg .calc-x__copy::before { content: ""; display: block; width: 72px; height: 5px; margin-bottom: 24px; border-radius: 5px; background: #f05d49; }
.homepage-figma-bg.hg .calc-x .calc-x__copy h2 { margin: 0 0 18px !important; font: 700 clamp(34px, 3.5vw, 54px)/1.06 Inter, system-ui, sans-serif !important; letter-spacing: -.04em; color: #15110f; text-align: left !important; }
.hg .calc-x__copy h2::before { content: none !important; display: none !important; }
.hg .calc-x__copy h2 span { color: #f05d49; }
html:not(#cy-bt-1):not(#cy-bt-2) body .hg .calc-x .calc-subtitle { max-width: 56ch; margin: 0; font-size: 16px !important; color: #4a423d; text-align: left; }
.hg .calc-x__all { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 28px; border-radius: 999px; background: #f7a898; color: #15110f; font: 600 15px/1 Inter, system-ui, sans-serif; text-decoration: none; transition: background-color .2s, color .2s; }
.hg .calc-x__all .cy-icon { width: 20px; height: 20px; transition: transform .2s; }
.hg .calc-x__all:hover { background: #f05d49; color: #fff; }
.hg .calc-x__all:hover .cy-icon { transform: translateX(3px); }
.hg .calc-x__art { position: relative; justify-self: center; width: min(480px, 100%); aspect-ratio: 4 / 3; }
.hg .calc-x__art::before { content: ""; position: absolute; left: 12%; right: 12%; top: 6%; aspect-ratio: 1; border-radius: 50%; background: rgba(240, 93, 73, .12); }
.hg .calc-x__art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.hg .calc-x__float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .9); color: #f05d49;
  box-shadow: 0 0 0 1px rgba(240, 93, 73, .1), 0 22px 40px -24px rgba(92, 23, 14, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hg .calc-x__float .cy-icon { width: 34px; height: 34px; }
.hg .calc-x__float--calc { left: 0; top: 4%; transform: rotate(-6deg); color: #15110f; }
.hg .calc-x__float--chart { right: -2%; top: 34%; transform: rotate(4deg); }
.hg .calc-x__dots { position: absolute; z-index: 0; left: 4%; bottom: 14%; width: 54px; height: 54px; background: radial-gradient(circle, rgba(240, 93, 73, .45) 2.5px, transparent 3px) 0 0 / 18px 18px; }
@media (prefers-reduced-motion: no-preference) { .hg .calc-x__float { animation: pg-float 7s ease-in-out infinite; } .hg .calc-x__float--chart { animation-delay: -3s; } }

/* filters */
.hg .calc-x__filters { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.hg .calc-x__filters::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 50%; border-top: 1px solid rgba(240, 93, 73, .25); }
.hg .calc-x__filter { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 0; border-radius: 999px; background: #fff; color: #15110f; font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(21, 17, 15, .1), 0 10px 22px -18px rgba(92, 23, 14, .4); transition: background-color .2s, color .2s, box-shadow .2s; }
.hg .calc-x__filter .cy-icon { width: 20px; height: 20px; }
.hg .calc-x__filter:hover { box-shadow: 0 0 0 1px rgba(240, 93, 73, .45), 0 10px 22px -18px rgba(92, 23, 14, .4); }
.hg .calc-x__filter[aria-pressed="true"] { background: linear-gradient(140deg, #f7836f, #f05d49); color: #fff; box-shadow: 0 14px 26px -14px rgba(229, 83, 63, .9); }
.hg .calc-x__filter:focus-visible { outline: 2px solid #f05d49; outline-offset: 3px; }

/* grid */
.hg .calc-x__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.hg .calc-x__grid > li { margin: 0; padding: 0; }
.hg .calc-x__grid > li[hidden] { display: none; }
.hg .calc-x__card { display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 18px; align-items: center; height: 100%; padding: 18px 20px; border-radius: 22px; background: #fff; text-decoration: none; color: inherit;
  box-shadow: 0 0 0 1px rgba(240, 93, 73, .12), 0 18px 34px -28px rgba(92, 23, 14, .35); transition: box-shadow .2s, transform .2s; }
.hg .calc-x__card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(240, 93, 73, .35), 0 24px 40px -26px rgba(92, 23, 14, .45); }
.hg .calc-x__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fde4de; }
.hg .calc-x__ic img { width: 34px; height: 34px; object-fit: contain; }
.hg .calc-x__txt { display: grid; gap: 4px; min-width: 0; }
.hg .calc-x__txt b { font: 650 16px/1.3 Inter, system-ui, sans-serif; color: #15110f; }
html:not(#cy-bt-1):not(#cy-bt-2) body .hg .calc-x__txt small { font-size: 13.5px !important; line-height: 1.45 !important; color: #6b625d; }
.hg .calc-x__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fde4de; color: #f05d49; transition: background-color .2s, color .2s; }
.hg .calc-x__go .cy-icon { width: 18px; height: 18px; }
.hg .calc-x__card:hover .calc-x__go { background: #f05d49; color: #fff; }

/* show all */
.hg .calc-x__more { display: flex; justify-content: center; margin-top: 26px; }
.hg .calc-x__more-btn { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 6px 4px; border: 0; background: none; color: #4a423d; font: 500 15px/1.4 Inter, system-ui, sans-serif; cursor: pointer; }
.hg .calc-x__more-btn::before, .hg .calc-x__more-btn::after { content: ""; width: 90px; border-top: 1px solid rgba(21, 17, 15, .18); }
.hg .calc-x__more-btn:hover { color: #c9412e; }
.hg .calc-x__more-btn[hidden] { display: none; }

@media (min-width: 701px) { .hg .calc-x__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1001px) {
  .hg .calc-x__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: 44px; }
  .hg .calc-x__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hg .calc-x__filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .hg .calc-x__filters::-webkit-scrollbar { display: none; }
  .hg .calc-x__filters::before { display: none; }
  .hg .calc-x__filter { flex: none; padding: 11px 18px; font-size: 14px; }
  .hg .calc-x__art { width: min(320px, 100%); }
  .hg .calc-x__card { grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 14px; padding: 14px 16px; }
  .hg .calc-x__ic { width: 52px; height: 52px; }
  .hg .calc-x__ic img { width: 28px; height: 28px; }
  .hg .calc-x__more-btn::before, .hg .calc-x__more-btn::after { width: 30px; }
}
.hg .calc-x__ic img { mix-blend-mode: multiply; } /* the PNG icons have white grounds; multiply lets the coral circle show through */

/* D-228 (owner, 4 Nov, "Why doctors choose CoverYou": "not utilising the section properly … why is there space from left and
   right"): the lower half runs edge to edge. The trust circle starts on the content edge; the four figures are a 2 x 2 grid of
   white cards filling the rest of the row to the right edge. The intro text widens to 1280px. OLD (D-215): circle and figures
   each centred in half the row, leaving empty space at both edges and in the middle. */
.homepage-figma-bg.hg .doctor-trust-section :is(.trust-heading) { max-width: 1280px !important; }
.homepage-figma-bg.hg .doctor-trust-section .sec-intro { max-width: 1280px; }
@media (min-width: 1001px) {
  .hg .doctor-trust-section .trust-content { grid-template-columns: auto minmax(0, 1fr) !important; justify-items: stretch !important; gap: 56px !important; }
  .hg .doctor-trust-section .trust-orbit-widget { justify-self: start; margin: 0 !important; }
  .hg .doctor-trust-section .trust-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100% !important; max-width: none !important; margin: 0 !important; }
  .hg .doctor-trust-section .trust-stats-row { display: contents !important; }
  .hg .doctor-trust-section .trust-stat-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 34px 36px !important; border-radius: 26px; text-align: left !important; align-items: flex-start !important;
    background: radial-gradient(90% 120% at 100% 0%, rgba(240, 93, 73, .07), transparent 60%), #fff; box-shadow: 0 0 0 1px rgba(240, 93, 73, .12), 0 24px 44px -34px rgba(92, 23, 14, .3); }
  .hg .doctor-trust-section .trust-stat-value { justify-content: flex-start !important; }
}

/* D-229 (owner, 4 Nov, "Claims and support": "add claims illustration for this"): the reviewed-documents drawing (a phone with
   a ticked document) on a soft coral circle on the left; the heading, coral bar, paragraph and guide link on the right, set
   left (the PI "Why" pattern, D-210). Phones: the drawing above the heading, 220px. OLD (D-222): heading and text centred,
   no drawing. */
.hg #claims .ps__top { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "art" "head" "intro"; justify-items: start !important; gap: 18px !important; max-width: none !important; margin: 0 !important; text-align: left !important; }
.hg #claims .ps__top::before { content: ""; grid-area: art; justify-self: center; width: min(320px, 100%); height: 220px;
  background: url("../../images/illustrations/reviewed-docs.svg") center bottom / contain no-repeat, radial-gradient(circle at 50% 55%, rgba(240, 93, 73, .13) 0 42%, transparent 42.5%); }
.hg #claims .ps__top > .ps__head { grid-area: head; justify-items: start !important; text-align: left !important; margin: 0 !important; }
.hg #claims .ps__top > .ps__head::after { justify-self: start; }
.hg #claims .ps__top > .ps__intro { grid-area: intro; justify-items: start !important; text-align: left !important; }
.hg #claims .ps__intro p { max-width: 66ch !important; text-align: left !important; text-align-last: auto !important; hyphens: manual !important; margin-left: 0 !important; }
@media (min-width: 1001px) {
  .hg #claims .ps__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; grid-template-areas: "art head" "art intro"; align-items: center; gap: 18px 64px !important; }
  .hg #claims .ps__top::before { width: 100%; max-width: 460px; height: 340px; align-self: center; }
  .hg #claims .ps__top > .ps__head { align-self: end; }
  .hg #claims .ps__top > .ps__intro { align-self: start; }
}

/* D-242 (owner, 5 Nov: "I can tell the nav bar section and the hero apart on the left and right side; I want it smooth"):
   the header is sticky and transparent, so at the top of the home page its 76px band showed the plain white page body and the
   hero's ground (#fdfbfa, grid, coral glow) began below it with a visible edge. Like the PI pages (D-143), the home ground now
   slides up under the header and pads its content back down by the same amount, so nothing moves and the ground runs
   behind the nav without a seam. */
.homepage-figma-bg.hg { --hg-hdr: 76px; margin-top: calc(-1 * var(--hg-hdr)); padding-top: var(--hg-hdr); }
@media (max-width: 991px) { .homepage-figma-bg.hg { --hg-hdr: 64px; } }