/* ==========================================================================
   /a-plan-for-life/ — companion stylesheet for page-plan-for-life.php.

   Ported from the working artifact. Three deliberate changes:
     * custom properties scoped to .pfl rather than :root, so they cannot leak;
     * every selector prefixed, including inside @media blocks, because the
       artifact styled bare elements (body, p, h2, table) the theme owns;
     * fonts forced to Montserrat. The artifact used a serif reading face;
       the site keeps one type family throughout.

   Dark-theme blocks dropped: the church site is a single light design.
   ========================================================================== */
body.pfl-page .gcc-site-main { max-width:none; width:100%; margin:0; padding:0; overflow-x:hidden; }
.pfl { font-family:'Montserrat', sans-serif; }

/* Links — match the theme's specificity or they fall back to sitewide blue. */
body.pfl-page .gcc-site-main .pfl a { text-decoration:none; }
body.pfl-page .gcc-site-main .pfl .tab,
body.pfl-page .gcc-site-main .pfl .nextlinks a,
body.pfl-page .gcc-site-main .pfl .voice a { color:inherit; }
body.pfl-page .gcc-site-main .pfl .hero h1,
body.pfl-page .gcc-site-main .pfl .storms-major h2 { color:#fff !important; }

/* Hover colours MUST be declared at this specificity too. The color:inherit
   rule above scores 402; a plain `.pfl .nextlinks a:hover` scores 301 and
   silently loses, so the next-step buttons went navy while their text stayed
   near-black — a black rectangle, only while hovered. Caught by
   scripts/check-css-hover.py, which now guards against exactly this. */
body.pfl-page .gcc-site-main .pfl .nextlinks a:hover { color:#fff; }
/* The voyage close link is pinned red at 402, so the theme's hover never
   reached it and it had no hover feedback at all. */
body.pfl-page .gcc-site-main .pfl .voyage-close a:hover { color:#B31419; }

.pfl {
    --navy:#0D1B2A; --navy-2:#16283B; --red:#E31E24; --cream:#FBF1E2; --gold:#C8A45E;
    --ink:#161F29; --muted:#59636F; --rule:#E0D8C8; --ground:#FFFDF9; --panel:#FFFFFF;
    --shade:#F7F2E7; --storm:#3E5871;
    --sans:'Montserrat', sans-serif;
    --serif:'Montserrat', sans-serif;
  }
.pfl {box-sizing:border-box}
.pfl {scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce) {
.pfl {scroll-behavior:auto}
.pfl {animation:none!important;transition:none!important}

}
.pfl {margin:0;background:var(--ground);color:var(--ink);
    font-family:var(--serif);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
.pfl .wrap,
/* The markup says pfl-wrap. The ported rule said .wrap, so it matched nothing
   and the page ran full-bleed with no side padding. */
.pfl .pfl-wrap {max-width:1120px;margin:0 auto;padding:0 24px}
.pfl p {max-width:64ch}
.pfl h1, .pfl h2, .pfl h3, .pfl h4 {font-family:var(--sans);margin:0;line-height:1.13;text-wrap:balance}
.pfl h1 {font-size:clamp(32px,5.4vw,58px);font-weight:800;letter-spacing:-.026em}
.pfl h2 {font-size:clamp(23px,3vw,34px);font-weight:800;letter-spacing:-.018em}
.pfl h3 {font-size:19px;font-weight:800;letter-spacing:-.008em}
.pfl h4 {font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pfl .eyebrow {font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.18em;
    text-transform:uppercase;color:var(--red)}
.pfl /* ---------- hero ---------- */
  .hero {background:var(--navy);color:#fff;padding:64px 0 0;border-bottom:4px solid var(--red)}
.pfl .hero h1 {color:#fff;max-width:17ch;margin:14px 0 18px}
.pfl .hero .lede {color:#C9D2DC;font-size:19.5px;max-width:56ch;margin:0 0 40px}
.pfl .verse-strip {background:var(--navy-2);border-top:1px solid rgba(255,255,255,.09);
    padding:26px 0;margin-top:8px}
.pfl .verse-strip p {margin:0;color:#EBDFC4;font-style:italic;font-size:18px;max-width:80ch}
.pfl .verse-strip .ref {display:block;font-family:var(--sans);font-style:normal;font-size:11px;
    font-weight:800;letter-spacing:.14em;color:var(--gold);margin-top:10px}
.pfl .verse-strip .gloss {color:#93A1AF;font-style:normal;font-size:15px;margin-top:14px;max-width:70ch}
.pfl /* ---------- check-in ---------- */
  .checkin {margin:-30px auto 0;position:relative;z-index:3}
.pfl .checkin-inner {background:var(--panel);border:1px solid var(--rule);
    box-shadow:0 10px 34px rgba(13,27,42,.10);padding:22px}
.pfl .checkin h4 {color:var(--muted);margin-bottom:14px}
.pfl .tabs {display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pfl .tab {display:block;text-align:left;border:1px solid var(--rule);background:var(--shade);
    padding:14px 15px;cursor:pointer;font-family:var(--sans);color:var(--ink);
    transition:background .15s,border-color .15s,transform .15s;text-decoration:none}
.pfl .tab:hover {background:var(--cream);transform:translateY(-2px)}
.pfl .tab:focus-visible {outline:2px solid var(--red);outline-offset:2px}
.pfl .tab .age {display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--red)}
.pfl .tab .who {display:block;font-size:16.5px;font-weight:800;margin-top:5px}
.pfl .tab .sub {display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
/* ---------- the voyage ---------- */
/* One track, not two lanes. The conditions strip below it is deliberately
   irregular in both order and width: the moment it lines up with the four
   stage segments it starts claiming each stage has its own fixed weather. */
.pfl .voyage-sec {margin-top:56px}
.pfl .voyage-scroll {overflow-x:auto;border:1px solid var(--rule);background:var(--panel)}
.pfl .voyage-inner {min-width:820px;padding:26px 26px 22px}
.pfl .voyage {display:flex;gap:10px;align-items:stretch}
.pfl .voyage-main {flex:1;min-width:0}
.pfl .ages {display:flex;font-family:var(--sans);font-size:11px;font-weight:800;
    letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:8px}
.pfl .ages span {flex:1}
/* The segments wrap rather than clip. The old road ran them off the end under
   overflow:hidden; now the destination cap takes 104px off the width and every
   label was being cut mid-word. */
.pfl .track {display:flex;min-height:38px;gap:4px}
.pfl .seg {flex:1;display:flex;align-items:center;padding:7px 12px;font-family:var(--sans);
    font-size:12.5px;font-weight:700;line-height:1.25;color:#fff}
.pfl .seg.c {background:#1E4D7B}
.pfl .seg.t {background:#2F6B4F}
.pfl .seg.y {background:#8A6A1F}
.pfl .seg.a {background:#6B2D6B}
.pfl .tracklab {font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);margin:16px 0 5px}
.pfl .waters {display:flex;height:30px;gap:3px}
/* box-sizing is not inherited here, so the storm chip is outlined with an inset
   shadow rather than a border — a border would make it 2px taller than its
   neighbours. */
.pfl .cond {display:flex;align-items:center;justify-content:center;font-family:var(--sans);
    font-size:11.5px;font-weight:800;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.pfl .cond.wind {background:#F3E7CC;color:#7A5F1E}
.pfl .cond.calm {background:#E4EEF4;color:#2C5670}
.pfl .cond.harbour {background:#E3EFE7;color:#2F6B4F}
.pfl .cond.storm {background:var(--shade);color:var(--storm);
    box-shadow:inset 0 0 0 1px var(--storm)}
.pfl .port {flex:0 0 104px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;background:var(--gold);color:var(--navy);text-align:center;padding:0 8px}
.pfl .port .k {font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;opacity:.75}
.pfl .port .t {font-family:var(--sans);font-size:17px;font-weight:800;margin-top:3px}
/* The four conditions, in full. Each card is colour-keyed to its chip in the
   diagram above, so the strip and the teaching read as one thing. */
.pfl .cond-cards {display:grid;gap:12px;margin-top:26px}
.pfl .cond-card {background:var(--panel);border:1px solid var(--rule);border-top:4px solid var(--rule)}
.pfl .cond-card .cc-key {font-family:var(--sans);font-size:11px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;margin-bottom:7px}

.pfl .cond-card p {font-size:16px;line-height:1.62;margin:0 0 14px;max-width:none}
.pfl .cond-card p:last-child {margin-bottom:0}
.pfl .cond-card .cc-hinge {font-weight:700;color:var(--navy);padding-left:16px;
    border-left:3px solid var(--rule);margin-top:18px}
.pfl .cond-card blockquote {margin:18px 0 0;padding-left:18px;border-left:3px solid var(--rule);
    font-style:italic;font-size:16.5px;line-height:1.55;color:var(--ink)}
.pfl .cond-card blockquote .ref {display:block;font-family:var(--sans);font-style:normal;
    font-size:11px;font-weight:800;letter-spacing:.13em;margin-top:10px}
.pfl .cc-wind {border-top-color:#D8B96C}
.pfl .cc-wind .cc-key, .pfl .cc-wind blockquote .ref {color:#7A5F1E}
.pfl .cc-wind blockquote, .pfl .cc-wind .cc-hinge {border-left-color:#D8B96C}
.pfl .cc-harbour {border-top-color:#7FA98D}
.pfl .cc-harbour .cc-key {color:#2F6B4F}
.pfl .cc-harbour .cc-hinge {border-left-color:#7FA98D}
.pfl .cc-storm {border-top-color:var(--storm)}
.pfl .cc-storm .cc-key {color:var(--storm)}
.pfl .cc-storm .cc-hinge {border-left-color:var(--storm)}
.pfl .cc-calm {border-top-color:#8FB3C7}
.pfl .cc-calm .cc-key {color:#2C5670}
.pfl .cc-calm .cc-hinge {border-left-color:#8FB3C7}

/* The close. Three paragraphs, then the line that turns the diagram into a
   claim, then the way out to the hard-season pages. */
.pfl .voyage-close {border-top:1px solid var(--rule);margin-top:34px;padding-top:24px}
.pfl .voyage-close p {font-size:16.5px;margin:0 0 15px;color:var(--muted);max-width:70ch}
.pfl .voyage-close .vc-hinge {font-family:var(--sans);font-size:clamp(17px,2vw,20px);
    font-weight:800;line-height:1.4;color:var(--navy);border-left:3px solid var(--red);
    padding-left:20px;margin:22px 0 18px;max-width:44ch}
.pfl .voyage-close .vc-link {font-size:15.5px;margin:0}
.pfl /* ---------- stages ---------- */
  .stage {margin-top:64px;scroll-margin-top:16px}
.pfl .stage-head {display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
    border-bottom:3px solid var(--navy);padding-bottom:14px}
.pfl .stage-age {font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.1em;
    color:#fff;background:var(--navy);padding:5px 11px}
.pfl .stage-head .tag {font-family:var(--sans);font-size:13px;color:var(--muted);margin-left:auto}
.pfl .grid {display:grid;grid-template-columns:1.15fr .85fr;gap:26px;margin-top:26px}
.pfl .col h4 {color:var(--red);margin-bottom:12px}
.pfl .col + .col h4 {color:var(--storm)}
.pfl .season {font-size:17.5px;margin:0 0 22px;max-width:none}
.pfl ul.ticks {list-style:none;padding:0;margin:0 0 22px}
.pfl ul.ticks li {position:relative;padding-left:26px;margin-bottom:11px;font-size:16px;line-height:1.55}
.pfl ul.ticks li::before {content:"";position:absolute;left:0;top:6px;width:12px;height:12px;
    border:1.5px solid var(--gold)}
.pfl .stormbox {background:var(--shade);border-left:3px solid var(--storm);padding:18px 20px;margin-bottom:20px}
.pfl .stormbox ul {margin:0;padding-left:18px;font-size:15.5px}
.pfl .stormbox li {margin-bottom:7px}
.pfl .stormbox .truth {margin:14px 0 0;padding-top:13px;border-top:1px solid var(--rule);
    font-size:15.5px;color:var(--ink)}
.pfl .scrips {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.pfl .voice {background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--gold);padding:20px 22px}
.pfl .voice h4 {color:var(--gold);margin-bottom:11px}
.pfl .voice blockquote {margin:0;font-style:italic;font-size:16px;line-height:1.6}
.pfl .voice .who {display:block;font-family:var(--sans);font-style:normal;font-size:12px;
    color:var(--muted);margin-top:12px}
.pfl .voice a {color:var(--red);text-decoration:none}
.pfl .voice a:hover {text-decoration:underline}
.pfl /* ---------- storms section ---------- */
  .storms-major {margin-top:72px;background:var(--navy);color:#fff;padding:48px 0}
.pfl .storms-major h2 {color:#fff}
.pfl .storms-major p {color:#C4CEDA}
.pfl .storms-major .eyebrow {color:var(--gold)}
.pfl .storms-major ul.ticks li {color:#E6ECF2}
.pfl .storms-major ul.ticks li::before {border-color:var(--gold)}
.pfl .storms-major .two {display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:26px}
.pfl .storms-major .pull {border-left:3px solid var(--gold);padding-left:20px;font-style:italic;
    font-size:18px;color:#EBDFC4}
.pfl .storms-major .pull .ref {display:block;font-family:var(--sans);font-style:normal;font-size:11px;
    font-weight:800;letter-spacing:.13em;color:var(--gold);margin-top:9px}
.pfl footer {margin-top:66px;padding:26px 0 80px;border-top:1px solid var(--rule);
    font-family:var(--sans);font-size:13px;color:var(--muted)}
.pfl footer a {color:var(--red)}
@media (max-width:900px) {
.pfl .grid {grid-template-columns:1fr}
.pfl .tabs {grid-template-columns:1fr 1fr}
.pfl .storms-major .two {grid-template-columns:1fr}

}
@media (max-width:520px) {
.pfl .tabs {grid-template-columns:1fr}
.pfl {font-size:16px}

}
.pfl /* ---------- scripture popovers ---------- */
  .scrip {position:relative;font-family:var(--sans);font-size:12px;font-weight:700;
    letter-spacing:.04em;background:var(--cream);color:var(--navy);border:1px solid var(--rule);
    padding:6px 10px;cursor:help;line-height:1.4}
.pfl .scrip::after {content:"";display:inline-block;width:4px;height:4px;margin-left:7px;
    vertical-align:2px;border-radius:50%;background:var(--red)}
.pfl .scrip:hover, .pfl .scrip.is-open {background:var(--gold);border-color:var(--gold);color:#12202E}
.pfl .scrip:focus-visible {outline:2px solid var(--red);outline-offset:2px}
.pfl .scrip .pop {position:absolute;left:0;bottom:calc(100% + 9px);width:min(340px,78vw);
    background:var(--navy);color:#F1E9D8;border:1px solid var(--gold);padding:15px 17px;
    font-family:var(--serif);font-size:15px;font-weight:400;line-height:1.6;letter-spacing:0;
    text-align:left;z-index:40;opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity .13s,transform .13s,visibility .13s;
    box-shadow:0 12px 34px rgba(8,14,22,.34);white-space:normal}
.pfl .scrip .pop em {font-style:italic;display:block}
.pfl .scrip .pop b {display:block;margin-top:10px;font-family:var(--sans);font-size:10.5px;
    font-weight:800;letter-spacing:.13em;color:var(--gold)}
.pfl .scrip:hover .pop, .pfl .scrip.is-open .pop {opacity:1;visibility:visible;transform:none}
@media (max-width:620px) {
.pfl .scrip .pop {left:auto;right:0}

}
.pfl /* ---------- real tick boxes ---------- */
  ul.ticks li {display:flex;gap:11px;align-items:flex-start;padding-left:0}
.pfl ul.ticks li::before {content:none}
.pfl ul.ticks input[type="checkbox"] {appearance:none;-webkit-appearance:none;flex:0 0 17px;
    width:17px;height:17px;margin:5px 0 0;border:1.5px solid var(--gold);background:transparent;
    cursor:pointer;position:relative;transition:background .13s,border-color .13s}
.pfl ul.ticks input[type="checkbox"]:checked {background:var(--gold);border-color:var(--gold)}
.pfl ul.ticks input[type="checkbox"]:checked::after {content:"";position:absolute;left:5px;top:1px;
    width:5px;height:10px;border:solid #12202E;border-width:0 2px 2px 0;transform:rotate(42deg)}
.pfl ul.ticks input[type="checkbox"]:focus-visible {outline:2px solid var(--red);outline-offset:2px}
.pfl ul.ticks label {cursor:pointer;flex:1}
.pfl ul.ticks input:checked + label {opacity:.52;text-decoration:line-through;
    text-decoration-thickness:1px;text-decoration-color:var(--muted)}
.pfl .storms-major ul.ticks input[type="checkbox"]:checked::after {border-color:#0B1119}
.pfl .progress {display:flex;align-items:center;gap:11px;margin:-8px 0 20px;
    font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pfl .progress .bar {flex:1;max-width:190px;height:5px;background:var(--rule);overflow:hidden}
.pfl .progress .fill {display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
.pfl .storms-major .progress {color:#93A1AF}
.pfl .storms-major .progress .bar {background:rgba(255,255,255,.16)}
.pfl /* ---------- next step ---------- */
  .nextstep {margin-top:30px;background:var(--cream);border-left:3px solid var(--red);
    padding:22px 26px}
.pfl .nextstep h4 {color:var(--red);margin-bottom:9px}
.pfl .nextstep p {margin:0 0 15px;font-size:16.5px;max-width:62ch}
.pfl .nextlinks {display:flex;flex-wrap:wrap;gap:9px}
.pfl .nextlinks a {font-family:var(--sans);font-size:13px;font-weight:700;text-decoration:none;
    background:var(--panel);border:1px solid var(--rule);color:var(--navy);padding:8px 13px;
    transition:background .14s,transform .14s}
.pfl .nextlinks a:hover {background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}
.pfl .nextlinks a:focus-visible {outline:2px solid var(--red);outline-offset:2px}

/* --- cross-link to the hard-season pages ---------------------------------- */
/* Sits on the navy storm panel, so every colour is set explicitly and at the
   theme's specificity: the card is an <a>, and its spans would otherwise
   inherit the sitewide link blue. */
body.pfl-page .gcc-site-main .pfl a.pfl-cross,
.pfl a.pfl-cross {
	display:block; margin-top:34px; padding:24px 26px; text-decoration:none;
	background:rgba(255,255,255,.06); border:1px solid rgba(200,164,94,.45);
	border-left:3px solid #C8A45E; transition:background 140ms ease, transform 140ms ease;
}
body.pfl-page .gcc-site-main .pfl a.pfl-cross:hover,
.pfl a.pfl-cross:hover { background:rgba(255,255,255,.11); transform:translateY(-2px); }
body.pfl-page .gcc-site-main .pfl a.pfl-cross .k,
.pfl a.pfl-cross .k { display:block; font-size:11px; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase; color:#D9B978 !important; margin-bottom:8px; }
body.pfl-page .gcc-site-main .pfl a.pfl-cross .t,
.pfl a.pfl-cross .t { display:block; font-size:22px; font-weight:800; color:#fff !important; margin-bottom:9px; }
body.pfl-page .gcc-site-main .pfl a.pfl-cross .d,
.pfl a.pfl-cross .d { display:block; font-size:15.5px; line-height:1.6; color:#C4CEDA !important; }
body.pfl-page .gcc-site-main .pfl a.pfl-cross .go,
.pfl a.pfl-cross .go { display:block; margin-top:13px; font-size:13.5px; font-weight:700; color:#D9B978 !important; }

/* the inline link in the road caption */
body.pfl-page .gcc-site-main .pfl .voyage-close a,
.pfl .voyage-close a { color:#E31E24; font-weight:700; text-decoration:underline; }

/* ==========================================================================
   Grafted from A Biblical Plan for Life and Beyond.
   The road section runs on age; this runs on discipline. Three cards, the
   daily principles, the guardrails, and the close.
   ========================================================================== */

/* --- the spine: three areas, every stage --------------------------------- */
.pfl .spine {margin-top:64px;padding-top:40px;border-top:1px solid var(--rule)}
.pfl .spine-cards {display:grid;gap:12px;margin-top:26px}
.pfl .scard {background:var(--panel);border:1px solid var(--rule);border-top:4px solid var(--navy)}
.pfl .scard .tag {font-family:var(--sans);font-size:11px;font-weight:800;
    letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}

.pfl .scard ul {list-style:none;margin:0;padding:0}
.pfl .scard li {position:relative;padding-left:19px;margin-bottom:10px;font-size:15.5px;
    line-height:1.55}
.pfl .scard li::before {content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
    background:var(--navy)}
.pfl .scard.sc-future {border-top-color:var(--gold)}
.pfl .scard.sc-future .tag {color:#8A6E2F}
.pfl .scard.sc-future li::before {background:var(--gold)}
.pfl .scard.sc-god {border-top-color:var(--red)}
.pfl .scard.sc-god .tag {color:var(--red)}
.pfl .scard.sc-god li::before {background:var(--red)}
.pfl .spine-note {margin-top:24px;padding-left:18px;border-left:3px solid var(--gold);
    font-size:16.5px;color:var(--muted);max-width:70ch}

/* --- daily principles ----------------------------------------------------- */
.pfl .principles {margin-top:64px}
.pfl .plist {display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
    border:1px solid var(--rule)}
.pfl .pitem {background:var(--panel);padding:20px 22px;font-family:var(--sans);font-size:15.5px;
    font-weight:700;line-height:1.4;color:var(--ink)}

/* --- guardrails ----------------------------------------------------------- */
.pfl .guards {display:grid;grid-template-columns:1.25fr .75fr;gap:24px;margin-top:34px}
.pfl .guardbox {background:var(--shade);border-left:3px solid var(--red);padding:26px 28px}
.pfl .guardbox h3 {margin-bottom:12px}
.pfl .guardbox .gnote {font-size:15.5px;color:var(--muted);margin:0 0 18px;max-width:none}
.pfl .guardbox ul {list-style:none;margin:0;padding:0}
.pfl .guardbox li {position:relative;padding-left:26px;margin-bottom:11px;font-size:16px;
    line-height:1.55}
.pfl .guardbox li::before {content:"";position:absolute;left:0;top:10px;width:13px;height:2px;
    background:var(--red)}
.pfl .remember {background:var(--navy);color:#fff;padding:26px 28px;align-self:start}
.pfl .remember .k {display:block;font-family:var(--sans);font-size:11px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.pfl .remember .q {font-style:italic;font-size:18px;line-height:1.5;color:#EBDFC4;margin:0;
    max-width:none}
.pfl .remember .r {display:block;font-family:var(--sans);font-size:12px;font-weight:800;
    letter-spacing:.12em;color:var(--gold);margin-top:12px}
.pfl .remember .g {font-size:15px;color:#C4CEDA;margin:16px 0 0;padding-top:15px;
    border-top:1px solid rgba(255,255,255,.14);max-width:none}

/* --- closing band --------------------------------------------------------- */
.pfl .closing {margin-top:64px;background:var(--cream);border-top:1px solid var(--rule);
    border-bottom:4px solid var(--red);padding:52px 0;text-align:center}
.pfl .closing .big {font-family:var(--sans);font-size:clamp(21px,2.9vw,30px);font-weight:800;
    line-height:1.25;letter-spacing:-.014em;max-width:26ch;margin:0 auto 18px;color:var(--navy)}
.pfl .closing .three {font-family:var(--sans);font-size:16px;font-weight:700;color:var(--red);
    letter-spacing:.01em;margin:0 auto 8px;max-width:none}
.pfl .closing .last {font-size:16.5px;color:var(--muted);margin:0 auto;max-width:none}

@media (max-width:900px) {
  .pfl .plist {grid-template-columns:repeat(2,1fr)}
  .pfl .guards {grid-template-columns:1fr}
}
@media (max-width:520px) {
  .pfl .plist {grid-template-columns:1fr}
  .pfl .closing {padding:40px 0}
}

/* --- accordions ----------------------------------------------------------
   <details> rather than JS: native keyboard and screen-reader behaviour, and
   the body stays real indexable markup, which this page needs.
   Measured reason: Children started 7.9 screens down on a 390px phone. */
.pfl details.cond-card > summary,
.pfl details.scard > summary {list-style:none;cursor:pointer;padding:18px 22px;
    transition:background 130ms ease}
.pfl details.cond-card > summary::-webkit-details-marker,
.pfl details.scard > summary::-webkit-details-marker {display:none}
.pfl details.cond-card > summary:hover,
.pfl details.scard > summary:hover {background:var(--shade)}
.pfl details.cond-card > summary:focus-visible,
.pfl details.scard > summary:focus-visible {outline:2px solid var(--red);outline-offset:-2px}
.pfl details > summary > h3 {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.pfl details .cc-key, .pfl details .tag {margin-bottom:0;flex:0 0 auto}
.pfl .cc-title, .pfl .sc-title {font-size:19px;font-weight:800;letter-spacing:-.008em;
    color:var(--ink);flex:1 1 auto;min-width:0}
/* An affordance in words as well as a glyph — a chevron alone is easy to miss. */
.pfl .cc-more {font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.pfl .cc-more::after {content:"Read"}
.pfl details[open] .cc-more::after {content:"Close"}
.pfl .cc-chev {width:9px;height:9px;flex:0 0 auto;margin-right:3px;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform 160ms ease}
.pfl details[open] .cc-chev {transform:rotate(-135deg)}
.pfl .cc-body {padding:2px 22px 24px}
.pfl .sc-body {padding:2px 22px 24px}
.pfl .cc-body > p:first-child {margin-top:0}
@media (prefers-reduced-motion:reduce) {
  .pfl .cc-chev {transition:none}
}

/* On a phone the summary was wrapping four ways and rows came out 62-140px
   tall and uneven. Put the small key on its own line, then title + affordance
   on the next, so every row is the same shape. */
@media (max-width:620px) {
  .pfl details.cond-card > summary,
  .pfl details.scard > summary {padding:14px 16px}
  .pfl details > summary > h3 {gap:4px 10px}
  .pfl details .cc-key, .pfl details .tag {flex:1 0 100%}
  .pfl .cc-title, .pfl .sc-title {font-size:17.5px}
  .pfl .cc-body, .pfl .sc-body {padding:2px 16px 20px}
}