/* Claim areas (/claim-areas/): one dark opening section that carries the page's real content, in the
   company-page system (Team, Mission, Careers), followed by the shared contact and footer.
   Linked on pages that declare <!--@group:claims-->.

   Layout
   - Lede (eyebrow, H1, one line) across the top; under it, on the left, an "On this page" index of the
     six areas, which stays in view while the areas scroll past on laptops and desktops (960px+) and
     marks the one being read (claims.js). Below 960px the index sits between the lede and the areas.
   - The six areas, each a block: a small dot-matrix icon and its number in the margin, then the title,
     the first paragraph as a lede and the rest of the copy. "Anything at Scale" ends with the live
     page's closing line and "Discuss a claim", which goes to the shared contact (#talk). There is no
     separate contact band.

   Icons: one pictogram per area drawn in dots on a 15 x 15 grid, the same grid and dot (r .36 of a cell)
   as the home page's Claims section, in the dot colour with one white accent detail:
     01 Car Finance            a car side on; accent: the headlight
     02 Unaffordable Lending   a payment card; accent: the chip
     03 Diesel Emissions       a fuel pump, its hose arcing off the top to a hanging nozzle; accent: the display
     04 Equal Pay              balanced scales; accent: the pivot
     05 Data Breach            an open padlock; accent: the keyhole
     06 Anything at Scale      one dot, then 4, 9 and 16, rising; accent: the one
   They are inline SVG in the page, so they show without JS. Motion is calm and never loops: the dots
   settle into each icon once as it comes into view (claims.js gives every dot a small offset and
   delay), and an area reached from the index brightens its icon. Without JS, or with reduced motion,
   the icons simply show and nothing moves. */

body:has(.ca) { background: var(--void); }

.ca {
  --ca-ink: var(--paper);
  --ca-soft: #ffffffb8;
  --ca-mute: var(--mute-dark);
  --ca-line: #ffffff1c;
  --ca-light: #8fb4ff;
  --ca-dot-on: #b8d0ff;
  --ca-ease: cubic-bezier(.22, .61, .36, 1);
  --ca-out: cubic-bezier(.16, 1, .3, 1);
  --ca-ic: 52px;
  position: relative;
  isolation: isolate;
  background: var(--void);
  color: var(--ca-ink);
  padding-block: clamp(2rem, 3.6vw, 3.25rem) clamp(3.5rem, 6vw, 5rem);
}
/* the same quiet wash of brand blue from the top left as the company pages */
.ca::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(72rem 44rem at 0% 0%, rgb(0 98 254 / .09), rgb(0 98 254 / .062) 22%, rgb(0 98 254 / .034) 45%, rgb(0 98 254 / .012) 70%, rgb(0 98 254 / 0));
}
.ca ::selection { background: var(--blue); color: #fff; }

.ca__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 6vw, 3rem); }
/* 960px+: the lede runs the full width (the H1 reads on one line), then the index left and the areas right.
   The 4 : 8 split from 960 keeps the areas column wide enough for the side layout (icon in the margin) at
   every width from here up, so the areas do not drop back to the phone layout between 960 and 1100. */
@media (width >= 960px) {
  .ca__in {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(3rem, 5vw, 4.5rem);
    row-gap: clamp(3rem, 5vw, 4.5rem);
  }
  .ca__lede { grid-column: 1 / -1; grid-row: 1; }
  .ca__main { grid-column: 2; grid-row: 2; }
  .ca__index { grid-column: 1; grid-row: 2; align-self: start; }
}
/* the index follows the reader down the areas, where the screen is tall enough to hold it. The last area
   is at least as tall as the index (plus its sticky top, less where an index jump lands an area), so a
   jump to "Anything at Scale" does not push the index up under the header. */
@media (width >= 960px) and (height >= 600px) {
  .ca__index { position: sticky; top: calc(var(--nav-h) + 1.75rem); }
  .ca-area:last-child { min-block-size: 21rem; }
}

/* ---------- Lede: the eyebrow and display size of the company pages and the shared contact ---------- */
.ca__k {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: #ffffffa8;
}
.ca__k::before { content: ""; flex: none; width: .4375rem; height: .4375rem; border-radius: 50%; background: var(--ca-light); }
.ca__h {
  margin-top: 1.5rem; max-width: 16ch;
  font-size: var(--step-display); font-weight: 300; line-height: 1; letter-spacing: -.045em;
  text-wrap: balance;
}
@media (width >= 960px) { .ca__h { max-width: none; } }
.ca__p {
  margin-top: 1.5rem; max-width: 40ch;
  font-size: var(--step-1); font-weight: 300; line-height: 1.5; color: var(--ca-soft);
  text-wrap: pretty;
}

/* ---------- Index: the six areas, the one being read marked with the blue dot ---------- */
.ca__index { max-width: 22rem; }
.ca__index-k {
  margin: 0; padding-bottom: .75rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ca-mute);
}
.ca__index-l { list-style: none; margin: 0; padding: 0; display: grid; }
.ca__index-l a {
  display: flex; align-items: center; gap: .875rem; min-height: 2.875rem;
  border-top: 1px solid var(--ca-line);
  color: var(--ca-soft); font-size: .9375rem; text-decoration: none;
  transition: color .2s;
}
.ca__index-l li:last-child a { border-bottom: 1px solid var(--ca-line); }
.ca__index-l a::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ffffff4d; transition: box-shadow .2s, background-color .2s;
}
.ca__index-t { min-width: 0; }
.ca__index-n {
  margin-inline-start: auto;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; color: #ffffff59;
  font-variant-numeric: tabular-nums; transition: color .2s;
}
.ca__index-l a:hover { color: var(--ca-ink); }
.ca__index-l a:hover::before { box-shadow: inset 0 0 0 1px var(--ca-ink); }
.ca__index-l a[aria-current] { color: var(--ca-ink); }
.ca__index-l a[aria-current]::before { background: var(--ca-light); box-shadow: none; }
.ca__index-l a[aria-current] .ca__index-n { color: var(--ca-light); }
.ca__index-l a:focus-visible { outline-offset: 3px; border-radius: 2px; }
/* Below 960px the index sits above the areas: a compact grid, so the first area is not pushed far down */
@media (width < 960px) {
  .ca__index { max-width: none; }
  .ca__index-l { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .ca__index-l a { gap: .625rem; font-size: .875rem; line-height: 1.3; }
  .ca__index-l li:nth-last-child(-n + 2) a { border-bottom: 1px solid var(--ca-line); }
  .ca__index-n { display: none; }
}
@media (600px <= width < 960px) {
  .ca__index-l { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
  .ca__index-l a { gap: .75rem; font-size: .9375rem; }
  .ca__index-l li:nth-last-child(-n + 3) a { border-bottom: 1px solid var(--ca-line); }
  .ca__index-n { display: inline; }
}

/* ---------- The six areas ---------- */
.ca__main { min-width: 0; container-type: inline-size; }
.ca-area {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--ca-line);
  scroll-margin-top: 1rem; /* on top of shell.css's scroll-padding-top (the header plus .5rem) */
}
.ca-area:first-child { padding-top: 0; border-top: 0; }
.ca-area:last-child { padding-bottom: 0; }

/* the margin: the icon, and the area's number beside it (narrow) or under it (wide) */
.ca-area__mark { display: flex; align-items: flex-end; justify-content: flex-start; gap: 1rem; }
.ca-area__ic { position: relative; flex: none; display: block; inline-size: var(--ca-ic); block-size: var(--ca-ic); }
.ca-area__k {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; line-height: 1; color: var(--ca-mute);
  font-variant-numeric: tabular-nums;
}
@container (width >= 32rem) {
  .ca-area { --ca-ic: 60px; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: clamp(1.5rem, 5cqi, 3rem); }
  .ca-area__mark { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.125rem; padding-top: .25rem; }
}

.ca-area__body { display: grid; gap: 1rem; align-content: start; min-width: 0; max-width: 40rem; }
.ca-area__t {
  margin: 0 0 .25rem;
  font-size: clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem); font-weight: 300; line-height: 1.08; letter-spacing: -.035em;
  color: var(--ca-ink); text-wrap: balance;
}
.ca-area__body p {
  margin: 0;
  font-size: var(--step-0); font-weight: 300; line-height: 1.65; color: var(--ca-soft);
  text-wrap: pretty;
}
.ca-area__body .ca-area__lede { font-size: var(--step-1); line-height: 1.5; letter-spacing: -.005em; color: #f7f7f5eb; }

/* The close of the last area: the live page's line, then "Discuss a claim", to the shared contact */
.ca-area__close { display: grid; gap: .5rem; margin-top: .75rem; }
.ca-go {
  display: inline-flex; align-items: center; gap: .875rem; min-height: 2.75rem;
  color: var(--ca-ink); font-size: .9375rem; text-decoration: none;
}
.ca-go__t { border-bottom: 1px solid #ffffff40; padding-bottom: 1px; transition: border-color .2s; }
.ca-go__arr {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #ffffff33; color: var(--ca-ink);
  transition: background-color .2s, border-color .2s, transform .3s var(--ca-ease);
}
.ca-go:hover .ca-go__t { border-color: var(--ca-ink); }
.ca-go:hover .ca-go__arr { background: var(--blue); border-color: var(--blue); transform: translateX(2px); }
.ca-go:focus-visible { outline-offset: 4px; border-radius: 2px; }

/* ---------- Icon: one pictogram in dots on a 15 x 15 grid ---------- */
.ca-ic { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ca-ic__d circle {
  fill: var(--ca-light); opacity: .82;
  transition: fill .5s var(--ca-ease), opacity .5s var(--ca-ease);
}
.ca-ic__a circle { fill: #fff; }
/* an area reached from the index (or a link to it) brightens its icon */
.ca-area:target .ca-ic__d circle { fill: var(--ca-dot-on); opacity: 1; }

/* Settle, once, when an icon comes into view (claims.js sets --dx, --dy, --d and adds .is-on).
   Without JS everything shows. If the script never runs, a fallback shows the icons after 2.5s; claims.js
   marks <html> .ca-armed as soon as it runs, which retires the fallback, and a script that arrives after
   the fallback has fired marks the section [data-static] so nothing hides and plays again. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.js .ca:not([data-static]) .ca-area:not(.is-on) .ca-ic circle { opacity: 0; }
  html.js:not(.ca-armed) .ca:not([data-static]) .ca-area:not(.is-on) .ca-ic circle { animation: ca-show 0s 2.5s forwards; }
  html.js .ca:not([data-static]) .ca-area.is-on .ca-ic circle { animation: ca-settle 1.1s var(--ca-out) var(--d, 0ms) backwards; }
}
@keyframes ca-show { to { opacity: .82; } }
@keyframes ca-settle {
  from { opacity: 0; transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ca *, .ca *::before, .ca *::after { animation: none !important; transition: none !important; }
}

@media print {
  .ca { background: #fff; color: #000; padding-block: 1rem; }
  .ca::before, .ca__index { display: none; }
  .ca-area__body p, .ca-area__body .ca-area__lede, .ca__p { color: #000; }
}