/* ============================================================
   FUNDING: S6 preview (3 Oct). The page leads with the three ways to pay;
   the programme detail folds into rows that open on tap; the page ends on the form.
   Page-only sheet, like hardware.css and capture.css (funding.html alone loads it).
   ============================================================ */

/* ---- The answer first: Buy · Lease · Grant ---- */
.fx-ways{padding-bottom:clamp(56px,9vh,110px);}
.fx-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px;}
.fx-choice{position:relative;display:flex;flex-direction:column;gap:16px;container-type:inline-size;
  padding:32px 30px 30px;border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;
  background:radial-gradient(120% 100% at 0% 0%,rgba(52,198,212,.10),transparent 58%),linear-gradient(180deg,var(--panel),var(--bg2));
  transition:border-color .3s,transform .3s;}
.fx-choice:hover{border-color:rgba(52,198,212,.5);transform:translateY(-4px);}
.fx-choice:focus-visible{outline-offset:4px;border-radius:18px;}
.fx-choice-w{font-family:"Space Grotesk","Inter",sans-serif;font-weight:700;font-size:clamp(2.8rem,5.2vw,4.4rem);
  line-height:.95;letter-spacing:-.03em;}
/* 4 Oct (Marc: "i like the idea of the down arrows but they are block the text"). The ring sat top right, beside the word.
   A band's side padding is 6vw inside a fixed 1180px, so the cards get NARROWER as the window gets wider: at 2560 the ring
   touched "Lease", at 3440 it covered the end of "Lease" and "Grant". Two changes: the ring is now the last thing in the
   card, in its bottom right corner under the description (it can never sit on the word; phones keep it at the right,
   centred), and the word is sized by its own card as well as by the window (cqw: the card is the container), so the
   longest word always fits inside the card's padding. */
@supports (width:1cqw){ .fx-choice-w{font-size:clamp(2rem,min(5.2vw,36cqw),4.4rem);} }
.fx-choice-d{color:#cfd9df;font-size:1.08rem;line-height:1.55;max-width:32ch;margin-bottom:8px;}
/* the "jump to the detail" mark: a down chevron in a ring */
.fx-go{position:relative;flex:none;align-self:flex-end;margin-top:auto;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(52,198,212,.5);transition:background .25s,border-color .25s;}
.fx-go::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translate(-50%,-72%) rotate(45deg);transition:border-color .25s;}
.fx-choice:hover .fx-go{background:var(--teal);border-color:var(--teal);}
.fx-choice:hover .fx-go::before{border-color:#04181b;}
.fx-choices + .band-p{margin-top:34px;}

/* ---- The detail, folded: one group per path, rows open on tap ---- */
.fx-more{max-width:1180px;margin:0 auto;padding:0 6vw clamp(36px,6vh,72px);}
.fx-group{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:start;
  padding:clamp(44px,6.5vh,70px) 0;border-top:1px solid var(--line);scroll-margin-top:84px;}
.fx-head{position:sticky;top:104px;}
.fx-head .cat-title{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.12;}
.fx-head .cat-sub{font-size:1rem;margin-top:14px;}

.fx-rows{border-top:1px solid var(--line);}
.fx-row{border-bottom:1px solid var(--line);}
.fx-row>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"k x" "t x";column-gap:20px;row-gap:6px;align-items:center;padding:22px 2px;border-radius:8px;}
.fx-row>summary::-webkit-details-marker{display:none;}
.fx-row>summary::marker{content:"";}
.fx-row-k{grid-area:k;align-self:end;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--teal);}
.fx-row-t{grid-area:t;align-self:start;font-size:1.22rem;font-weight:700;line-height:1.25;color:var(--ink);transition:color .2s;}
/* plus that turns into a minus */
.fx-x{grid-area:x;position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  transition:border-color .2s;}
.fx-x::before,.fx-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;
  border-radius:2px;background:var(--teal);transition:transform .25s;}
.fx-x::after{transform:rotate(90deg);}
.fx-row[open] .fx-x::after{transform:rotate(0deg);}
.fx-row>summary:hover .fx-row-t{color:var(--teal);}
.fx-row>summary:hover .fx-x{border-color:rgba(52,198,212,.5);}
.fx-row>summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

.fx-row-b{padding:0 2px 26px;}
.fx-row-b p{color:var(--muted);font-size:1rem;line-height:1.62;max-width:60ch;}
.fx-row-b p+p{margin-top:12px;}
.fx-row-b .specs{margin-top:18px;}
.fx-row[open] .fx-row-b{animation:fxIn .35s cubic-bezier(.2,.7,.2,1);}
@keyframes fxIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* mission rows keep their photo, as a thumbnail */
.fx-row-m>summary{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"thumb k x" "thumb t x";}
.fx-thumb{grid-area:thumb;display:block;width:104px;height:68px;border-radius:10px;object-fit:cover;
  border:1px solid var(--line);}
.fx-row-m .fx-row-b{padding-left:126px;}
.fx-row-b .fx-prog{border-top:1px solid var(--line);padding-top:12px;font-size:.92rem;}
.fx-prog b{color:var(--ink);font-weight:600;}
.fx-prog a{color:var(--teal);white-space:nowrap;}

/* the process: six short lines, so it stays open */
.fx-steps{list-style:none;border-top:1px solid var(--line);}
.fx-steps li{display:grid;grid-template-columns:44px minmax(0,.85fr) minmax(0,1.3fr);gap:16px;align-items:baseline;
  padding:16px 2px;border-bottom:1px solid var(--line);}
.fx-steps .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;font-weight:700;color:var(--teal);}
.fx-steps h3{font-size:1rem;font-weight:700;}
.fx-steps p{color:var(--muted);font-size:.95rem;line-height:1.5;}

@media (max-width:880px){
  .fx-choices{grid-template-columns:1fr;gap:12px;}
  .fx-choice{min-height:0;gap:8px;padding:22px 78px 24px 22px;}
  .fx-choice-w{font-size:2.5rem;padding-right:0;}
  .fx-choice-d{font-size:1rem;margin-bottom:0;}
  .fx-go{position:absolute;right:20px;top:50%;margin-top:-20px;}
  .fx-group{grid-template-columns:1fr;gap:24px;}
  .fx-head{position:static;}
  .fx-thumb{width:72px;height:54px;}
  .fx-row-m>summary{column-gap:16px;}
  .fx-row-m .fx-row-b{padding-left:0;}
  .fx-steps li{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"n t" "n p";row-gap:4px;}
  .fx-steps .n{grid-area:n;}
  .fx-steps h3{grid-area:t;}
  .fx-steps p{grid-area:p;}
}