/* Cards in tabs (Pension's products, the user 2026-10-14, after ICEA LION's
   "What do I want to secure today?"): the choices to the right of the
   heading, underlined; the chosen one's cards below, a photograph across
   each card's top. The choices are a radio group and :has() shows the chosen
   panel, so nothing waits on a script; without :has() the choices go and
   every panel shows under its own label. Loaded only by this block. */
.ctabs-bar{position:relative;display:flex;gap:var(--space-6);margin:0;padding:0;min-width:0;border:0;border-bottom:1px solid var(--hair)}
.ctabs-bar input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ctabs-bar label{
  position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 4px 12px;
  font-size:var(--fs-lede);font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer;transition:color .2s
}
.ctabs-bar label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:background .2s}
.ctabs-bar label:hover,.ctabs-bar input:checked + label{color:var(--plum)}
.ctabs-bar input:checked + label::after{background:var(--plum)}
.ctabs-bar input:focus-visible + label{outline:3px solid var(--plum);outline-offset:2px;border-radius:4px}
@supports not selector(:has(*)){.ctabs-bar{display:none}}
@supports selector(:has(*)){
  .ctabs-section:has(.ctabs-bar input:nth-of-type(1):checked) .ctabs-panel:not(:nth-child(1)),
  .ctabs-section:has(.ctabs-bar input:nth-of-type(2):checked) .ctabs-panel:not(:nth-child(2)),
  .ctabs-section:has(.ctabs-bar input:nth-of-type(3):checked) .ctabs-panel:not(:nth-child(3)){display:none}
  .ctabs-section:has(.ctabs-bar) .ctabs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.ctabs-label{margin:var(--space-8) 0 var(--space-4);font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
.ctabs-panel:first-child .ctabs-label{margin-top:0}

/* The cards: the whole card is the link, and it turns aubergine under the
   pointer or keyboard focus, as Pension's product cards did (2026-09-21). */
.ctabs-cards{display:grid;gap:var(--space-4)}
.ctab-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);border-radius:14px;background:var(--surface);transition:background .25s,border-color .25s
}
.ctab-photo{height:184px;overflow:hidden;background:var(--plum-tint)}
.ctab-photo picture,.ctab-photo img{display:block;width:100%;height:100%}
.ctab-photo img{object-fit:cover;transition:transform .5s}
.ctab-body{display:flex;flex:1;flex-direction:column;padding:var(--space-6)}
.ctab-card h4{margin:0;font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.2;color:var(--plum)}
.ctab-card h4 a{color:inherit;text-decoration:none}
.ctab-card h4 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ctab-card h4 a:focus-visible{outline:none}
.ctab-card p{flex:1;margin-top:var(--space-3);font-size:var(--fs-small);line-height:1.55;color:var(--copy);text-align:left;-webkit-hyphens:manual;hyphens:manual}
.ctab-more{
  display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;margin-top:var(--space-4);padding-bottom:4px;
  border-bottom:2px solid var(--lime);font-size:var(--fs-small);font-weight:700;color:var(--plum)
}
.ctab-more .ar{transition:transform .2s}
.ctab-card:hover,.ctab-card:focus-within{background:var(--plum);border-color:transparent}
.ctab-card:hover h4,.ctab-card:focus-within h4,.ctab-card:hover .ctab-more,.ctab-card:focus-within .ctab-more{color:#fff}
.ctab-card:hover p,.ctab-card:focus-within p{color:rgba(255,255,255,.82)}
.ctab-card:hover .ctab-photo img{transform:scale(1.04)}
.ctab-card:hover .ctab-more .ar,.ctab-card:focus-within .ctab-more .ar{transform:translateX(3px)}
.ctab-card:focus-within{box-shadow:0 0 0 3px var(--lime)}
@media (prefers-reduced-motion:reduce){.ctab-photo img,.ctab-more .ar,.ctabs-bar label,.ctabs-bar label::after{transition:none}}

@media (max-width:1080px){
  .ctabs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ctabs-head{display:block}
  .ctabs-bar{margin-top:var(--space-6)}
  .ctabs-bar label{flex:1 1 0}
}
/* A phone: one card a row, its photograph a strip across the top and the
   words the card's full width (the user, 2026-10-23: beside the photograph
   they had 200-230px). The choices share the bar at body size, where the
   lede size pushed the third past the edge. */
@media (max-width:640px){
  .ctabs-cards{grid-template-columns:1fr}
  .ctab-photo{height:150px}
  .ctabs-bar{gap:var(--space-2)}
  .ctabs-bar label{flex:1 1 auto;min-width:0;padding:8px 2px 12px;font-size:var(--fs-body);white-space:normal;text-align:center;line-height:1.25}
  .ctab-body{padding:var(--space-4) 20px 20px}
  .ctab-card p{margin-top:var(--space-2)}
  .ctab-more{margin-top:var(--space-3)}
}

/* One quiet line under the cards, e.g. Training's way to the presentations
   for those who attended (the user, 2026-10-16). */
.ctabs-foot{margin:var(--space-6) 0 0;font-size:var(--fs-small);color:var(--muted)}
.ctabs-foot a{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:var(--space-2);padding-bottom:2px;border-bottom:2px solid var(--lime);font-weight:700;color:var(--plum);text-decoration:none}
.ctabs-foot a .ar{transition:transform .2s}
.ctabs-foot a:hover .ar,.ctabs-foot a:focus-visible .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.ctabs-foot a .ar{transition:none}}

/* A photograph's credit where its licence asks for one (the Pension pages'
   Wikimedia Commons photographs, 2026-10-16): small, at the card's foot. */
.ctab-credit{display:block;margin-top:var(--space-3);font-size:var(--fs-label);line-height:1.4;color:var(--muted)}
.ctab-card:hover .ctab-credit,.ctab-card:focus-within .ctab-credit{color:rgba(255,255,255,.7)}