/* Coverage page: the briefing builder. Loads after index.css, whose tokens, slim bar and footer it uses. */
html,body{overflow-x:clip}
body{background:var(--bone);min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;display:flex;flex-direction:column}
/* the band takes any height the window has to spare, so the space above the footer is always its colour */
body>main>.fb{flex:1 0 auto}

/* ── full-bleed band: field, the ask on it, then the package ─────────── */
.fb{position:relative;background:#141017;color:var(--bone);scroll-margin-top:56px}
.fb > *{position:relative}
.fb-field{height:clamp(620px,78vh,820px)}
.fb-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg,#000 0,#000 72%,transparent 100%),linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-composite:intersect}
/* the field is the hero: its words sit on it, centred, near the top */
.fb-hero{position:absolute;left:0;right:0;top:clamp(56px,9vh,96px);z-index:2;width:min(900px,calc(100% - 40px));margin:0 auto;text-align:center;pointer-events:none}
.fb-eb{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#BFD8CC}
.fb-eb::before,.fb-eb::after{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.fb-hero h1{margin-top:20px;font-size:clamp(42px,5.4vw,76px);line-height:1.03;letter-spacing:-.028em;color:#F6F2EA;text-shadow:0 2px 24px rgba(20,16,23,.9)}
.fb-hero p{margin:20px auto 0;max-width:34em;font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:rgba(242,240,234,.8);text-shadow:0 1px 16px rgba(20,16,23,.95)}
.fb-hero .fb-say{margin-top:26px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,240,234,.45)}
.fb-ask{position:relative;z-index:3;width:min(860px,calc(100% - 40px));margin:-130px auto 0;padding-bottom:64px}
/* the composer: the homepage's briefing package box, here waiting for the visitor to write one */
.fb-input{padding:18px 22px 18px;border-radius:16px;background:rgba(242,240,234,.09);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(242,240,234,.24);box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s ease,box-shadow .25s ease}
.fb-input:focus-within{border-color:rgba(242,240,234,.48);box-shadow:0 0 0 4px rgba(227,198,216,.12),0 40px 80px -40px rgba(0,0,0,.85)}
.fb-ihead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(242,240,234,.1)}
.fb-ilab{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.62)}
.fb-status{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,240,234,.5);white-space:nowrap}
.fb-status::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(242,240,234,.35)}
.fb-status.is-building{color:#E6C39F}
.fb-status.is-building::before{background:#C9A27A;animation:fbPulse 1.4s ease-in-out infinite}
.fb-status.is-ready{color:#BFD8CC}
.fb-status.is-ready::before{background:#9DBBAD}
@keyframes fbPulse{50%{opacity:.3}}
.fb-irow{display:flex;align-items:flex-end;gap:14px}
.fb-ta{position:relative;flex:1;min-width:0}
.fb-ta textarea,.fb-hl{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.38;letter-spacing:-.008em;
  padding:2px 0;margin:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.fb-hl{position:absolute;inset:0;pointer-events:none;color:#F6F2EA;overflow:hidden}
.fb-hl .j{color:#F2BEDF}.fb-hl .a{color:#A8E3C9}.fb-hl .d{color:#F7C894}
.fb-ta textarea{position:relative;display:block;width:100%;border:0;outline:0;resize:none;overflow:hidden;background:transparent;
  color:transparent;caret-color:#F6F2EA;min-height:66px}
.fb-ta textarea::placeholder{color:rgba(242,240,234,.45)}
.fb-ta textarea::selection{background:rgba(227,198,216,.3);color:transparent}
.fb-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:100px;background:var(--bone);
  color:var(--charcoal);font:500 14.5px var(--sans);cursor:pointer;transition:background .2s ease,opacity .2s ease}
.fb-go:not([disabled]):hover{background:#fff}
/* Working, the button keeps its words and its shape — the status line above says what is happening —
   and only its arrow changes: a small ring turning in the arrow's place, the button dimmed. */
.fb-go[disabled]{opacity:.7;cursor:default}
.fb-go__arr{display:inline-grid;place-items:center;width:1em;height:1em}
.fb-go[disabled] .fb-go__arr{color:transparent;border:1.5px solid currentColor;border-radius:50%;
  border-color:rgba(31,29,26,.25) rgba(31,29,26,.25) var(--charcoal) var(--charcoal);animation:fbTurn .9s linear infinite}
.fb:not(.is-dark) .fb-go[disabled] .fb-go__arr{border-color:rgba(242,240,234,.3) rgba(242,240,234,.3) var(--bone) var(--bone)}
@keyframes fbTurn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fb-go[disabled] .fb-go__arr{animation:none;border-color:currentColor}}
@media(prefers-reduced-motion:reduce){.fb-status.is-building::before{animation:none}}
.fb-eg{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin-top:16px}
.fb-eg span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,240,234,.45);margin-right:4px}
.fb-eg button{all:unset;cursor:pointer;padding:7px 14px;border:1px solid rgba(242,240,234,.22);border-radius:100px;font-size:13.5px;color:rgba(242,240,234,.85);
  transition:border-color .2s ease,background .2s ease}
.fb-eg button:hover{border-color:rgba(242,240,234,.6);background:rgba(242,240,234,.06)}

/* the package unfolds below, across the page */
.fp{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1s cubic-bezier(.22,.61,.36,1)}
.fp.is-in{grid-template-rows:1fr}
.fp > div{overflow:hidden}
.fp-in{width:min(1240px,calc(100% - 48px));margin:0 auto;padding:8px 0 110px}
.fk{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,240,234,.5)}
.fp-head{display:grid;grid-template-columns:1fr;gap:24px 48px;align-items:end;padding-top:56px;border-top:1px solid var(--line-dark)}
.fp-name{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,56px);line-height:1.06;letter-spacing:-.025em;color:#F6F2EA;max-width:16em}
.fp-mk{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fp-mk span{padding:7px 14px;border-radius:100px;border:1px solid rgba(227,198,216,.45);background:rgba(227,198,216,.08);
  font-family:var(--serif);font-size:16px;color:#F1E2EB}
.fw-mk{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:100px;background:rgba(242,240,234,.1);border:1px solid rgba(242,240,234,.22);
  font-size:11.5px;font-weight:500;letter-spacing:.02em;color:#F6F2EA}
.fw-t .fw-mks{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 9px}
.fw-t .fw-mk{display:inline-block;margin:0;font-size:12px;font-weight:500;letter-spacing:.02em;text-transform:none;color:#F6F2EA}
.fp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:22px}
.fp-row .fp-mk{margin-top:0}
.fp-cta{display:flex;align-items:center;gap:22px}
.fp-cta a,.fp-end a{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:100px;background:var(--bone);color:var(--charcoal);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.fp-cta button,.fp-end button{all:unset;cursor:pointer;font-size:13px;color:rgba(242,240,234,.6);border-bottom:1px solid rgba(242,240,234,.28)}

.fs{display:grid;grid-template-columns:260px 1fr;gap:24px 56px;margin-top:72px}
.fs-k h3{margin-top:12px;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.016em;color:#F6F2EA}
.fs-k p{margin:12px 0 0;font-size:14px;line-height:1.6;color:rgba(242,240,234,.55)}

/* 1 · what Kai will watch */
.fw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.fw li{display:grid;grid-template-columns:18px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line-dark)}
.fw-dot{width:11px;height:11px;margin-top:8px;border-radius:2px;background:var(--c);box-shadow:0 0 14px var(--c);opacity:0;transition:opacity .2s ease}
.fw li.is-on .fw-dot{opacity:1}
.fw-t{opacity:0;transform:translateX(-4px);transition:opacity .5s ease,transform .5s ease}
.fw li.is-on .fw-t{opacity:1;transform:none}
.fw-t b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;letter-spacing:-.01em;color:#F6F2EA}
.fw-t p{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:rgba(242,240,234,.66)}
.fw-t span{display:block;margin-top:9px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}

/* 2 · a sample briefing, set like the product: masthead, a lead, two beside it */
.fbr{border-radius:18px;background:#FBFAF6;color:var(--ink);box-shadow:0 50px 90px -50px rgba(0,0,0,.85);overflow:hidden;
  opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.fbr.is-on{opacity:1;transform:none}
.fbr-mast{display:flex;align-items:baseline;gap:14px;padding:18px 32px;border-bottom:1px solid var(--ink)}
.fbr-brand{font-family:var(--serif);font-size:20px;letter-spacing:-.01em}
.fbr-mast span:not(.fbr-brand){font-size:12.5px;color:var(--muted)}
.fbr-mast em{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fbr-lead{padding:30px 32px 28px;border-bottom:1px solid var(--line-strong)}
.fbr-tag{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.fbr-lead h4{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,33px);line-height:1.15;letter-spacing:-.018em;max-width:20em}
.fbr-lead p{margin:14px 0 0;max-width:44em;font-family:var(--serif);font-size:17.5px;line-height:1.5;color:#3A3631}
.fbr-why{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c);margin-right:8px}
.fbr-two{display:grid;grid-template-columns:1fr 1fr}
.fbr-two > div{padding:24px 32px 28px}
.fbr-two > div + div{border-left:1px solid var(--line-strong)}
.fbr-two h4{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;letter-spacing:-.01em}
.fbr-two p{margin:10px 0 0;font-size:14px;line-height:1.55;color:#4A4640}
/* 3 · how it reaches you */
.fh{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.fh div{padding-top:18px;border-top:1px solid rgba(242,240,234,.3)}
/* how often each arrives, above its name */
.fh-when{display:block;margin-bottom:9px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sh-chip,#F1E2EB);opacity:.8}
.fh b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:-.012em;color:#F6F2EA}
.fh p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:rgba(242,240,234,.66)}
.fp-end{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:72px;padding-top:36px;border-top:1px solid var(--line-dark)}
.fp-end p{margin:0 auto 0 0;font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);color:#F6F2EA}

/* a peek: now and then, or under the cursor, a tile opens onto one thing Kai watches */
.pk{position:absolute;z-index:2;width:max-content;max-width:260px;padding:11px 15px 12px;border-radius:12px;pointer-events:none;
  background:rgba(30,24,33,.66);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(242,240,234,.13);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.85);opacity:0;transform:translateY(6px) scale(.985);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.pk.is-on{opacity:1;transform:none}
.pk span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.pk b{display:block;margin-top:5px;font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.3;letter-spacing:-.006em;color:#F4F1EA}
.fly{position:absolute;z-index:5;border-radius:2px;pointer-events:none;box-shadow:0 0 16px currentColor}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .fs{grid-template-columns:1fr;margin-top:56px}.fw{grid-template-columns:1fr}.fh{grid-template-columns:1fr;gap:22px}
  .fp-head{grid-template-columns:1fr}
}
@media(max-width:640px){
  .fb-irow{flex-direction:column;align-items:stretch}.fb-go{justify-content:center}
  .fb-ask{margin-top:-100px}
  .fbr-two{grid-template-columns:1fr}.fbr-two > div + div{border-left:0;border-top:1px solid var(--line-strong)}
  .fbr-mast,.fbr-lead,.fbr-two > div{padding-left:20px;padding-right:20px}
}

/* ── the hero, lit rather than lifted: the same ink, clean jewel glows (no bronze), brighter words ── */
.fb{background:#140F18}
.fb-hero p{color:rgba(242,240,234,.88)}
.fb-hero .fb-say{color:rgba(242,240,234,.58)}
.fb-eg span{color:rgba(242,240,234,.58)}

/* ── variant B: the package arrives as a document, a sheet raised on the dark, in one of several colours ── */
.fp-in{--sh-bg:#2B2232;--sh-ink:#F8F4EC;--sh-mut:rgba(248,244,236,.74);--sh-line:rgba(248,244,236,.13);--sh-line2:rgba(248,244,236,.24);
  --sh-chip:#F1E2EB;--sh-chipb:rgba(227,198,216,.45);--sh-chipbg:rgba(227,198,216,.09);--sh-mk:rgba(248,244,236,.09);
  --sh-cta:#F2F0EA;--sh-ctac:#1F1D1A;--sh-glow:rgba(150,84,130,.5);--sh-g1:rgba(160,88,138,.34);--sh-g2:rgba(78,150,124,.16);--sh-edge:rgba(255,255,255,.1)}
.fw li{--c:var(--cl)}
.fp-in{margin:8px auto 96px;padding:60px 64px 64px;border-radius:24px;color:var(--sh-ink);
  background:radial-gradient(70% 34% at 18% 0%,var(--sh-g1),transparent 72%),
    radial-gradient(55% 30% at 92% 46%,var(--sh-g2),transparent 72%),
    radial-gradient(60% 26% at 30% 100%,var(--sh-g1),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%);
  background-color:var(--sh-bg);
  box-shadow:inset 0 0 0 1px var(--sh-edge),inset 0 1px 0 rgba(255,255,255,.16),0 60px 100px -50px rgba(0,0,0,.9),0 0 120px -30px var(--sh-glow);transition:background .4s ease}
.fp .fk{color:var(--sh-mut)}
.fp-head{border-top:0;padding-top:0}
.fp-name,.fs-k h3,.fw-t b,.fh b,.fp-end p{color:var(--sh-ink)}
.fs-k p,.fw-t p,.fh p{color:var(--sh-mut)}
.fp-mk span{border-color:var(--sh-chipb);background:var(--sh-chipbg);color:var(--sh-chip)}
.fs{margin-top:60px;padding-top:44px;border-top:1px solid var(--sh-line)}
.fw li{border-top-color:var(--sh-line)}
.fw li:nth-child(-n+2){border-top:0;padding-top:4px}
.fw-t .fw-mk{background:var(--sh-mk);border-color:var(--sh-line2);color:var(--sh-ink)}
.fbr{box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.fh div{border-top-color:var(--sh-line2)}
.fp-end{border-top-color:var(--sh-line)}
.fp-cta a,.fp-end a{background:var(--sh-cta);color:var(--sh-ctac)}
.fp-cta button,.fp-end button{color:var(--sh-mut);border-bottom-color:var(--sh-line2)}
@media(max-width:900px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.fw li:nth-child(2){border-top:1px solid var(--sh-line);padding-top:20px}}
@media(max-width:640px){.fp-in{width:calc(100% - 24px);padding:32px 22px 36px;border-radius:18px}}

/* The hero's light: three soft pools of colour inside the field. The field never changes
   height, and each pool fades to nothing within itself, so there is no edge to catch. They
   drift slowly on their own paths, and settle a little as Kai reads the description. */
.fb-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity 1.8s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.fb-glow i{position:absolute;border-radius:50%;will-change:transform}
.fb-glow .g1{left:-14%;top:-30%;width:66%;height:100%;
  background:radial-gradient(closest-side,rgba(150,84,130,.58),rgba(150,84,130,.22) 55%,transparent);animation:fbG1 46s ease-in-out infinite alternate}
.fb-glow .g2{right:-12%;top:-16%;width:52%;height:84%;
  background:radial-gradient(closest-side,rgba(78,150,124,.30),rgba(78,150,124,.10) 55%,transparent);animation:fbG2 38s ease-in-out infinite alternate}
.fb-glow .g3{left:28%;top:44%;width:46%;height:60%;
  background:radial-gradient(closest-side,rgba(150,84,130,.16),transparent);animation:fbG3 54s ease-in-out infinite alternate}
@keyframes fbG1{0%{transform:translate(0,0)}50%{transform:translate(5%,4%)}100%{transform:translate(2%,8%)}}
@keyframes fbG2{0%{transform:translate(0,0)}50%{transform:translate(-6%,5%)}100%{transform:translate(-2%,-3%)}}
@keyframes fbG3{0%{transform:translate(0,0)}50%{transform:translate(-8%,-6%)}100%{transform:translate(6%,-2%)}}
.fb.is-built .fb-glow{opacity:.78}
@media(prefers-reduced-motion:reduce){.fb-glow i{animation:none}}

/* The package rises into place rather than being wiped open: it fades and lifts while the
   space for it opens, and once open nothing clips it, so its own glow is whole. */
.fp-in{margin-top:36px;opacity:0;transform:translateY(32px);
  transition:opacity .9s ease .12s,transform 1.2s cubic-bezier(.22,.61,.36,1) .08s,background .4s ease}
.fp.is-in .fp-in{opacity:1;transform:none}
.fp.is-open > div{overflow:visible}
.fp-in{scroll-margin-top:96px}

/* Leading the eye to the package below the fold: light spills down toward it, and,
   if it is out of view once ready, a cue at the foot of the screen. */
.fb-spill{position:absolute;left:14%;right:14%;pointer-events:none;transform-origin:50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(160,88,138,.36),rgba(78,150,124,.12) 62%,transparent);filter:blur(12px)}
.fb-cue{position:fixed;left:50%;bottom:22px;z-index:25;display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 16px;
  border:1px solid rgba(242,240,234,.22);border-radius:100px;background:rgba(30,24,36,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#F6F2EA;font:500 14px var(--sans);white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%,16px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7),0 0 44px -12px rgba(160,88,138,.7);transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.fb-cue::before{content:"";width:8px;height:8px;border-radius:2px;background:#E3C6D8;box-shadow:0 0 10px #E3C6D8}
.fb-cue.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.fb-cue span{display:inline-block;animation:fbCue 1.8s ease-in-out infinite}
@keyframes fbCue{50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.fb-cue span{animation:none}}

/* The top, as on the landing page's hero: the field carries its own nav, the wordmark centred
   in white with the way in at the right, and the slim bar waits above the window until the
   field has scrolled away. Here the bar is dark glass, since the page under it is dark. */
.fb-nav{position:absolute;top:34px;left:0;right:0;z-index:4;display:flex;justify-content:center;align-items:center}
.fb-nav img{display:block;height:23.4px;opacity:.96}
.fb-links{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:26px;font-size:13.5px}
.fb-links a:not(.signin){color:rgba(247,245,240,.72);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;transition:color .18s ease}
.fb-links a:not(.signin):hover{color:#F7F5F0}
.fb-links a[aria-current=page]{color:#F7F5F0;border-bottom-color:rgba(247,245,240,.5)}
.fb-nav .signin{color:#F7F5F0;text-decoration:none;
  border:1px solid rgba(244,244,246,.6);border-radius:8px;padding:8px 18px;font-size:14px;line-height:20px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
/* on hover it fills with its outline's colour and its type turns over */
.fb-nav .signin:hover{background:#F7F5F0;border-color:#F7F5F0;color:#1F1D1A}
.fb-hero{top:clamp(108px,14vh,148px)}
.fb{scroll-margin-top:0}
.kw-bar.is-dark{background:rgba(22,17,26,.84);border-bottom-color:rgba(242,240,234,.1)}
.kw-bar.is-dark .kw-bar__links a,.kw-bar.is-dark .kw-bar__signin{color:rgba(242,240,234,.66)}
.kw-bar.is-dark .kw-bar__links a:hover,.kw-bar.is-dark .kw-bar__signin:hover{color:#F7F5F0}
.kw-bar.is-dark .kw-bar__ask{background:var(--bone);color:var(--charcoal);border-color:var(--bone)}
.kw-bar.is-dark .kw-bar__ask:hover{background:#fff}
.kw-bar.is-dark .kw-bar__links a[aria-current=page]{color:#F7F5F0}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.fb-links{right:22px}}

/* the hero's links in the house nav style: small, spaced capitals, as in the slim bar */
.fb-links{gap:28px}
.fb-links a,.fb-nav .signin{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.fb-links a:not(.signin){padding:5px 0}
.fb-nav .signin{padding:9px 14px 9px 15px}

/* a short fade at the very top, as on the landing page's hero, so the nav reads over the tiles;
   it sits beneath the hero's words and is gone before the headline */
.fb-field::after{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,12,19,.78) 0%,rgba(16,12,19,.5) 40%,rgba(16,12,19,0) 100%)}

/* on a phone, the composer's label and status stack rather than squeeze, and the box opens tall
   enough for the whole placeholder */
@media(max-width:640px){
  .fb-ihead{flex-wrap:wrap;gap:6px 16px}
  .fb-ilab{white-space:nowrap}
  .fb-ta textarea{min-height:96px}
}

/* ── an inner page: Leadership's header and scale, the title and composer in the page column,
   the field kept as the page's ground ── */
.fb-field{height:auto;padding-bottom:76px}
.pg-back{position:absolute;left:34px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;margin-left:-10px;font-size:13.5px;color:rgba(247,245,240,.72);text-decoration:none;transition:color .16s ease}
.pg-back span{transition:transform .22s ease}
.pg-back:hover{color:#F7F5F0}
.pg-back:hover span{transform:translateX(-3px)}
/* the title and composer share the sheet's inner edge, so the page reads down one line */
.fb-hero.pg-head{position:relative;top:auto;left:auto;right:auto;width:min(1112px,calc(100% - 176px));margin:0 auto;
  padding-top:126px;text-align:left}
.pg-head .fb-eb{display:block;margin:0;font-size:10px;letter-spacing:.2em;color:#DDBFD2}
.pg-head .fb-eb::before,.pg-head .fb-eb::after{content:none}
.fb-hero.pg-head h1{margin-top:18px;max-width:14em;font-size:clamp(30px,3.4vw,52px);line-height:1.08;letter-spacing:-.024em;
  text-shadow:0 2px 24px rgba(20,16,23,.6)}
.fb-hero.pg-head p{margin:18px 0 0;max-width:31em;font-size:clamp(17px,1.35vw,20px);line-height:1.5;text-wrap:pretty}
.fb-ask{width:min(1112px,calc(100% - 176px));margin:38px auto 0;padding-bottom:0}
.fb-input{max-width:860px}
/* the note under the composer: small print, as wide as the composer, on the field's own halo so it reads over the tiles */
.fb-note{max-width:860px;margin:14px 0 0;padding-left:6px;font-size:12px;line-height:1.55;color:rgba(242,240,234,.62);text-wrap:pretty}
.fb-eg{justify-content:flex-start}
@media(max-width:820px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.pg-back{left:22px}}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){.fb-links a:not(.signin){display:none}}
@media(max-width:640px){.fb-ask{margin-top:28px;width:calc(100% - 40px)}.fb-hero.pg-head{padding-top:100px;width:calc(100% - 40px)}.fb-field{padding-bottom:56px}}

/* ── the sample requests, under the composer ── */
.fb-field{padding-bottom:24px}
/* the samples: on the field's ground, in the page column, a list of requests in two columns */
.sg{scroll-margin-top:64px}
.sg-in{width:min(1112px,calc(100% - 176px));margin:0 auto;padding:12px 0 120px}
.sg-head{max-width:40em;padding-top:14px}
.sg-eb{margin:0;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#DDBFD2}
@media(max-width:640px){.sg-in{width:calc(100% - 40px);padding-bottom:88px}}

/* ── lights down: the page arrives on bone, as part of the site; it goes dark when the
   visitor starts to write, spreading out from the composer, and comes back up on Start over ── */
.fb{background:var(--bone);color:var(--ink)}
.fb-glow:not(.fb-glow--night) .g1{background:radial-gradient(closest-side,rgba(150,84,130,.12),rgba(150,84,130,.04) 55%,transparent)}
.fb-glow:not(.fb-glow--night) .g2{background:radial-gradient(closest-side,rgba(70,130,108,.10),rgba(70,130,108,.03) 55%,transparent)}
.fb-glow:not(.fb-glow--night) .g3{background:radial-gradient(closest-side,rgba(150,84,130,.04),transparent)}
.fb-field::after{background:linear-gradient(180deg,rgba(242,240,234,.9) 0%,rgba(242,240,234,.6) 40%,rgba(242,240,234,0) 100%)}
/* nav and title in ink */
.fb:not(.is-dark) .pg-back{color:var(--muted)}
.fb:not(.is-dark) .pg-back:hover{color:var(--ink)}
.fb:not(.is-dark) .fb-links a:not(.signin){color:rgba(31,29,26,.62)}
.fb:not(.is-dark) .fb-links a:not(.signin):hover{color:var(--ink)}
.fb:not(.is-dark) .fb-links a[aria-current=page]{color:var(--ink);border-bottom-color:rgba(31,29,26,.4)}
.fb:not(.is-dark) .fb-nav .signin{color:var(--ink);border-color:rgba(31,29,26,.4)}
.fb:not(.is-dark) .fb-nav .signin:hover{background:#1F1D1A;border-color:#1F1D1A;color:#F7F5F0}
.fb:not(.is-dark) .pg-head .fb-eb{color:var(--plum)}
.fb:not(.is-dark) .fb-hero.pg-head h1{color:var(--ink);text-shadow:0 1px 18px rgba(242,240,234,.9)}
/* the lede in full ink, with a close bone halo that lifts each line off the tiles behind it */
.fb:not(.is-dark) .fb-hero.pg-head p{color:var(--ink);text-shadow:0 0 2px var(--bone),0 0 6px var(--bone),0 0 14px var(--bone),0 0 24px rgba(242,240,234,.9)}
/* the composer: a white card, its keywords in their deep tones */
.fb:not(.is-dark) .fb-input{background:rgba(255,255,255,.88);border-color:var(--line-strong);
  box-shadow:0 30px 60px -36px rgba(31,29,26,.35),inset 0 1px 0 #fff}
.fb:not(.is-dark) .fb-input:focus-within{border-color:rgba(110,74,99,.45);box-shadow:0 0 0 4px rgba(110,74,99,.1),0 30px 60px -36px rgba(31,29,26,.4)}
.fb:not(.is-dark) .fb-ihead{border-bottom-color:var(--line)}
.fb:not(.is-dark) .fb-ilab{color:var(--muted)}
.fb:not(.is-dark) .fb-note{color:rgba(31,29,26,.66);text-shadow:0 0 2px var(--bone),0 0 6px var(--bone),0 0 14px var(--bone)}
.fb:not(.is-dark) .fb-status{color:var(--muted)}
.fb:not(.is-dark) .fb-status::before{background:rgba(31,29,26,.3)}
.fb:not(.is-dark) .fb-status.is-building{color:#8A5B33}.fb:not(.is-dark) .fb-status.is-building::before{background:#B06E34}
.fb:not(.is-dark) .fb-status.is-ready{color:#46635A}.fb:not(.is-dark) .fb-status.is-ready::before{background:#5C7A6E}
.fb:not(.is-dark) .fb-hl{color:var(--ink)}
.fb:not(.is-dark) .fb-hl .j{color:#7A4269}.fb:not(.is-dark) .fb-hl .a{color:#2F6B55}.fb:not(.is-dark) .fb-hl .d{color:#9A5A22}
.fb:not(.is-dark) .fb-ta textarea{caret-color:var(--ink)}
.fb:not(.is-dark) .fb-ta textarea::placeholder{color:rgba(31,29,26,.42)}
.fb:not(.is-dark) .fb-ta textarea::selection{background:rgba(110,74,99,.18)}
.fb:not(.is-dark) .fb-go{background:var(--charcoal);color:var(--bone)}
.fb:not(.is-dark) .fb-go:hover{background:#000}
/* a peek: a small white card */
.fb:not(.is-dark) .pk{background:rgba(255,255,255,.92);border-color:var(--line);box-shadow:0 18px 36px -22px rgba(31,29,26,.4)}
.fb:not(.is-dark) .pk b{color:var(--ink)}
/* the plum sheet, a dark document on the paper */
.fb:not(.is-dark) .fp-in{box-shadow:inset 0 0 0 1px var(--sh-edge),inset 0 1px 0 rgba(255,255,255,.16),0 50px 90px -50px rgba(31,29,26,.55),0 0 120px -30px rgba(150,84,130,.42)}
.fb:not(.is-dark) .fb-spill{background:radial-gradient(closest-side,rgba(150,84,130,.20),rgba(70,130,108,.07) 62%,transparent)}
/* the sample requests in ink */
.fb:not(.is-dark) .sg-eb{color:var(--plum)}

/* the night: the dark ground, faded in evenly across the section, like house lights going down */
.fb > .fb-night{position:absolute;inset:0;z-index:0;pointer-events:none;background:#140F18;opacity:0;transition:opacity 1.2s ease}
.fb.is-dark > .fb-night{opacity:1}
.fb-night::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 40% at 20% 0%,rgba(150,84,130,.22),transparent 70%),radial-gradient(50% 36% at 90% 10%,rgba(78,150,124,.12),transparent 70%)}
/* the glows cross over: bone washes out, the dark version's plum and jade in */
.fb-glow{transition:opacity 1.2s ease}
.fb-glow--night{opacity:0}
.fb.is-dark .fb-glow:not(.fb-glow--night){opacity:0}
.fb.is-dark .fb-glow--night{opacity:1}
.fb.is-dark.is-built .fb-glow--night{opacity:.8}
/* the top scrims cross over too */
.fb-field::after{transition:opacity 1s ease}
.fb-field::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s ease;
  background:linear-gradient(180deg,rgba(16,12,19,.78) 0%,rgba(16,12,19,.5) 40%,rgba(16,12,19,0) 100%)}
.fb.is-dark .fb-field::after{opacity:0}
.fb.is-dark .fb-field::before{opacity:1}
/* while the lights change, everything that changes colour eases with them, together */
.fb.is-switching :is(.pg-back,.fb-links a,.fb-nav .signin,.fb-eb,.fb-hero h1,.fb-hero p,.fb-input,.fb-note,.fb-ihead,.fb-ilab,.fb-status,.fb-hl,.fb-hl span,
  .fb-go,.pk,.pk b,.sg-eb,.sxc-card,.sxc-k,.sxc-t,.sxc-go,.sxc-bar button){
  transition:color 1.1s ease,background-color 1.1s ease,border-color 1.1s ease,box-shadow 1.1s ease,text-shadow 1.1s ease}
.fb-nav img{transition:opacity .4s ease}
/* the lede a step heavier, so it holds its own over the field */
.fb-hero.pg-head p{font-weight:500}
.fb-hero.pg-head p:not(.fb-eb){font-weight:560}

/* ── arriving: as on the leadership page, the words and the composer rise into place in turn,
   and the field fades in behind them ── */
.cv-in{animation:cvIn .7s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:calc(var(--i,0) * 110ms + 80ms)}
@keyframes cvIn{from{opacity:0;transform:translateY(20px)}}
.fb-field canvas,.fb-glow:not(.fb-glow--night){animation:cvFade 1.6s ease backwards}
@keyframes cvFade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.cv-in,.fb-field canvas,.fb-glow:not(.fb-glow--night){animation:none}}

/* Sign in as on every page: the home page's pill, measured to the platform's door */
.fb-nav .signin{font-size:14px;font-weight:500;letter-spacing:normal;text-transform:none;line-height:20px;padding:8px 18px}

/* on hover, a hairline draws out from the centre beneath the wordmark: plum on bone, light in the dark */
.fb-nav > a:not(.pg-back){position:relative;display:block}
.fb-nav > a:not(.pg-back)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:rgba(247,245,240,.8);
  transform:scaleX(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.fb:not(.is-dark) .fb-nav > a:not(.pg-back)::after{background:var(--plum)}
.fb-nav > a:not(.pg-back):hover::after,.fb-nav > a:not(.pg-back):focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.fb-nav > a:not(.pg-back)::after{transition:none}}

/* the scroll-up band (its rules in index.css): Back at the left, as in the page's own header, and the page underlined */
.hb .pg-back{color:var(--muted)}
.hb .pg-back:hover{color:var(--ink)}
.hb.is-ondark .pg-back{color:rgba(247,245,240,.72)}
.hb.is-ondark .pg-back:hover{color:#F7F5F0}
.hb .hb-links a[aria-current=page]{color:var(--ink);border-bottom-color:rgba(31,29,26,.4)}
.hb.is-ondark .hb-links a[aria-current=page]{color:#F7F5F0;border-bottom-color:rgba(247,245,240,.5)}

/* ── the sample requests: a row of light cards that drifts, each request coloured as the composer colours
   what a visitor types; glass in the dark, white on bone ── */
.sx{position:relative;margin-top:14px}
.sx .j{color:#F2BEDF}.sx .a{color:#A8E3C9}.sx .d{color:#F7C894}
.fb:not(.is-dark) .sx .j{color:#7A4269}.fb:not(.is-dark) .sx .a{color:#2F6B55}.fb:not(.is-dark) .sx .d{color:#9A5A22}
.sx i{display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--cl);box-shadow:0 0 8px var(--cl)}
.fb:not(.is-dark) .sx i{background:var(--c);box-shadow:none}
.sx button{all:unset;box-sizing:border-box;cursor:pointer}
.sx button:focus-visible{outline:2px solid rgba(110,74,99,.55);outline-offset:3px;border-radius:8px}
.sxc-bar{position:absolute;right:0;top:-38px;display:flex;gap:8px}
.sxc-bar button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(242,240,234,.2);color:#F6F2EA;font-size:13px}
.fb:not(.is-dark) .sxc-bar button{border-color:var(--line-strong);color:var(--ink)}
.sxc-bar button:hover{background:rgba(242,240,234,.08)}
.fb:not(.is-dark) .sxc-bar button:hover{background:#fff}
.sxc{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 90%,transparent 100%)}
.sxc::-webkit-scrollbar{display:none}
.sxc .sxc-card{flex:0 0 290px;display:flex;flex-direction:column;gap:10px;min-height:178px;padding:18px 20px 16px;border-radius:14px;
  border:1px solid rgba(242,240,234,.14);background:rgba(242,240,234,.04);transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.fb:not(.is-dark) .sxc .sxc-card{border-color:var(--line);background:rgba(255,255,255,.6)}
.sxc .sxc-card:hover{transform:translateY(-2px);border-color:rgba(242,240,234,.3)}
.fb:not(.is-dark) .sxc .sxc-card:hover{background:#fff;border-color:var(--line-strong);box-shadow:0 18px 30px -24px rgba(31,29,26,.45)}
.sxc-k{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,234,.55)}
.fb:not(.is-dark) .sxc-k{color:var(--muted)}
.sxc-t{font-family:var(--serif);font-size:18px;line-height:1.36;color:rgba(246,242,234,.92)}
.fb:not(.is-dark) .sxc-t{color:var(--ink)}
.sxc-go{margin-top:auto;font-size:12.5px;font-weight:500;color:rgba(242,240,234,.55);transition:color .2s ease}
.fb:not(.is-dark) .sxc-go{color:var(--muted)}
.sxc .sxc-card:hover .sxc-go{color:#F7F5F0}
.fb:not(.is-dark) .sxc .sxc-card:hover .sxc-go{color:var(--ink)}
@media(max-width:640px){.sxc .sxc-card{flex-basis:250px}}

/* ── Send this package to the Kai team: a panel from the right, in the sheet's own plum,
   that posts the visitor's details and the package to the platform's request endpoint ── */
.rq-scrim{position:fixed;inset:0;z-index:60;background:rgba(20,12,24,.48);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.rq-scrim.is-on{opacity:1;pointer-events:auto}
.rq{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(500px,100%);overflow:auto;color:#F8F4EC;
  background:radial-gradient(110% 42% at 18% 0%,rgba(196,124,174,.30),transparent 72%),linear-gradient(180deg,#46344F,#3B2C44);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,.6);
  transform:translateX(104%);visibility:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1),visibility 0s linear .5s}
.rq.is-on{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.rq-in{padding:38px 42px 42px}
.rq-x{all:unset;cursor:pointer;position:absolute;top:22px;right:24px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:rgba(248,244,236,.7);font-size:20px}
.rq-x:hover{background:rgba(255,255,255,.08);color:#F8F4EC}
.rq-x:focus-visible,.rq-go:focus-visible,.rq-back:focus-visible{outline:2px solid #F0D2E4;outline-offset:3px}
.rq-k{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#F0D2E4}
.rq h3{margin:12px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,2.8vw,36px);line-height:1.12;letter-spacing:-.02em}
.rq-lede{margin:12px 0 0;font-family:var(--serif);font-size:17px;line-height:1.5;color:rgba(250,244,248,.78)}
.rq-pkg{margin:24px 0 26px;padding:16px 18px;border-radius:14px;border:1px solid rgba(240,210,228,.2);background:rgba(255,255,255,.06)}
.rq-pkg small{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,244,236,.5)}
.rq-pkg b{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.3}
.rq-pkg div{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rq-pkg div span{padding:4px 10px;border-radius:100px;font-size:12px;border:1px solid rgba(240,210,228,.38);color:#F1E2EB}
/* the fields, button and footnote are the platform's request-a-demo form's (wellspring platform/gate.css):
   underlines rather than boxes, the serif in the field, a squared full-width button */
.rq-form{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:1px solid rgba(250,244,248,.12)}
.rq-two{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.rq-f label{display:block;margin-bottom:3px;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,246,.5)}
.rq-f input,.rq-f textarea{box-sizing:border-box;width:100%;padding:8px 2px;border:0;border-bottom:1px solid rgba(244,244,246,.3);border-radius:0;background:transparent;
  font:400 17px/1.4 var(--serif);color:#F4F4F6;outline:0;transition:border-color .2s ease;resize:vertical}
.rq-f textarea{min-height:68px;font-size:15px;line-height:1.5}
.rq-f input::placeholder,.rq-f textarea::placeholder{color:rgba(244,244,246,.42)}
.rq-f input:focus,.rq-f textarea:focus{border-bottom-color:#CF9FC6}
.rq-f.is-bad input{border-bottom-color:#B4573C}
.rq-form > .rq-f{margin-top:10px}
.rq-go{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:20px;padding:11px 18px;border-radius:9px;
  background:#F2F0EA;color:#1F1D1A;font:500 13px/1.4 var(--sans);transition:background .2s ease}
.rq-go:hover{background:#fff}.rq-go[disabled]{opacity:.6;cursor:default}
.rq-note{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(244,244,246,.14);font-size:12px;line-height:1.55;color:rgba(244,244,246,.6)}
.rq-err{margin:0;font-size:13px;line-height:1.5;color:#F2C4B4}
.rq-err a{color:inherit}
.rq-done{display:none;flex-direction:column;gap:12px;margin-top:32px}
.rq.is-sent .rq-form,.rq.is-sent .rq-pkg{display:none}.rq.is-sent .rq-done{display:flex}
.rq-sq{display:flex;gap:7px}.rq-sq i{width:9px;height:9px;opacity:0;animation:rqSq .5s ease forwards}
.rq-sq i:nth-child(1){background:#E3C6D8}.rq-sq i:nth-child(2){background:#BFD8CC;animation-delay:.15s}.rq-sq i:nth-child(3){background:#F1D3B3;animation-delay:.3s}
@keyframes rqSq{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.rq-done h4{margin:6px 0 0;font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.015em;color:#F8F4EC}
.rq-done p{margin:0;font-family:var(--serif);font-size:17px;line-height:1.5;color:rgba(248,244,236,.74)}
.rq-back{all:unset;cursor:pointer;align-self:flex-start;margin-top:6px;font-size:13px;color:#CF9FC6;border-bottom:1px solid rgba(207,159,198,.42)}
body.rq-open{overflow:hidden}
@media(max-width:640px){.rq-two{grid-template-columns:1fr}.rq-in{padding:30px 22px 32px}}
@media(prefers-reduced-motion:reduce){.rq,.rq.is-on,.rq-scrim{transition:none}.rq-sq i{animation:none;opacity:1}}

/* the topic list's open last card: add your own, which opens the panel at its comments */
.fw li.fw-add{display:block;padding:16px 0 4px;border-top:0;animation:fwAdd .5s ease both}
@keyframes fwAdd{from{opacity:0;transform:translateY(4px)}}
.fw-addb{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:12px;
  border:1px dashed var(--sh-line2);color:var(--sh-ink);transition:background .2s ease,border-color .2s ease}
.fw-addb:hover{background:rgba(255,255,255,.04);border-color:rgba(248,244,236,.42)}
.fw-addb:focus-visible{outline:2px solid #F0D2E4;outline-offset:3px}
.fw-addb > span:first-child{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--sh-line2);font-size:18px;line-height:1}
.fw-addb b{display:block;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.25}
.fw-addb em{display:block;margin-top:3px;font-style:normal;font-size:13.5px;color:var(--sh-mut)}
@media(prefers-reduced-motion:reduce){.fw li.fw-add{animation:none}}

/* on a narrow phone the pill keeps its type and gives up some side padding, clear of the wordmark */
@media(max-width:420px){.fb-nav .signin{padding:7px 13px}}

/* ── on a phone ──────────────────────────────────────────────────────────────
   The menu's button takes the Back link's place, in ink until the lights go down. The package's
   sections sit closer, at a phone's scale, and its sheet's margins come in. The sample briefing's
   masthead is two lines, brand and Illustrative over the date; the topic rows a step tighter; Start
   over and the panel's close a full fingertip to tap, drawn as before; the sample row's arrows gone,
   since a phone swipes it. */
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .mn-btn ~ .pg-back{display:none}
  .fb:not(.is-dark) .fb-nav .mn-btn{color:var(--ink)}
  .fb.is-switching .fb-nav .mn-btn{transition:color 1.1s ease}

  .fp-in{padding:36px 32px 36px;margin-bottom:56px}
  .fs{margin-top:32px;padding-top:28px;row-gap:18px}
  .fp-end{margin-top:36px;padding-top:24px}

  .fbr-mast{flex-wrap:wrap;column-gap:12px;row-gap:4px;padding-top:16px;padding-bottom:14px}
  .fbr-brand{white-space:nowrap}
  .fbr-mast em{order:1}
  .fbr-mast span:not(.fbr-brand){order:2;flex-basis:100%}

  .fw li,.fw li:nth-child(2){padding:16px 0}
  .fw li:first-child{padding-top:4px}
  .fw-t b{font-size:19px}
  .fw-t p{margin-top:5px}
  .fw-t span{margin-top:7px}
  .fw-t .fw-mks{margin-bottom:8px}

  .fp-cta button,.fp-end button{position:relative}
  .fp-cta button::after,.fp-end button::after{content:"";position:absolute;inset:-12px -10px}
  .rq-x{top:17px;right:19px;width:44px;height:44px}

  .sxc-bar{display:none}
}
/* narrower still, the composer stacks (above), and with it: the status always on its own line, so the
   composer keeps one height whichever status it shows and nothing below it moves; the sheet's padding in */
@media(max-width:640px){
  .fb-status{flex-basis:100%}
  .fp-in{padding:32px 22px 32px}
}