/*
 * D-356 (owner, 10 Nov: "write the content properly like the other pages and fix the UI of the page on the theme of all the other
 * pages, like the product pages; we need to be in sync throughout the website" (Claim Assistance), "update the design of the
 * Contact Us page as well", and on Customer Reviews "use a different kind of card, this is a very generic one"):
 * the info pages built on the shared content-section components (cs-*, cy-section-head, cy-icon-tile, cy-benefit) - Contact,
 * Claim Assistance, Customer Reviews, Press Releases - drawn in the product pages' language (pi-glass / pg-v2): the dotted warm
 * ground, display headings (left-aligned, no three-dash divider), glass cards with the soft ring shadow, glossy coloured
 * medals, arrow chips. CSS only: text, links, forms and ids are unchanged. Loaded on every page (layouts/partials/head);
 * every rule is scoped to those four page wrappers.
 */
.ct-page, .ca-page, .cr-page, .pr-page {
  --p2-coral: #f05d49; --p2-deep: #c23b28; --p2-ink: #15110f; --p2-text: #3f3833; --p2-mute: #6b625c;
  --p2-card: linear-gradient(155deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .74));
  --p2-ring: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(21, 17, 15, .06), 0 28px 54px -36px rgba(92, 23, 14, .42);
  --p2-gloss: radial-gradient(120% 90% at 30% 14%, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 60%);
  --p2-spring: cubic-bezier(.16, 1.04, .3, 1);
  position: relative; isolation: isolate;
  background: radial-gradient(900px 520px at 100% 0%, rgba(255, 139, 120, .16), transparent 65%), radial-gradient(700px 480px at 0% 40%, rgba(240, 93, 73, .06), transparent 65%),
    radial-gradient(circle at 1px 1px, rgba(21, 17, 15, .055) 1px, transparent 0) 0 0 / 22px 22px, #fcf9f7;
}
:is(.ct-page, .ca-page, .cr-page, .pr-page) :is(.cs-section, section):not([class*="hero"]):not(.cy-faq):not(.dark) { background: transparent !important; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-section--tint { background: linear-gradient(180deg, rgba(247, 242, 239, 0), #f7f1ee 90px, #f8f3f0 calc(100% - 90px), rgba(248, 243, 240, 0)) !important; }

/* ---------- headings: display size, left-aligned, no divider ---------- */
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cy-divider, :is(.ct-page, .ca-page, .cr-page, .pr-page) .compare-accent { display: none !important; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cy-section-head { text-align: left !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html body :is(.ct-page, .ca-page, .cr-page, .pr-page) .cy-section-head__title, html body :is(.ct-page, .ca-page, .cr-page, .pr-page) .cr-title {
  font-size: clamp(30px, 3.3vw, 48px) !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: -.035em !important; color: var(--p2-ink) !important; text-transform: none !important; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) :is(.cy-section-head__title, .cr-title) .cy-accent {
  background: linear-gradient(95deg, #ff8b78, #f05d49 45%, #e0442f); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cy-section-head > p, :is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-lead { max-width: 70ch; margin-left: 0 !important; text-align: left !important; color: var(--p2-text); }
/* hero titles at the product heroes' size */
html body .ct-hero__title, html body .ca-hero__title, html body .cr-hero__title, html body .pr-hero__title { font-size: clamp(36px, 4.2vw, 60px) !important; line-height: 1.04 !important; font-weight: 800 !important; letter-spacing: -.04em !important; }

/* ---------- cards: glass with the ring shadow ---------- */
:is(.ct-page,.ca-page,.cr-page,.pr-page) .cs-card, :is(.ct-page,.ca-page,.cr-page,.pr-page) .cy-benefit, :is(.ct-page,.ca-page,.cr-page,.pr-page) .ct-office, :is(.ct-page,.ca-page,.cr-page,.pr-page) .cr-panel {
  border: 0 !important; border-radius: 26px !important; background: var(--p2-card) !important; box-shadow: var(--p2-ring) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .45s var(--p2-spring), box-shadow .45s ease; }
:is(.ct-page,.ca-page,.pr-page) .cs-card:hover, :is(.ct-page,.ca-page,.pr-page) .cy-benefit:hover, :is(.ct-page,.ca-page,.pr-page) .ct-office:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(240, 93, 73, .16), 0 36px 60px -34px rgba(92, 23, 14, .5) !important; }
:is(.ct-page,.ca-page,.cr-page,.pr-page) .cs-card__title, :is(.ct-page,.ca-page,.cr-page,.pr-page) .cy-benefit__title { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--p2-ink) !important; }

/* ---------- icons: glossy coloured medals (coral, blue, green, amber in turn) ---------- */
.ct-page, .ca-page, .cr-page, .pr-page { --m1: #f05d49; --m2: #3b5bdb; --m3: #0ca750; --m4: #e0a412; }
:is(.ct-page,.ca-page,.pr-page) .cy-icon-tile, :is(.ct-page,.ca-page,.pr-page) .cy-benefit__icon, :is(.ct-page,.ca-page,.pr-page) .ct-card__icon { --m: var(--m1);
  display: grid !important; place-items: center; border-radius: 16px !important; color: #fff !important; background: var(--p2-gloss), var(--m) !important; box-shadow: 0 12px 22px -12px var(--m) !important; border: 0 !important; }
:is(.ct-page, .ca-page, .pr-page) :is(.cy-icon-tile, .cy-benefit__icon, .ct-card__icon) :is(svg, .cy-icon) { color: #fff !important; stroke: #fff; }
:is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+2) .cy-icon-tile, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+2) .cy-benefit__icon, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+2) .ct-card__icon { --m: var(--m2); }
:is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+3) .cy-icon-tile, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+3) .cy-benefit__icon, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+3) .ct-card__icon { --m: var(--m3); }
:is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+4) .cy-icon-tile, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+4) .cy-benefit__icon, :is(.ct-page,.ca-page,.pr-page) :is(.cs-cards,.cs-links,.cy-benefits,.ct-hero__body,.ct-offices__list)>:nth-child(4n+4) .ct-card__icon { --m: var(--m4); }

/* ---------- link rows: glass, the arrow in a chip that slides ---------- */
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-link { border: 0 !important; border-radius: 22px !important; background: var(--p2-card) !important; box-shadow: var(--p2-ring) !important; transition: transform .4s var(--p2-spring); }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-link:hover { transform: translateY(-4px); text-decoration: none; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-link__name { font-weight: 700 !important; color: var(--p2-ink) !important; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-link__go { flex: none; width: 34px !important; height: 34px !important; padding: 8px; box-sizing: border-box; border-radius: 50%; color: var(--p2-deep) !important; background: rgba(240, 93, 73, .1); transition: translate .4s var(--p2-spring), background .3s, color .3s; }
:is(.ct-page, .ca-page, .cr-page, .pr-page) .cs-link:hover .cs-link__go { translate: 3px 0; background: var(--p2-coral); color: #fff !important; }

/* ---------- Contact: the hero's three contact rows and the offices ---------- */
.ct-page .ct-card { border: 0 !important; border-radius: 22px !important; background: var(--p2-card) !important; box-shadow: var(--p2-ring) !important; transition: transform .4s var(--p2-spring); }
.ct-page .ct-card:hover { transform: translateX(6px); }
.ct-page .ct-card__icon { width: 56px !important; height: 56px !important; }
.ct-page .ct-card__value { font-weight: 800 !important; letter-spacing: -.01em; color: var(--p2-ink) !important; }
.ct-page .ct-office { padding: 26px 24px !important; }
.ct-page .ct-office__badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .06em; }

/* ---------- Claim Assistance: the steps as glossy numbered stops on a dashed line ---------- */
.ca-page .ca-step__circle { color: #fff !important; background: var(--p2-gloss), linear-gradient(150deg, #ff8b78, #e5503c) !important; box-shadow: 0 0 0 7px #fcf9f7, 0 0 0 8px rgba(240, 93, 73, .2), 0 16px 28px -12px rgba(229, 80, 60, .8) !important; border: 0 !important; }
.ca-page .ca-step__circle :is(svg, .cy-icon) { color: #fff !important; }
.ca-page .ca-step__title { font-weight: 800 !important; color: var(--p2-ink) !important; }
.ca-page .ca-type__tile { border-radius: 26px !important; box-shadow: var(--p2-ring) !important; border: 0 !important; }

/* ---------- Customer Reviews: stories as speech bubbles ----------
   The card is a speech bubble (glass, tinted by its topic, a big quote mark, a tail pointing down) and the reviewer stands under
   it, outside the bubble - like a quote said by that person. OLD: a white card with a coloured top border and the reviewer
   inside it under a dashed rule. */
.cr-page .cr-story { --who-h: 64px; --gap: 24px; padding: 26px 26px calc(var(--who-h) + var(--gap) + 24px) !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible; min-height: 300px; }
.cr-page .cr-story--pi-claims { --tone: #e5503c; --tone-bg: #fdebe7; }
.cr-page .cr-story::before { content: ""; position: absolute; z-index: -1; inset: 0 0 calc(var(--who-h) + var(--gap)) 0; border-radius: 28px;
  background: radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 62%), var(--p2-card); box-shadow: var(--p2-ring); }
.cr-page .cr-story::after { content: ""; position: absolute; z-index: -1; left: 40px; bottom: calc(var(--who-h) + var(--gap) - 11px); width: 22px; height: 22px; rotate: 45deg; border-radius: 0 0 6px 0;
  background: #fff; box-shadow: 8px 8px 16px -10px rgba(92, 23, 14, .35), 1px 1px 0 rgba(21, 17, 15, .06); }
.cr-page .cr-stories__track { isolation: isolate; padding-bottom: 28px !important; }
.cr-page .cr-story > * { position: relative; }
.cr-page .cr-story__mark { position: absolute !important; right: 22px !important; top: 16px !important; width: 56px !important; height: 56px !important; color: var(--tone) !important; opacity: .18; }
.cr-page .cr-story__tag { border-radius: 999px !important; font-weight: 700 !important; }
.cr-page .cr-story__text { font-size: 16px !important; line-height: 1.6 !important; font-weight: 500; color: var(--p2-ink) !important; }
.cr-page .cr-story__text::before { content: "“"; margin-right: 2px; color: var(--tone); font-weight: 800; }
.cr-page .cr-story__text::after { content: "”"; margin-left: 2px; color: var(--tone); font-weight: 800; }
.cr-page .cr-story__who { position: absolute !important; left: 22px; right: 22px; bottom: 0; min-height: var(--who-h); padding: 0 !important; border: 0 !important; }
.cr-page .cr-story__who .cr-avatar { width: 50px !important; height: 50px !important; color: #fff !important; background: var(--p2-gloss), var(--tone) !important; box-shadow: 0 0 0 4px #fff, 0 10px 18px -10px var(--tone) !important; font-weight: 800 !important; }
/* the written review cards: glass */
.cr-page .cr-card { border: 0 !important; border-radius: 24px !important; background: var(--p2-card) !important; box-shadow: var(--p2-ring) !important; }
@media (prefers-reduced-motion: reduce) { :is(.ct-page, .ca-page, .cr-page, .pr-page) * { transition: none !important; } }
html.cy-lite :is(.ct-page,.ca-page,.cr-page,.pr-page) .cs-card, html.cy-lite :is(.ct-page,.ca-page,.cr-page,.pr-page) .cy-benefit, html.cy-lite :is(.ct-page,.ca-page,.cr-page,.pr-page) .ct-office, html.cy-lite :is(.ct-page,.ca-page,.cr-page,.pr-page) .cr-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* headings start on the left edge like the product pages (some titles centred themselves); the reviews page's own section
   titles at the same display size */
html body :is(.ct-page, .ca-page, .cr-page, .pr-page) .cy-section-head__title { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
html body .cr-page .cr-head__title { font-size: clamp(30px, 3.3vw, 48px) !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: -.035em !important; color: var(--p2-ink) !important; }
html body .cr-page .cr-cta__title, html body .ca-page .ca-help__title, html body .ca-page .cs-callout__title { letter-spacing: -.03em !important; font-weight: 800 !important; }

/* D-376 (owner, 10 Nov: "why is this like this, fix the contact us page"): the hero was a fixed 680px box with the drawing and the
   text pinned at absolute positions; once the H1 grew (D-355/356) the third contact card ran past the bottom and was cut off, and the
   drawing sat at 568px. Now one grid at every width: the drawing at natural size (max 440px) beside the text, the hero as tall as its
   content. The three cards get their own colours (call coral, email blue, WhatsApp green; they had all fallen back to one). */
@media (min-width: 768px) {
  html body .ct-page .ct-hero__inner { height: auto !important; max-width: 1240px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 64px); align-items: center;
    padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
}
html body .ct-page .ct-hero__art, html body .ct-page .ct-hero__body { position: static !important; left: auto !important; top: auto !important; }
html body .ct-page .ct-hero__art { width: 100% !important; height: auto !important; max-width: 440px; justify-self: center; }
html body .ct-page .ct-hero__body { width: auto !important; gap: 24px; }
html body .ct-page .ct-hero__head { max-width: none; gap: 12px; }
html body .ct-page .ct-hero__title { max-width: 16ch; text-wrap: balance; }
html body .ct-page .ct-cards { display: grid; gap: 12px; }
html body .ct-page .ct-card { min-height: 0 !important; padding-block: 14px !important; }
.ct-page .ct-cards > :nth-child(1) .ct-card__icon { --m: var(--m1); }
.ct-page .ct-cards > :nth-child(2) .ct-card__icon { --m: var(--m2); }
.ct-page .ct-cards > :nth-child(3) .ct-card__icon { --m: var(--m3); }
/* D-376: the card icons are coloured images (blue phone, amber mail, green WhatsApp); drawn white on their colour tiles */
.ct-page .ct-cards .ct-card__icon img { filter: brightness(0) invert(1); }

/* D-381 (owner, 10 Nov, Contact "How can we help you?": "why is this line not fully using the space?"): the intro paragraphs under
   section headings on Contact, Claims, Reviews and Press were capped at 70 characters (~900px) while the cards under them use the
   full row; they now run the full width of their section. OLD: max-width 70ch. */
html body :is(.ct-page, .ca-page, .cr-page, .pr-page) :is(.cy-section-head > p, .cs-lead) { max-width: none !important; }

/* D-382 (owner, 10 Nov: "wherever there are FAQs they should be using this style", the home page FAQ): every FAQ on the site in the
   home page's arrangement - the heading (last word in the script accent), the topic pills and the search centred above full-width
   question cards, the active topic in coral. OLD: the product / calculator / renewal pages had the heading, topics and search in a
   left column beside the questions (D-105); Contact and the checklists had a divider heading, underlined tabs and a small search. */
html body .cy-faq.cy-faq--split .cy-faq__inner { display: block !important; }
html body .cy-faq--split .cy-faq__inner > .pp-head { display: flex; justify-content: center; text-align: center; margin: 0 auto !important; }
html body .cy-faq--split .pp-head .pp-h2 { text-align: center !important; }
html body .cy-faq--split .cy-faq__bar { display: flex; flex-direction: column; align-items: center !important; max-width: 860px; margin: 18px auto 28px !important; }
html body .cy-faq--split .cy-faq__tabs { justify-content: center !important; }
html body .cy-faq--split .cy-faq__search { width: min(650px, 100%) !important; }
html body .cy-faq--split .cy-faq__panel { max-width: 1200px; margin-inline: auto !important; }
html body .cy-faq--split .cy-faq__tab[aria-selected="true"] { background: #f05d49 !important; color: #fff !important; }
html body .cy-faq--split .cy-faq__more { justify-self: center !important; }
html body .cy-faq--split .cy-faq__inner > .pp-head { width: 100%; max-width: none !important; }
html body .cy-faq--split .pp-head .pp-h2 { margin-inline: auto !important; }

/* D-388 (owner, 11 Nov, Reviews "Bought a policy through CoverYou?" band: "on hover where does the text go", then "why is the CTA not
   3D like the other CTAs"): customer-reviews.css made this secondary button transparent with white text, and a later sitewide rule
   turned the text near-black, so it vanished. It is now the site's standard secondary button (components.css: #f5f5f5, the 3D bevel,
   dark text, neutral-200 on hover), the same as Login / Read Reviews. OLD: transparent with a white outline. */
html body .cr-cta .cy-btn--secondary { background: var(--_bg) !important; color: var(--_fg) !important; border-color: transparent !important; }
html body .cr-cta .cy-btn--secondary:hover { background: var(--_bg-hover) !important; color: var(--_fg) !important; }
html body .cr-cta .cy-btn--secondary:active { background: var(--_bg-pressed) !important; }

/* D-391 (bug sweep, 12 Nov): faint grey labels below readable contrast (about 2.2-2.5:1) moved to the site's muted text colour
   (#77706b, about 4.6:1): the current page in breadcrumbs (#999 on the warm page) and "Not chosen yet" in the book-a-call summary
   (#a3a3a3). OLD: #999 / neutral-400. */
html body .cy-breadcrumb li:last-child, html body .cy-breadcrumb li[aria-current] { color: #77706b !important; }
html body .bc-sum__item:not(.is-filled) .bc-sum__value { color: #77706b !important; }