/* ============================================================
   PODE.expert — Resources section
   Shared by the Resources landing page and every /pensions/* and
   /for/* page. Requires brand-tokens.css (loaded first) + fonts.css.

   Why a shared file rather than the per-page inline <style> the rest
   of the site uses: there are 22 pages here, and Phil edits content
   after handover. One stylesheet means a look-and-feel change is one
   file, not 22. Do NOT link components.css from these pages -- it is
   dead code sitewide and its .hero/.btn rules conflict with index.html.
   ============================================================ */

:root{
  --navy:var(--pode-ink); --blue:var(--pode-teal); --blue-d:var(--pode-teal-deep);
  --bg:var(--pode-bone); --card:#fff; --line:var(--pode-line); --ink:var(--pode-ink);
  --mut:var(--pode-slate); --radius:var(--pode-radius); --font:var(--pode-font-body);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
a{color:var(--pode-teal-deep)}
h1,h2,h3,h4{font-family:var(--pode-font-display);letter-spacing:-.01em}

/* ---- Top bar (shared site chrome) ---- */
.topbar{background:#fff;border-bottom:1px solid var(--pode-line);padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
.topbar .brand{font-family:var(--pode-font-display);font-weight:800;letter-spacing:-.02em;font-size:20px;color:var(--pode-ink);text-decoration:none;display:inline-flex;align-items:center}
.topbar .brand span{color:var(--pode-teal);font-weight:400}
.topbar nav a{color:#3d5061;text-decoration:none;font-size:15px;margin-left:20px}
.topbar nav a:hover{color:var(--pode-teal-deep)}
.topbar nav a.soon{color:#7d8b96;cursor:default}
@media(max-width:900px){.topbar nav a{margin-left:14px;font-size:13.5px}}
@media(max-width:560px){.topbar{padding:12px 16px}.topbar nav{width:100%;display:flex;flex-wrap:wrap;gap:2px 0}.topbar nav a{margin:0 16px 0 0;font-size:13px}}

/* ---- Page head (shared site chrome) ---- */
.head{background:linear-gradient(150deg,var(--pode-ink),var(--pode-teal-deep));color:var(--pode-bone);padding:46px 24px}
.head .inner{max-width:860px;margin:0 auto}
.head .eyebrow{font-family:var(--pode-font-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--pode-teal-light);margin:0 0 12px}
.head h1{margin:0 0 10px;font-size:32px}
.head p{margin:0;color:rgba(245,241,232,.85);font-size:17px;max-width:680px}
.head p a{color:#fff;text-decoration:underline}
@media(max-width:560px){.head{padding:34px 20px}.head h1{font-size:26px}}

/* ---- Breadcrumb ---- */
.crumb{max-width:860px;margin:0 auto;padding:14px 20px 0;font-size:13.5px;color:var(--mut)}
.crumb a{color:var(--pode-teal-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---- Content column ---- */
.wrap{max-width:860px;margin:0 auto;padding:8px 20px 40px}

/* ---- Article prose ---- */
.prose{padding-top:10px}
.prose h2{font-size:1.35rem;color:var(--pode-ink);margin:34px 0 8px;scroll-margin-top:90px}
.prose h3{font-size:1.08rem;color:var(--pode-ink);margin:24px 0 6px}
.prose p{margin:0 0 14px;color:#2b3a45}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:#2b3a45}
.prose li{margin:0 0 7px}
.prose li>strong:first-child{color:var(--pode-ink)}
.prose strong{color:var(--pode-ink)}
.prose a{color:var(--pode-teal-deep)}
.prose hr{border:0;border-top:1px solid var(--pode-line);margin:30px 0}
.prose > p:first-of-type em{color:#3b4a56}

/* The standing "general information, not advice" line that opens each page. */
.prose blockquote{margin:0 0 22px;padding:12px 16px;background:var(--pode-mist);border-left:3px solid var(--pode-teal);border-radius:6px;color:#3b4a56;font-size:14.5px}
.prose blockquote p{margin:0}

/* ---- "The key points" box -------------------------------------------------
   A scannable summary at the top of each guide, so a reader who finds long
   text hard gets the whole gist without reading the prose, while the full
   article still sits underneath. Prompted by a reader with dyslexia.
   Built to match Phil's `Prototype/keypoints-demo.html`. Reusable: drop the
   block in below the standing advice note and fill in the bullets. The bullet
   copy for each guide comes from Phil as ordinary page copy.
   The tick uses currentColor so it needs no separate asset. */
.keypoints{background:#fff;border:1.5px solid #cfe3e3;border-radius:14px;
  padding:22px 26px 20px;margin:0 0 30px}
.keypoints .kh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.keypoints .kh .ic{width:30px;height:30px;border-radius:8px;background:#E2F0EC;
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--pode-teal)}
.keypoints .kh h2{margin:0;font-family:var(--pode-font-display);font-weight:800;
  font-size:19px;color:var(--pode-ink);scroll-margin-top:90px}
.keypoints ul{list-style:none;margin:0;padding:0}
.keypoints li{position:relative;padding:9px 0 9px 30px;font-size:16.5px;
  line-height:1.5;border-top:1px solid #eef1ee;color:#2b3a45;margin:0}
.keypoints li:first-child{border-top:none}
.keypoints li::before{content:"";position:absolute;left:6px;top:16px;width:9px;height:9px;
  border-radius:50%;background:var(--pode-teal)}
.keypoints li b{color:var(--pode-ink)}
.keypoints .tail{margin:14px 0 0;font-size:15px}
.keypoints .tail a{color:var(--pode-teal-deep);font-weight:700;
  text-decoration:underline;text-underline-offset:2px}

/* ---- Case studies ----
   .status-note says whether a study is a real anonymised case or an
   illustrative one. Every study carries one: labelling only the illustrative
   ones would leave a reader unable to tell what the unlabelled ones are.
   .stat is the single headline figure each study turns on. */
.status-note{margin:0 0 22px;padding:12px 16px;background:rgba(233,166,77,.14);border-left:3px solid var(--pode-amber);border-radius:6px;color:#4b3c1f;font-size:14.5px}
.status-note p{margin:0}
.stat{margin:24px 0;padding:18px 22px;background:#fff;border:1px solid var(--pode-line);border-left:4px solid var(--pode-amber);border-radius:var(--radius);box-shadow:var(--pode-shadow-card)}
.stat p{margin:0;font-family:var(--pode-font-display);font-weight:700;font-size:1.16rem;color:var(--pode-ink);line-height:1.42}
.standfirst{color:#3b4a56;font-size:1.02rem;margin:0 0 20px}

/* ---- Embedded graphic (iframe) ----
   Phil's graphics are standalone documents that declare their own :root
   variables (--ink, --teal, --line) and reuse class names this site also
   uses (.step, .steps, .wrap, .sub). Inlining them would overwrite the
   host page's variables and collide both ways. An iframe seals them off.
   Height is set by embed.js from the framed document's own content. */
.embed{position:relative;margin:26px 0;border:1px solid var(--pode-line);border-radius:var(--radius);background:#fff;overflow:hidden;box-shadow:var(--pode-shadow-card)}
/* Expand control for an INTERACTIVE embed. The flat diagrams open on click because
   there is nothing else a click could mean; here a click selects a stage, so making
   the whole graphic a zoom target would break the thing it is zooming. Hence a
   dedicated control. */
.embed-expand{position:absolute;top:10px;right:10px;z-index:2;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--pode-teal-deep);background:rgba(255,255,255,.92);border:1px solid var(--pode-line);
  border-radius:999px;padding:6px 12px}
.embed-expand:hover{border-color:var(--pode-teal);background:#fff}
.embed-expand:focus-visible{outline:2px solid var(--pode-teal);outline-offset:2px}
.embed:fullscreen{margin:0;border:0;border-radius:0;background:var(--pode-bone,#F5F1E8);
  display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px}
.embed:fullscreen iframe{width:100%;max-width:1600px}
/* On a narrow screen the framed graphic's own eyebrow ("PENSIONS ON DIVORCE ·
   INTERACTIVE") runs the full width and the overlaid button lands on top of it. The
   eyebrow lives INSIDE the iframe, so the host page cannot reflow around it. Below
   this width the button therefore leaves the overlay entirely and sits above the
   frame in normal flow, where it cannot collide with anything. */
@media(max-width:700px){
  .embed{display:flex;flex-direction:column}
  .embed-expand{position:static;order:-1;align-self:flex-end;margin:10px}  /* even all round: a
     0 bottom margin left it flush against the frame and visibly off-centre in the strip */
}
@media print{.embed-expand{display:none}}
.embed iframe{display:block;width:100%;border:0;min-height:520px}
.embed-fallback{display:block;width:100%;height:auto}
.embed-cap{font-size:13px;color:var(--mut);margin:8px 2px 0}
/* The zoom affordance under an interactive embed. It is .figure so the delegated
   lightbox picks it up, but it holds no image, so it must not inherit .figure a's
   card styling. */
.embed-zoom{margin:6px 2px 0;font-size:13px}
.figure.embed-zoom a{display:inline;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--pode-teal-deep);text-decoration:underline}
.figure.embed-zoom a:hover{box-shadow:none}

/* ---- Case-study graphics (.figure) ----
   These five are NOT embedded the way the journey and timeline graphics are,
   and the difference is in the source, not in a preference. Those two were
   authored responsively: max-width plus an 860px breakpoint. These five are
   fixed-width desktop artwork, .wrap is width:1080px (1160px for the flip
   graphic), with no media queries and no scripts at all. A fixed 1080px
   document inside an 820px frame carrying scrolling="no" is simply cropped.

   So they are used as images. Phil supplies 2x renders (2160px wide), which at
   the 820px column is sharper than a scaled-down frame, needs no height
   syncing, and still works with JavaScript off. Nothing is lost: the graphics
   are static, so the frame bought us nothing here.

   Each is a link to the full-size render, and that is what makes them usable on
   a phone: at ~335px the artwork is a third of its design width, so its labels
   are small BY CONSTRUCTION. That is a property of the source graphic, not of
   this markup, and it cannot be fixed here. The real fix is responsive artwork,
   which has been raised with Phil. */
/* ---- Diagram lightbox ----------------------------------------------------
   Applied BY CLASS, not per image, so any future diagram marked up as
   .figure gets it with no extra work. Progressive enhancement: the markup is
   still a plain <a> to the full-size PNG, so with JavaScript off a click just
   opens the image, which is what it did before.
   Opens fitted to the screen; clicking the image toggles actual size and the
   overlay scrolls, which is how you read the small labels on a phone. */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(10,30,48,.92);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.lb img{max-width:100%;max-height:100%;display:block;cursor:zoom-in;
  border-radius:6px;background:#fff}
.lb.zoom{align-items:flex-start;justify-content:flex-start}
/* flex:none is load-bearing. The image is a flex item, so it still shrinks to
   the container even with max-width:none, and the zoom silently did nothing:
   measured 342px on a 390px phone against a natural width of 2320px. Zooming
   is the whole point of the lightbox on a phone, so without this the feature
   is decorative. */
.lb.zoom img{max-width:none;max-height:none;width:auto;flex:none;cursor:zoom-out}
.lb-close{position:fixed;top:14px;right:16px;z-index:1;appearance:none;border:0;
  cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:15px;
  font-weight:700;line-height:1;padding:10px 14px;border-radius:8px}
.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-hint{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72);
  font-size:12.5px;pointer-events:none}
@media (prefers-reduced-motion: reduce){.lb{scroll-behavior:auto}}

.figure{margin:26px 0}
.figure a{display:block;border:1px solid var(--pode-line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--pode-shadow-card)}
.figure a:hover{box-shadow:var(--pode-shadow-lift)}
.figure img{display:block;width:100%;height:auto}
/* The diagrams are INLINE svg, not <img>: an SVG in an <img> renders in an isolated
   document and cannot see the page webfonts, so its type would fall back to Georgia.
   Inline means it needs its own sizing rule or it renders at its intrinsic 1080px and
   overflows the column. */
.figure svg{display:block;width:100%;height:auto}
/* Same for an inline SVG used as an embed fallback. .embed is overflow:hidden, so an
   unconstrained SVG is silently CROPPED rather than overflowing: scrollWidth stays
   correct and automated overflow checks pass while the diagram is visibly cut off. */
.embed svg{display:block;width:100%;height:auto}
.figure figcaption{font-size:13px;color:var(--mut);margin:8px 2px 0}

/* ---- "Reviewed" line -------------------------------------------------------
   A per-page field, so a date can be changed without touching code: edit the
   text inside the span and nothing else. Empty means the whole line hides
   itself, which follows Phil's own rule for the directory, show nothing
   rather than a placeholder. Dates to follow from him, one per guide. */
.reviewed{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--pode-line);
  font-size:12.5px;color:var(--mut)}
.reviewed::before{content:"Reviewed "}
/* :empty rather than :has(), which is newer and buys nothing here. The field
   IS the text content, so an empty element hides the whole line, word and all. */
.reviewed:empty{display:none}

/* ---- CTA band (shared site chrome) ---- */
.band{background:var(--pode-mist);border:1px solid rgba(14,124,134,.18);border-radius:var(--radius);padding:26px;margin-top:30px;text-align:center}
.band h3{margin:0 0 8px;color:var(--pode-ink);font-size:21px}
.band p{margin:0 0 18px;color:#3b4a56}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;text-decoration:none;font-family:var(--pode-font-display);font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--pode-radius)}
.btn.primary{background:var(--pode-amber);color:var(--pode-amber-ink)}.btn.primary:hover{filter:brightness(.96)}
.btn.light{background:#fff;color:var(--pode-ink);border:1px solid rgba(15,42,67,.24)}.btn.light:hover{background:rgba(15,42,67,.05)}

/* ---- Resources landing: groups + cards ---- */
.group{margin:34px 0 0}
.group > h2{font-size:1.35rem;color:var(--pode-ink);margin:0 0 4px;scroll-margin-top:90px}
.group > p.subtitle{color:var(--mut);margin:0 0 16px;font-size:.98rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--pode-line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;display:block;box-shadow:var(--pode-shadow-card);transition:box-shadow .15s,border-color .15s}
.card:hover{box-shadow:var(--pode-shadow-lift);border-color:rgba(15,42,67,.2)}
.card h3{font-size:1rem;color:var(--pode-ink);margin:0 0 5px}
.card p{margin:0;color:#3b4a56;font-size:13.5px;line-height:1.5}
.card .tag{display:inline-block;font-family:var(--pode-font-display);font-weight:600;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pode-teal-deep);background:rgba(14,124,134,.09);padding:2px 7px;border-radius:5px;margin-bottom:7px}

/* ---- Footer (shared site chrome) ---- */
footer{background:var(--pode-ink-deep);color:rgba(245,241,232,.6);font-size:13px;padding:38px 24px;margin-top:36px}
footer .finner{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
footer .brandf{color:#fff;font-family:var(--pode-font-display);font-weight:800;letter-spacing:-.02em;font-size:19px}
footer .brandf span{color:var(--pode-teal-light);font-weight:400}
footer a{color:rgba(245,241,232,.82)}
footer .col a,footer .col span{display:block;text-decoration:none;margin:3px 0}
footer .col .h{color:#fff;font-family:var(--pode-font-display);font-weight:600;margin-bottom:8px}
.disclaimer{max-width:1080px;margin:20px auto 0;font-size:11.5px;color:rgba(245,241,232,.45);line-height:1.55}
.legal-row{max-width:1080px;margin:14px auto 0;text-align:center;font-size:12.5px}
.legal-row a{margin:0 5px}

/* ---- Mobile menu (below 901px) ------------------------------------------
   The nav sits inside <details>, so the mobile disclosure is native: keyboard
   operable and announced correctly to screen readers.
   The <details> is marked `open` in the HTML, and a small script at the end of
   each page closes it below the breakpoint. Do NOT try to replace that script
   by forcing `display` on a closed <details>: that gives the content a layout
   box but does not paint it. It was tried, it measured 72px tall, and the
   desktop navigation was invisible on screen. With JavaScript off the nav
   simply stays open, which is the behaviour the site had before this change.
   "Do I need a PODE?" stays visible beside the menu button on mobile rather
   than being buried: it is the primary conversion path on the site. */
.navcta{display:none}
.mnav>summary{display:none;list-style:none}
.mnav>summary::-webkit-details-marker{display:none}

@media(min-width:1001px){
  .mnav>nav{display:flex;align-items:center}
}

/* Eight items do not quite fit beside the logo at the bottom of the desktop
   range, so the gaps and type are tightened there.
   Re-measured 2026-07-31 after the "coming soon" badge was dropped from the
   Instruct item, which was worth about 90px: at 1001px, the tightest desktop
   width, the nav now wants 787px untightened against 771px available. Still
   16px short, so the rule stays, but the crossover is about 1017px rather than
   the 1200px it needed with the badge. Bound set to 1100px, which keeps a
   comfortable margin over the measurement while giving most desktop widths
   their full-size type back.
   If a ninth item is added, or a label changes, RE-MEASURE. Do not assume. */
@media(min-width:1001px) and (max-width:1100px){
  .topbar nav a{margin-left:12px;font-size:14px}
}

@media(max-width:1000px){
  .topbar{padding:11px 16px;gap:10px;flex-wrap:nowrap}
  .topbar .brand{font-size:18px}
  .navcta{display:inline-block;margin-left:auto;white-space:nowrap;text-decoration:none;
    font-family:var(--pode-font-display);font-weight:700;font-size:13px;line-height:1.2;
    background:var(--pode-amber);color:var(--pode-amber-ink);padding:9px 12px;border-radius:var(--pode-radius)}
  .navcta:hover{filter:brightness(.96)}
  .mnav{position:relative}
  .mnav>summary{display:flex;align-items:center;justify-content:center;width:42px;height:40px;
    cursor:pointer;background:#fff;border:1px solid var(--pode-line);border-radius:9px}
  .mnav>summary:focus-visible{outline:2px solid var(--pode-teal);outline-offset:2px}
  .mnav[open]>summary{background:var(--pode-mist);border-color:rgba(14,124,134,.40)}
  .bars,.bars::before,.bars::after{display:block;width:19px;height:2px;background:var(--pode-ink);border-radius:2px}
  .bars{position:relative}
  .bars::before{content:"";position:absolute;top:-6px}
  .bars::after{content:"";position:absolute;top:6px}
  .mnav[open]>nav{display:block;position:absolute;right:0;top:calc(100% + 11px);
    background:#fff;border:1px solid var(--pode-line);border-radius:12px;
    box-shadow:0 18px 44px rgba(15,42,67,.18);padding:6px;min-width:224px;z-index:40}
  .mnav[open]>nav a{display:block;margin:0;padding:11px 14px;font-size:15px;border-radius:8px;color:#3d5061}
  .mnav[open]>nav a:hover{background:var(--pode-mist)}
}
@media(max-width:390px){
  .navcta{font-size:12px;padding:9px 10px}
  .topbar .brand{font-size:16.5px}
}

/* ---- Reduced motion ----
   The site has no entrance or scroll animations; the motion here is the smooth
   scroll on in-page anchors above and 0.15s hover transitions on cards, links
   and the glossary controls. Small, but "prefers-reduced-motion" is a setting
   people turn on for vestibular reasons and it costs nothing to honour.
   Kept as a near-zero duration rather than `none` so transitionend still fires
   for anything that might later depend on it. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}