/* ══ HOME · 03 · FIVE DESKS, ONE OFFICE, ONE BY ONE ON THE SCROLL ═════════════════════════════════
   Christian, 29 Sep 2026: "we want the five desks to emerge when you scroll ... people having to
   click ... for each of them to continue". Nothing to press: the desks come to the visitor in turn.
   Home only; loaded after site.css, and adds the fd-* pieces only. Tokens only: every tint is a brand
   token, the desk grounds are the app's scene grounds (the platform's app.css, SCENES), and the
   pictures are the platform's (the map, the range, the line); money is shown on the map.
   Two ways of showing the same five desks, chosen by desks-home.js from the room there is:
     THE STAGE (.is-stage)   a desktop with the height for the window: one app window held still on
                             the right while the five questions pass on the left; the window changes
                             desk as each question reaches the middle of the screen, and the rail
                             over it fills as you go.
     THE FLOW (default)      anything narrower or shorter, and without the script: each desk in turn,
                             words then window; the window rises and its ground spreads out from
                             Freya's mark as it scrolls in (scroll-driven where the browser has it),
                             with the rail held under the bar.
   Layout is by container query, so a desk recomposes by the room it has, not the screen:
     the explorer (.fd-x, fdx)   the flow puts words beside the window from 860px of its own width
     the app (.fd-app, fdapp)    the map stands taller, the range and the names wrap, the line stands up
   Motion runs only while the section is on screen and never with reduced motion.
   A GLANCE (Christian, 29 Sep 2026: "too much text in and outside the visuals ... a quick scroll"):
   beside a window, its question, one line and the way inside; in it, the desk and its state, Freya's
   answer and the picture. The detail is on the desk pages. */

/* ── the head ── */
.fd{--fd-gap:var(--space-3)}
.fd .section-head .eyebrow{color:var(--text-link);margin-bottom:var(--space-4)}
.fd-head{margin-bottom:var(--space-6)}

/* ── the explorer ── --fd-top is the clearance under the bar, measured by the script (nav-site.js
   publishes it as scroll-padding-top); --fd-st is where the stage is held */
.fd-x{container:fdx / inline-size;--fd-top:96px}

/* ── the rail: the five desks in order, each with a bar that fills while its desk is on screen ── */
.fd-rail{container:fdrail / inline-size;margin:0 0 var(--space-6)}
.fd-rail ol{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-3)}
.fd-rail li{flex:1 1 0;min-width:0}
.fd-rail a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--space-2);row-gap:var(--space-2);
  min-height:var(--key-touch-target);padding:var(--space-1) 0 0;text-decoration:none;color:var(--text-tertiary);
  font:var(--weight-heading) var(--text-label)/1.2 var(--font);transition:color var(--t-state) var(--ease)}
.fd-rail .plate{width:20px;height:20px;margin:0;color:currentColor}
.fd-rail b{font-weight:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-bar{grid-column:1 / -1;display:block;height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.fd-bar i{display:block;height:100%;border-radius:inherit;background:var(--primary);transform-origin:left center;transform:scaleX(var(--f,0))}
.fd-rail a.is-on{color:var(--heading)}
.fd-rail a.is-on .plate{color:var(--heading)}
@media (hover:hover){.fd-rail a:hover{color:var(--text)}}
.fd-rail a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-chip)}

/* ── the flow: each desk in turn, its words then its window ── */
.fd-flow{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-8)}
.fd-c{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:center;min-width:0}
.fd-stage{display:none}
@container fdx (min-width:700px){
  .fd-x:not(.is-stage) .fd-c{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--space-5),4cqi,var(--space-7))}
}
/* the rail, while the desks flow: held under the bar on a pale glass, the open desk named */
.fd-x.is-js:not(.is-stage) .fd-rail{position:sticky;top:calc(var(--fd-top) - var(--space-2));z-index:5;margin-bottom:var(--space-7);
  padding:var(--space-1) var(--space-4) var(--space-2);border-radius:var(--r-card);border:var(--line-hairline) solid var(--border);
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 var(--space-3) var(--space-6) calc(var(--space-4) * -1) color-mix(in srgb,var(--primary-pressed) 30%,transparent)}
/* a narrow rail names only the open desk: the others keep their plate at a fixed width, and the open
   one takes the rest of the row, so its name always fits */
.fd-rail li{transition:flex-grow var(--t-move) var(--ease),flex-basis var(--t-move) var(--ease)}
@container fdrail (max-width:560px){
  .fd-x.is-js .fd-rail ol{gap:var(--space-2)}
  .fd-x.is-js .fd-rail li{flex:0 0 28px}
  .fd-x.is-js .fd-rail li:has(> a.is-on){flex:1 1 0}
  .fd-x.is-js .fd-rail a:not(.is-on) b{opacity:0}
  .fd-x.is-js .fd-rail a{grid-template-columns:20px minmax(0,1fr)}
}
/* a phone on its side: too little height to hold the rail as well as the bar, so it stays in place */
@media (max-height:520px){
  .fd-x.is-js:not(.is-stage) .fd-rail{position:static}
}

/* ── the stage: one app window held still while the five questions pass beside it ── */
.fd-x.is-stage .fd-flow{grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);column-gap:clamp(var(--space-6),5vw,var(--space-8));row-gap:0}
.fd-x.is-stage .fd-c{grid-column:1;display:flex;align-items:center;min-height:max(22rem,52svh)}
.fd-x.is-stage .fd-c[data-k="0"]{min-height:max(22rem,52svh,var(--fd-first,0px))}
.fd-x.is-stage .fd-c[data-k="4"]{min-height:max(26rem,64svh,var(--fd-last,0px))}
.fd-x.is-stage .fd-stage{display:block;grid-column:2;grid-row:1 / span 5;align-self:start;position:sticky;top:var(--fd-st,var(--fd-top))}
.fd-x.is-stage .fd-rail{margin-bottom:var(--space-3)}
/* the window: one frame, as tall as the desk it shows (the script sets the height, and it eases from
   desk to desk); the five desks sit in it, one shown, and pass through it with a short blur */
.fd-x.is-stage .fd-deck{--fd-pad:var(--space-4);position:relative;overflow:hidden;padding:var(--fd-pad);
  border:var(--line-object) solid var(--border-strong);border-radius:var(--r-card);background:var(--bg);
  box-shadow:0 var(--space-6) var(--space-8) calc(var(--space-6) * -1) color-mix(in srgb,var(--primary-pressed) 28%,transparent);
  transition:height 640ms var(--ease)}
.fd-x.is-stage .fd-deck > .fd-screen{position:absolute;top:var(--fd-pad);left:var(--fd-pad);right:var(--fd-pad);
  opacity:0;visibility:hidden;transform:translate3d(0,var(--fd-shift,32px),0) scale(.985);filter:blur(8px);
  transition:opacity 520ms var(--ease),transform 720ms var(--ease),filter 520ms var(--ease),visibility 0s linear 720ms}
.fd-x.is-stage .fd-deck > .fd-screen.is-before{--fd-shift:-32px}
.fd-x.is-stage .fd-deck > .fd-screen.is-on{position:relative;top:auto;left:auto;right:auto;
  opacity:1;visibility:visible;transform:none;filter:none;transition-delay:90ms,0s,90ms,0s}
.fd-x.is-stage .fd-deck .fd-app{border:0;border-radius:0;padding:0;background:none}
/* the window, drawn to fit a laptop's height: tighter margins, the answer on wider lines, the map a
   little lower (the script scales what is left over) */
.fd-x.is-stage .fd-app-h{margin-bottom:var(--space-3)}
.fd-x.is-stage .fd-scene{padding:var(--space-4) var(--space-5)}
.fd-x.is-stage .fd-rail a{min-height:40px}
.fd-x.is-stage :is(.fd-rg,.fd-ln-w,.fd-wl){padding:var(--space-3) var(--space-4)}
.fd-x.is-stage .fd-rg{gap:var(--space-2)}
.fd-x.is-stage .fd-fy{margin-bottom:var(--space-3)}
.fd-x.is-stage .fd-ans{max-width:34ch;margin-bottom:var(--space-4)}
@container fdapp (min-width:560px){.fd-x.is-stage .fd-tv{aspect-ratio:16 / 8}}
@container fdapp (max-width:559px){.fd-x.is-stage .fd-tv{aspect-ratio:4 / 3}}
/* a laptop short of height: the script gives the maps a height of their own */
.fd-x.is-stage .fd-tv{height:var(--fd-tvh)}
/* the questions: the one beside the window is read, the others wait in the margin of the eye */
.fd-x.is-stage .fd-words{opacity:.26;transform:translateY(var(--fd-wy,14px));transition:opacity 520ms var(--ease),transform 720ms var(--ease)}
.fd-x.is-stage .fd-c.is-before .fd-words{--fd-wy:-14px}
.fd-x.is-stage .fd-c.is-on .fd-words{opacity:1;transform:none}

/* ── the flow's entrance: the window rises into place and its ground spreads out from Freya's mark.
   Scroll-driven where the browser has it (the scroll itself is the timeline, so it runs backwards
   too); else a class, set by the script, starts the same movement once. ── */
@supports (animation-timeline: view()){
  .fd-x.is-anim:not(.is-stage) .fd-words{animation:fd-in-w linear both;animation-timeline:view();animation-range:entry 5% entry 85%}
  .fd-x.is-anim:not(.is-stage) .fd-screen{animation:fd-in-s linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .fd-x.is-anim:not(.is-stage) .fd-scene{animation:fd-flood linear both;animation-timeline:view();animation-range:entry 25% cover 40%}
}
@supports not (animation-timeline: view()){
  .fd-x.is-anim:not(.is-stage) .fd-screen{transition:opacity 700ms var(--ease),transform 900ms var(--ease)}
  .fd-x.is-anim:not(.is-stage) .fd-scene{transition:clip-path 1100ms var(--ease) 150ms}
  .fd-x.is-anim:not(.is-stage) .fd-screen:not(.is-in){opacity:0;transform:translateY(56px) scale(.94)}
  .fd-x.is-anim:not(.is-stage) .fd-screen:not(.is-in) .fd-scene{clip-path:circle(0% at var(--fd-o))}
  .fd-x.is-anim:not(.is-stage) .fd-screen.is-in .fd-scene{clip-path:circle(150% at var(--fd-o))}
}
.fd-scene{--fd-o:calc(clamp(var(--space-4),4cqi,var(--space-6)) + 18px) calc(clamp(var(--space-4),4cqi,var(--space-6)) + 18px)}
@keyframes fd-in-w{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fd-in-s{from{opacity:.15;transform:translateY(72px) scale(.93)}to{opacity:1;transform:none}}
@keyframes fd-flood{from{clip-path:circle(0% at var(--fd-o))}to{clip-path:circle(150% at var(--fd-o))}}

/* ── the words ── */
.fd-w-plate{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);
  font:var(--weight-heading) var(--text-label)/1 var(--font);letter-spacing:.12em;color:var(--text-tertiary)}
.fd-w-plate .plate{width:40px;height:40px;margin:0;color:var(--heading)}

/* ── the words ── */
.fd-words .eyebrow{color:var(--text-link);margin-bottom:var(--space-4)}
.fd .fd-words h3{font-size:var(--text-title);line-height:1.2;letter-spacing:var(--track-heading);margin:0 0 var(--space-4);max-width:18ch}
.fd-words p:where(:not(.eyebrow)){color:var(--text-secondary);font-size:var(--text-reading);margin:0 0 var(--space-5);max-width:40ch;text-wrap:balance}

/* ── the app, simplified: the desk's page head and Freya's scene on the desk's own ground ── */
.fd-screen{margin:0;min-width:0}
.fd-app{container:fdapp / inline-size;border:var(--line-object) solid var(--border-strong);border-radius:var(--r-card);background:var(--bg);
  padding:clamp(var(--space-4),2.2vw,var(--space-6))}
.fd-app-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4)}
.fd-app-h b{font:var(--weight-heading) var(--text-title)/1.1 var(--font);letter-spacing:var(--track-heading);color:var(--heading);margin-right:var(--space-1)}
/* its state, in a few words, as on the app's Home cards: what needs you in Champagne, all well in
   the green, a date to keep in grey */
.fd-st{display:inline-flex;align-items:center;white-space:nowrap;font:var(--weight-heading) var(--text-label)/1 var(--font);
  padding:7px 12px;border-radius:var(--r-pill);background:var(--bg-sunken);color:var(--text-secondary)}
.fd-st.ok{background:var(--primary-12);color:var(--text-selected)}
.fd-st.att{background:var(--gold-light);color:var(--black)}

/* the desk grounds are the app's own (app.css, SCENES): a brand token mixed into the page, and Records'
   pale blue, which the app took on the same day */
.fd-scene{--scene:color-mix(in srgb,var(--primary-48) 30%,var(--bg));border-radius:var(--r-card);background:var(--scene);
  padding:clamp(var(--space-4),4cqi,var(--space-6))}
/* Records: a pale blue at the lightness and quiet of the other four grounds (Christian, 29 Sep 2026:
   "change the background color of Records to a blue"); there is no blue token, so it is written
   here in OKLCH beside them: L 0.93, C 0.02, hue 245 */
.is-records .fd-scene{--scene:oklch(0.93 0.02 245)}
.is-policy .fd-scene{--scene:color-mix(in srgb,var(--gold-light) 32%,var(--bg))}
.is-investment .fd-scene{--scene:var(--primary-12)}
.is-protection .fd-scene{--scene:color-mix(in srgb,var(--d-real) 17%,var(--bg))}
.is-succession .fd-scene{--scene:color-mix(in srgb,var(--l-property) 13%,var(--bg))}
/* in dark, each desk keeps its own hue on the raised background, at one quiet level (the brand's
   dark scene and desk colour, components.css; Records' blue at the same depth) */
:root[data-mode="dark"] .fd-scene{--scene:color-mix(in srgb,var(--primary-48) 12%,var(--bg-raised))}
:root[data-mode="dark"] .is-records .fd-scene{--scene:oklch(0.29 0.03 245)}
:root[data-mode="dark"] .is-policy .fd-scene{--scene:color-mix(in srgb,var(--gold-light) 14%,var(--bg-raised))}
:root[data-mode="dark"] .is-protection .fd-scene{--scene:color-mix(in srgb,var(--d-real) 17%,var(--bg-raised))}
:root[data-mode="dark"] .is-succession .fd-scene{--scene:color-mix(in srgb,var(--l-property) 18%,var(--bg-raised))}

/* Freya's line: her mark, stateful as in the app (ready, thinking, answering), and who is speaking */
.fd-fy{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4)}
.fd-fy .eyebrow{min-width:0;color:var(--text-link);line-height:1.35;text-wrap:balance}
.fd-mk{width:36px;height:36px;flex:none;color:var(--heading);overflow:visible}
.fd-mk circle.r{fill:none;stroke:currentColor;stroke-width:2.6;transition:stroke-width var(--t-state) var(--ease)}
.fd-mk .core{fill:currentColor;fill-opacity:0;transition:fill-opacity var(--t-move) var(--ease)}
.fd-mk circle.r2{transform-box:fill-box;transform-origin:center}
.fd-mk[data-state="thinking"] circle.r2{stroke-dasharray:72 32;stroke-linecap:round;animation:fd-turn 2.4s linear infinite}
.fd-mk[data-state="answering"] .core{fill-opacity:.9}
.fd-mk[data-state="answering"] circle.r{stroke-width:3.1}
@keyframes fd-turn{to{transform:rotate(360deg)}}

.fd-ans{font:var(--weight-heading) min(var(--text-title),8.2cqi)/1.18 var(--font);letter-spacing:var(--track-heading);color:var(--heading);
  margin:0 0 var(--space-5);max-width:24ch;text-wrap:balance}
.fd-scene .eyebrow{color:var(--text-link)}

/* ── THE MAP · Finna's way of looking at money, as in the app (What you own, Your investments):
   flat blocks sized by value, each with its name, a line under it, its value and its share pinned
   bottom-right. What you own: one green in six steps, the darkest the largest. Investments: each
   asset class in its own colour, and the accounts and funds inside a class in shades of it
   (Christian, 29 Sep 2026). Selecting a block opens it into what it is made of, and the path above
   goes back; blocks travel between the two rather than redraw. Drawn by desks-home.js from the
   figures written into the page; without the script, the first level in one line. ── */
.fd-map{display:grid;gap:var(--space-2)}
/* the head, one line that never wraps (so the map never moves): the path and what it comes to, the
   hint to the right. A narrow map, once opened, gives the line to the path */
.fd-map-h{display:flex;align-items:baseline;gap:var(--space-3);min-width:0;
  font-size:var(--text-label);line-height:1.35;color:var(--text-secondary)}
.fd-crumbs{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-crumbs .sep{margin-inline:var(--space-2)}
.fd-crumbs [aria-current]{color:var(--heading);font-weight:var(--weight-heading)}
.fd-crumbs button{appearance:none;padding:0;border:0;background:none;font:inherit;color:var(--text-link);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fd-crumbs button:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
.fd-crumbs .sep{color:var(--text-tertiary)}
.fd-map-hint{flex:1 1 0;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-map-sum{flex:none;font-variant-numeric:tabular-nums}
.fd-map-hint{color:var(--text-tertiary)}
.fd-tv{--fd-gap:3px;--fd-tt:calc(var(--t-move) * 2.2);position:relative;width:100%;aspect-ratio:16 / 8.4}
.fd-tv.is-js:not(.ready){visibility:hidden}
.fd-b{position:absolute;margin:0;border:0;padding:var(--space-3) var(--space-3) var(--space-2);border-radius:var(--r-chip);
  background:var(--c);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;font:inherit;
  transition:left var(--fd-tt) var(--ease),top var(--fd-tt) var(--ease),width var(--fd-tt) var(--ease),height var(--fd-tt) var(--ease),
    opacity var(--t-move) var(--ease),background-color var(--fd-tt) var(--ease),outline-color var(--t-state) var(--ease);
  outline:2px solid transparent;outline-offset:2px}
.fd-b.is-leaf,.fd-b.is-tail{cursor:default}
@media (hover:hover){.fd-b:not(.is-leaf):not(.is-tail):hover{outline-color:var(--primary-48)}}
.fd-b:focus-visible{outline-color:var(--primary)}
.fd-b-in{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
.fd-b-in.is-arriving{animation:fd-fade var(--t-move) var(--ease) calc(var(--fd-tt) * .55) both}
.fd-b .n{font:var(--weight-label) var(--text-label)/1.25 var(--font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:none}
.fd-b .s{font-size:var(--text-label);line-height:1.35;opacity:.84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.fd-b .v{margin-top:var(--space-1);font:var(--weight-heading) var(--text-subhead)/1.1 var(--font);letter-spacing:var(--track-heading);white-space:nowrap;flex:none}
.fd-b .vs{display:none}
.fd-b .p{margin-top:auto;align-self:flex-end;padding-top:var(--space-1);font:var(--weight-label) var(--text-label)/1 var(--font);opacity:.86;white-space:nowrap;flex:none}
/* a block's words fit, or they step down: the short value, no second line, a smaller value, no share,
   less room, the smallest value; a block too small for its name shows how many it stands for */
.fd-b.fs .vf{display:none}
.fd-b.fs .vs{display:inline}
.fd-b.f1 .s{display:none}
.fd-b.f2 .v{font-size:var(--text-reading)}
.fd-b.f3 .p{display:none}
.fd-b.f4{padding:var(--space-2)}
.fd-b.f5 .v{font-size:var(--text-label)}
.fd-b.xs .fd-b-in{visibility:hidden}
.fd-b .x{display:none}
.fd-b.xs .x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:var(--weight-label) var(--text-label)/1 var(--font)}
/* what is too small to name on the map is named under it, quietly: its swatch, its name, its value */
.fd-map-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);margin:0;font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}
.fd-map-more[hidden]{display:none}
.fd-map-more span{display:inline-flex;align-items:center;gap:var(--space-2)}
.fd-map-more i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.fd-map-more b{color:var(--text);font-weight:var(--weight-label)}
/* without the script: the first level in one line */
.fd-tv-flat{list-style:none;margin:0;padding:0;display:flex;gap:3px;height:100%}
.fd-tv-flat li{flex:var(--v) 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;padding:var(--space-2);border-radius:var(--r-chip);
  background:var(--c);color:var(--ink);overflow:hidden;font-size:var(--text-label)}
.fd-tv-flat :is(b,span){font-weight:var(--weight-label);white-space:nowrap;overflow:hidden;text-overflow:clip}
@container fdapp (max-width:480px){.fd-tv{aspect-ratio:1 / 1.08}.fd-map-hint{display:none}.fd-map.is-deep .fd-map-sum{display:none}}
@container fdapp (max-width:340px){.fd-tv{aspect-ratio:1 / 1.2}}

/* ── POLICY · the range: the range the household wrote, its target, and where it is today ── */
.fd-rg{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.fd-rg .r{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) minmax(6.5rem,auto);grid-template-areas:"n t v";align-items:center;gap:2px var(--space-4)}
.fd-rg .rn{grid-area:n}.fd-rg .rt{grid-area:t}.fd-rg .rv{grid-area:v}
.fd-rg .rn{font:var(--weight-label) var(--text-label)/1.3 var(--font);color:var(--text)}
.fd-rg .rv{text-align:right;white-space:nowrap}
.fd-rg .rv b{font:var(--weight-heading) var(--text-reading)/1.1 var(--font);color:var(--heading)}
.fd-rg .rt{position:relative;height:20px;border-radius:var(--r-chip);background:var(--bg-sunken)}
.fd-rg .band{position:absolute;top:0;bottom:0;left:calc(var(--lo) * 1%);width:calc((var(--hi) - var(--lo)) * 1%);border-radius:var(--r-chip);background:var(--primary-24)}
.fd-rg .tgt{position:absolute;top:3px;bottom:3px;left:calc(var(--t) * 1%);width:2px;margin-left:-1px;background:var(--primary-72)}
.fd-rg .now{position:absolute;top:-3px;bottom:-3px;width:4px;margin-left:-2px;border-radius:2px;background:var(--heading);left:calc(var(--v) * 1%)}
.fd-rg .is-out .now{background:var(--gold)}
.fd-rg .is-out .rv b{color:var(--heading)}
.fd-rg .is-out .rv b::after{content:"Over";margin-left:var(--space-2);padding:3px 8px;border-radius:var(--r-pill);background:var(--gold-light);
  font:var(--weight-heading) var(--text-label)/1 var(--font);vertical-align:1px}
@container fdapp (max-width:470px){
  .fd-rg .r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t";row-gap:var(--space-1)}
  .fd-rg .r:nth-of-type(4){display:none}
}

/* ── PROTECTION · the line, lying down: the next twelve months, Today with its halo, what needs you in Bullion ── */
.fd-ln-w{padding:var(--space-4);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.fd-ln{--dot:12px;list-style:none;margin:0;padding:0;position:relative}
/* a column by default: the line down the left, a moment per row */
.fd-ln::before{content:"";position:absolute;left:calc(var(--dot) / 2 - 1px);top:6px;bottom:6px;width:2px;background:var(--primary-24);transform-origin:top}
.fd-ln li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-4);align-items:baseline;padding:0 0 var(--space-4) calc(var(--dot) + var(--space-3))}
.fd-ln li:last-child{padding-bottom:0}
.fd-ln li::before{content:"";position:absolute;left:0;top:5px;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--primary-72);box-shadow:0 0 0 3px var(--scene)}
.fd-ln li.is-today::before{background:var(--heading)}
.fd-ln li.is-att::before{background:var(--gold)}
.fd-ln b{font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading);white-space:nowrap}
.fd-ln span{font-size:var(--text-label);line-height:1.45;color:var(--text-secondary)}
.fd-ln em{font-style:normal;font-size:var(--text-label);font-weight:var(--weight-heading);color:var(--text)}
.fd-ln-ax{display:none}
/* wide: the line lies down, the year under it, labels above and below so they never meet */
@container fdapp (min-width:560px){
  .fd-ln{height:176px}
  .fd-ln::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin-top:-1px;transform-origin:left}
  .fd-ln li{position:absolute;left:calc(var(--x) * 1%);top:50%;display:flex;flex-direction:column;gap:2px;width:max-content;max-width:11rem;padding:0;
    transform:translate(-6px,calc(-100% - var(--space-4)))}
  .fd-ln li.below{transform:translate(-6px,var(--space-4))}
  .fd-ln li::before{top:auto;bottom:calc(var(--space-4) * -1 - var(--dot) / 2);left:0}
  .fd-ln li.below::before{bottom:auto;top:calc(var(--space-4) * -1 - var(--dot) / 2)}
  .fd-ln-ax{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:var(--space-2);padding-top:var(--space-2);border-top:var(--line-hairline) solid var(--border);
    font-size:var(--text-label);color:var(--text-secondary)}
  .fd-ln-ax span{padding-left:4px;border-left:var(--line-hairline) solid var(--border)}
}

/* ── SUCCESSION · the will's line: signed, what changed, today, and the next reading. Standing up
   when narrow; wide, it lies along one line in four even steps ── */
.fd-wl{padding:var(--space-4);border-radius:var(--r-tile);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.fd-wl-l{--dot:12px;list-style:none;margin:0;padding:0;position:relative}
.fd-wl-l li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--dot) / 2 - 1px);top:calc(4px + var(--dot));bottom:-4px;width:2px;background:var(--primary);transform-origin:top}
.fd-wl-l li.today::after{width:0;background:none;border-left:2px dashed var(--primary-48)}
.fd-wl-l li{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 var(--space-3) calc(var(--dot) + var(--space-3))}
.fd-wl-l li:last-child{padding-bottom:0}
.fd-wl-l li::before{content:"";position:absolute;left:0;top:4px;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--bg) 80%,var(--scene))}
.fd-wl-l li.today::before{background:var(--heading)}
.fd-wl-l li.ahead::before{background:var(--bg);box-shadow:inset 0 0 0 2px var(--primary-48),0 0 0 3px color-mix(in srgb,var(--bg) 80%,var(--scene))}
.fd-wl-l b{font:var(--weight-heading) var(--text-reading)/1.3 var(--font);color:var(--heading)}
.fd-wl-l span{font-size:var(--text-label);line-height:1.4;color:var(--text-secondary)}
@container fdapp (min-width:560px){
  .fd-wl-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-4)}
  .fd-wl-l li,.fd-wl-l li:last-child{padding:calc(var(--dot) + var(--space-3)) 0 0}
  .fd-wl-l li::before{top:0}
  .fd-wl-l li:not(:last-child)::after{left:calc(var(--dot) + 4px);right:calc(4px - var(--space-4));top:calc(var(--dot) / 2 - 1px);bottom:auto;width:auto;height:2px;transform-origin:left}
  .fd-wl-l li.today::after{height:0;border-left:0;border-top:2px dashed var(--primary-48)}
}


/* ── the caption, the three facts under the desks, and the one key ── */
.fd-cap{margin:var(--space-6) 0 0;font-size:var(--text-label);line-height:1.5;color:var(--text-secondary);max-width:none;text-wrap:balance}

.fd-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-7)}
.fd-facts li{padding-top:var(--space-4)}
.fd .center-cta{margin-top:var(--space-7)}

/* ══ MOTION ═ a desk arriving (.is-wait, then .is-live): Freya thinks, answers, and the picture plays.
   On the stage it plays each time the window changes desk; in the flow, once, as the desk scrolls in ═ */
.fd-x .fd-ans,.fd-x .fd-st{transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.fd-screen.is-wait .fd-ans{opacity:0;transform:translateY(8px)}
.fd-screen.is-wait .fd-st{opacity:0;transform:scale(.9)}
.fd-screen.is-live .fd-st{transition-delay:520ms}
.fd-screen.is-wait .fd-rg .band{transform:scaleX(0)}
.fd-screen.is-wait .fd-ln li,.fd-screen.is-wait .fd-wl-l li,.fd-screen.is-wait .fd-map-h{opacity:0}
.fd-screen.is-wait .fd-ln::before{transform:scaleX(0)}
@container fdapp (max-width:559px){.fd-screen.is-wait .fd-ln::before{transform:scaleY(0)}}
/* the map fills upward, block by block, the largest first (.is-rise, set by the script as the desk arrives) */
.fd-screen.is-wait .fd-b{clip-path:inset(100% 0 0 0 round var(--r-chip))}
.fd-tv.is-rise .fd-b{animation:fd-rise 620ms var(--ease) both;animation-delay:calc(140ms + var(--i) * 70ms)}
@keyframes fd-rise{from{clip-path:inset(100% 0 0 0 round var(--r-chip))}to{clip-path:inset(0 0 0 0 round var(--r-chip))}}
.fd-tv.is-rise .fd-b-in{animation:fd-fade 360ms var(--ease) both;animation-delay:calc(440ms + var(--i) * 70ms)}
.fd-screen.is-live .fd-map-h{transition:opacity 420ms var(--ease) 200ms}
@keyframes fd-fade{from{opacity:0}to{opacity:1}}
/* the range: the band arrives, and the marker slides from the target to today */
.fd-screen.is-wait .fd-rg .now{left:calc(var(--t) * 1%);opacity:0}
.fd-screen.is-live .fd-rg .now{transition:left 900ms var(--ease) 420ms,opacity 200ms var(--ease) 300ms}
.fd-screen.is-live .fd-rg .band{animation:fd-grow 520ms var(--ease) both 200ms;transform-origin:left center}
@keyframes fd-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* outside its range: a slow Bullion pulse, as on Drift, while the section is on screen */
.fd.is-seen .fd-screen.is-live .fd-rg .is-out .now{animation:fd-halo 2.4s var(--ease) 1.4s infinite}
@keyframes fd-halo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 0%,transparent)}}
/* the lines draw, then their moments arrive in order */
.fd-screen.is-live .fd-ln::before{animation:fd-draw-x 900ms var(--ease) both 260ms}
@container fdapp (max-width:559px){.fd-screen.is-live .fd-ln::before{animation-name:fd-draw-y}}
@keyframes fd-draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fd-draw-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.fd-screen.is-live .fd-ln li,.fd-screen.is-live .fd-wl-l li{animation:fd-fade 420ms var(--ease) both;animation-delay:calc(360ms + var(--i) * 160ms)}
.fd.is-seen .fd-screen.is-live .fd-ln li.is-today::before,.fd.is-seen .fd-screen.is-live .fd-wl-l li.today::before{animation:fd-today 2.4s var(--ease) 1.2s infinite}
@keyframes fd-today{0%,100%{box-shadow:0 0 0 3px var(--scene),0 0 0 3px color-mix(in srgb,var(--heading) 30%,transparent)}50%{box-shadow:0 0 0 3px var(--scene),0 0 0 9px color-mix(in srgb,var(--heading) 0%,transparent)}}
.fd.is-seen .fd-screen.is-live .fd-ln li.is-att::before{animation:fd-halo 2.4s var(--ease) 1.6s infinite}
.fd-screen.is-live .fd-wl-l li::after{animation:fd-draw-y 360ms var(--ease) both;animation-delay:calc(420ms + var(--i) * 160ms)}
@container fdapp (min-width:560px){.fd-screen.is-live .fd-wl-l li::after{animation-name:fd-draw-x}}
/* the loops (a Bullion pulse, Today's halo) run only while the section is on screen: .is-seen, set by the script */
@media (prefers-reduced-motion:reduce){
  .fd *,.fd *::before,.fd *::after{animation:none!important;transition:none!important}
  .fd-x.is-stage .fd-deck > .fd-screen{filter:none;transform:none}
  .fd-x.is-stage .fd-deck{transition:none}
  .fd-x.is-stage .fd-words{transform:none}
  .fd-screen.is-wait :is(.fd-ans,.fd-st){opacity:1;transform:none}
  .fd-screen.is-wait .fd-b{clip-path:none}
  .fd-screen.is-wait .fd-rg .now{left:calc(var(--v) * 1%);opacity:1}
  .fd-screen.is-wait .fd-rg .band,.fd-screen.is-wait .fd-ln::before{transform:none}
  .fd-screen.is-wait .fd-ln li,.fd-screen.is-wait .fd-wl-l li,.fd-screen.is-wait .fd-map-h{opacity:1}
}

/* ══ A TABLET AND A PHONE ═════════════════════════════════════════════════════════════════════ */
@media (max-width:1099px){
  .fd-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
}
/* a phone: loose words centre, the window does not; the desks sit a little closer */
@media (max-width:700px){
  .fd-head{margin-bottom:var(--space-5)}
  .fd-flow{row-gap:var(--space-7)}
  .fd-c{gap:var(--space-5)}
  .fd-x.is-js:not(.is-stage) .fd-rail{margin-inline:calc(var(--space-2) * -1);padding-inline:var(--space-3);margin-bottom:var(--space-6)}
  .fd-words{text-align:center}
  .fd-w-plate{display:none}
  .fd .fd-words h3,.fd-words p{margin-inline:auto}
  .fd-words .link{margin-inline:auto}
  .fd-app{padding:var(--space-3)}
  .fd-app-h b{font-size:var(--text-subhead)}
  .fd-scene{padding:var(--space-4)}
  .fd-cap{text-align:center}
  .fd-facts{gap:var(--space-3);margin-top:var(--space-6)}
  .fd-facts li{padding-top:var(--space-3);text-align:center;align-items:center}
  .fd-facts b{font-size:var(--text-reading)}
  .fd .center-cta{margin-top:var(--space-6)}
}