/* fuilfl. = the mirror of reitrn.  Same system; gradients run the other way (assets/theme.js), hero art sits on the left,
   alternate rows flip. Also: colouring of the Hails cards, and small components used by the generated pages. */

/* ── Hails cards, recoloured with the reitrn tokens (the card markup itself is untouched) ── */
:root{
  --color-black:#111118;
  --color-brand-primary:#111118;
  --color-emerald-50:var(--accent-soft);
  --color-emerald-500:var(--accent);
  --color-emerald-600:var(--accent-d);
  --color-emerald-700:var(--accent-d);
  --color-amber-50:var(--accent-soft);
  --color-amber-300:var(--accent-l);
  --color-amber-400:var(--accent);
  --color-amber-500:var(--accent);
  --color-amber-600:var(--accent-d);
  --color-amber-700:var(--accent-d);
  --color-amber-800:var(--accent-d);
  --color-amber-900:var(--accent-d);
}
.hc{font-family:'Inter',system-ui,sans-serif;color:#111118;text-align:left;line-height:normal}
:where(.hc) :is(h1,h2,h3,h4,p){margin:0}
:where(.hc) svg{display:inline-block}
:where(.hc) a{text-decoration:none}

/* ── mirror: flipped hero, alternating rows ── */
.hero.ff-flip .hero-in{grid-template-columns:.8fr 1.35fr}
.hero.ff-flip .hero-in>:first-child{order:2}
.ff-reason.flip>div:first-child{order:2}
.split.flip>div:first-child{order:2}

/* ── components ── */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ff-chip{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--slate-d)}
.ff-chip.ok{background:var(--accent-soft);border-color:transparent;color:var(--ink)}
.ff-fine{font-size:12.5px;color:var(--slate)}
.ff-fine a{color:var(--ink)}
.ff-five{list-style:none;display:grid;gap:10px}
.ff-five li{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);box-shadow:0 14px 40px -28px rgba(17,17,24,.4)}
.ff-five li b{font-size:13px;color:var(--accent-d);font-variant-numeric:tabular-nums}
.ff-reason{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
.ff-num{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--accent-d)}
.ff-reason h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;margin:8px 0 12px}
.ff-reason p{color:var(--slate-d)}
.ff-how{margin-top:18px;padding-left:16px;border-left:3px solid var(--accent);color:var(--ink)!important}
.ff-how small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent-d);margin-bottom:6px}
.ff-ink{background:var(--ink);color:#fff;padding:clamp(56px,8vw,96px) 0;position:relative}
.ff-ink::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.ff-ink h2{color:#fff}
.ff-ink .lead{color:#C4C4D2}
.ff-ink .eyebrow{color:var(--accent-l)}
.ff-ink .btn.primary{background:var(--grad);color:var(--on-grad)}
.ff-screens-wrap{margin-top:40px;overflow-x:auto}
.ff-tiles{margin-top:56px}
.ff-ops-card{display:block;text-decoration:none;color:inherit;transition:border-color .12s ease}
.ff-ops-card:hover{border-color:var(--ink)}
.ff-ops-card .ticks li{color:var(--slate-d);padding:6px 0;font-size:15px}
.ff-sector img{border-radius:10px;margin-bottom:14px;aspect-ratio:5/4;object-fit:cover;width:100%}
.ff-sector h3{margin-bottom:6px}
.ff-bin-chip{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--slate)}
.ff-bin-chip small{font-weight:800;letter-spacing:.12em}
.ff-bin-chip b{color:var(--ink);background:var(--panel);padding:3px 8px;border-radius:6px}
.ff-bin-chip em{font-style:normal;margin-left:auto}
.crumb{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:18px}
.ff-login{background:var(--off)}
.ff-login-in{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:clamp(30px,6vw,80px);align-items:center;padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(40px,7vw,90px)}
.ff-login .form{box-shadow:0 30px 80px -40px rgba(17,17,24,.4)}
.ff-login .wm{font-size:40px}
.ff-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:-4px 0 14px}
.ff-check{display:flex;gap:8px;align-items:center;color:var(--slate-d)}
.ff-check input{width:auto}
@media (max-width:900px){
  .pair,.ff-reason,.ff-login-in{grid-template-columns:1fr}
  .hero.ff-flip .hero-in{grid-template-columns:1fr}.hero.ff-flip .hero-in>:first-child{order:0}
  .ff-reason.flip>div:first-child,.split.flip>div:first-child{order:0}
  .g3,.g4{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){.g3,.g4{grid-template-columns:1fr}}

.raas-note{display:inline-block;margin-top:22px;font-weight:600;font-size:13.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.ff-go{margin-top:auto;padding-top:14px;font-weight:700;font-size:14px;color:var(--accent-d)}
.card.mini:hover .ff-go{color:var(--ink)}

/* ── Hails-format nav dropdown: rail of groups on the left, two-column list on the right ── */
.ff-dd{position:relative}
.ff-panel{position:absolute;top:100%;right:0;margin-top:12px;z-index:60;width:660px;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.14)}
.ff-panel[hidden]{display:none}
.ff-panel-in{display:flex}
.ff-rail{width:196px;flex:none;border-right:1px solid rgba(0,0,0,.07);background:#fafafa;padding:10px;display:flex;flex-direction:column}
.ff-rail-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;border-radius:8px;padding:10px 12px;text-align:left;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:rgba(0,0,0,.5);cursor:pointer;transition:color .12s}
.ff-rail-btn:hover{color:#000}
.ff-rail-btn[aria-current="true"]{background:#fff;color:#000;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ff-rail-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.ff-all{margin-top:auto;padding:10px 12px;border-radius:8px;font-size:12.5px;font-weight:700;color:rgba(0,0,0,.45);text-decoration:none}
.ff-all:hover{color:#000}
.ff-pane{flex:1;min-width:0;padding:12px}
.ff-group[hidden]{display:none}
.ff-items{display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
.ff-item{display:flex;gap:10px;border-radius:12px;padding:8px 10px;text-decoration:none;color:inherit;transition:background .12s}
.ff-item:hover{background:rgba(0,0,0,.035)}
.ff-ic{flex:none;margin-top:3px;color:rgba(0,0,0,.4)}
.ff-item:hover .ff-ic{color:var(--accent-d)}
.ff-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ff-tx b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:#111118}
.ff-tx i{display:block;font-style:normal;font-size:12px;line-height:1.35;color:#71717a;margin-top:2px}
.ff-tag{margin:8px 10px 0;padding-top:12px;border-top:1px solid rgba(0,0,0,.07);font-size:12px;line-height:1.35;color:#71717a}
@media (max-width:900px){
  .ff-panel{position:static;width:auto;margin-top:8px;box-shadow:none}
  .ff-panel-in{flex-direction:column}
  .ff-rail{width:auto;border-right:0;border-bottom:1px solid rgba(0,0,0,.07);flex-direction:row;flex-wrap:wrap;gap:4px}
  .ff-all{margin-top:0}
  .ff-items{grid-template-columns:1fr}
}
.ff-sectors .hc{margin-top:0}

.split.ff-top{align-items:start}

/* caption under the three screens: centred under the block and readable on the dark panel (Hails leaves it dim and left-aligned) */
.ff-ink .hc p[class*="uppercase"]{text-align:center;color:rgba(255,255,255,.55);letter-spacing:.14em}

.sf3-svg{display:block;width:100%;height:auto}

/* big footer wordmark: natural proportions, centred under the card (not stretched across the page) */
.sf3-clip.ff-clip{width:min(70%,760px);aspect-ratio:285/66;margin-inline:auto}

/* colour swatches run the opposite way to reitrn's (mirror) */
.wk,.cp-m i{background:linear-gradient(180deg,var(--b),var(--a))}
/* About dropdown: link + colour-of-the-week card */
.ff-panel.ff-about{width:320px}
.ff-about .ff-about-link{margin:8px 10px 4px;padding:10px}
.ff-about .cp-in{border-top:1px solid rgba(0,0,0,.07)}
.ff-about .cp-in{gap:0}
.ff-about .cp-banner{border-radius:0}
.ff-about .ff-ic svg{fill:none}
@media (max-width:900px){.ff-panel.ff-about{width:auto}}

.wk-big{display:flex;align-items:center;justify-content:center;container-type:inline-size}
/* white wordmark at the same letter height as reitrn's in its swatch */
.ff-wk-word{font-weight:900;font-size:clamp(48px,23cqw,90px);letter-spacing:-.04em;line-height:1;color:#fff;text-shadow:0 2px 14px rgba(17,17,24,.22)}

.ff-panel.ff-about{overflow:visible}
.ff-about .ff-pane{padding:8px 0}
.ff-about .ff-item{padding:10px;margin:0 8px}
.ff-ic-sw{margin-top:1px}
.ff-ic-sw .cp-sw{width:18px;height:18px;border-radius:50%;background:var(--grad)}

/* hover flyout: reitrn's colour-of-the-week card, to the left of the About menu (still a normal link underneath) */
.ff-hover{display:block}
.ff-fly{display:none;position:absolute;right:100%;top:-1px;width:340px;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.18)}
.ff-hover:hover .ff-fly,.ff-hover:focus-within .ff-fly{display:block}
.ff-hover:hover>.ff-item,.ff-hover:focus-within>.ff-item{background:rgba(0,0,0,.035)}
.ff-fly .cp-in{border:0}
.ff-fly .cp-link{display:inline-block}
@media (max-width:900px){.ff-fly{display:none!important}}

.ff-stat-tag{display:block;margin-bottom:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d)}

/* card pages: wider container and a wider card column, as on Hails (text 1fr : card 1.4fr) */
.wrap.ff-wide{max-width:1280px}
@media (min-width:901px){.split.ff-card-row{grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr)}}
/* never let a card push the page wider than the screen */
.split>*,.ff-reason>*{min-width:0}
@media (max-width:900px){.hc{max-width:100%;overflow-x:auto}}

/* ── "Message the floor" card (records attached to messages by search) ── */
.ffc-wrap{box-shadow:0 25px 50px -12px rgba(0,0,0,.14);border-radius:16px}
.ffc{border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff;padding:18px 20px;color:#111118;font-family:'Inter',system-ui,sans-serif;text-align:left}
.ffc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ffc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.4)}
.ffc-top b{font-weight:800}
.ffc-live{display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.06em;color:var(--accent-d)}
.ffc-live i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ffc-thread{display:grid;gap:12px}
.ffc-row{display:flex;align-items:flex-end;gap:8px}
.ffc-row.me{justify-content:flex-end}
.ffc-av{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.07);font-size:10px;font-weight:700;color:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.ffc-bub{max-width:84%;border-radius:16px 16px 16px 6px;background:rgba(0,0,0,.05);padding:10px 14px;font-size:12.5px;line-height:1.4;color:rgba(0,0,0,.8)}
.ffc-bub.me{border-radius:16px 16px 6px 16px;background:#111118;color:#fff}
.ffc-meta{display:block;margin-top:6px;font-size:10px;font-weight:700;color:rgba(0,0,0,.4)}
.ffc-rec{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#fff;color:#111118}
.ffc-ic{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d)}
.ffc-rec small{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.4)}
.ffc-rec b{display:block;font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.ffc-rec em{display:block;font-style:normal;font-size:11px;color:#71717a;line-height:1.3}
.ffc-pill{margin-left:auto;flex:none;border-radius:99px;background:rgba(0,0,0,.06);padding:3px 9px;font-size:10px;font-weight:700;color:rgba(0,0,0,.65);white-space:nowrap}
.ffc-pill.ok,.ffc-pill.warn{background:var(--accent-soft);color:var(--accent-d)}
.ffc-composer{margin-top:16px;border-top:1px solid rgba(0,0,0,.08);padding-top:14px}
.ffc-input{display:flex;align-items:center;gap:10px;border:1.5px solid #111118;border-radius:12px;padding:8px 10px;font-size:13px}
.ffc-input .ffc-ic{width:26px;height:26px;background:rgba(0,0,0,.06);color:#111118}
.ffc-typed{font-weight:700;letter-spacing:-.01em}
.ffc-caret{display:inline-block;width:1.5px;height:14px;margin-left:2px;vertical-align:-2px;background:#111118}
.ffc-hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(0,0,0,.35);font-size:12px}
.ffc-send{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#111118;color:#fff}
.ffc-send svg{width:14px;height:14px}
.ffc-results{margin-top:8px;border:1px solid rgba(0,0,0,.1);border-radius:12px;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.25)}
.ffc-res{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.06);font-size:12px}
.ffc-res:last-child{border-bottom:0}
.ffc-res.on{background:rgba(0,0,0,.035)}
.ffc-res .ffc-ic{width:24px;height:24px}
.ffc-k{flex:none;width:58px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.4)}
.ffc-res b{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.ffc-sub{min-width:0;margin-left:auto;text-align:right;color:#71717a;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ffc-foot{margin:10px 2px 0;font-size:11.5px;color:#71717a}
@media (max-width:560px){.ffc-k{display:none}.ffc-hint{display:none}.ffc-bub{max-width:92%}}

/* homepage version: same card, tighter, about the height of the cards beside it */
.ffc.mini{padding:14px 16px}
.ffc.mini .ffc-top{margin-bottom:10px}
.ffc.mini .ffc-thread{gap:8px}
.ffc.mini .ffc-bub{padding:8px 12px;font-size:12px}
.ffc.mini .ffc-rec{margin-top:6px;padding:6px 8px}
.ffc.mini .ffc-composer{margin-top:12px;padding-top:12px}
.ffc.mini .ffc-input{padding:6px 8px}
.ffc.mini .ffc-results{margin-top:6px}
.ffc.mini .ffc-res{padding:6px 10px}

/* dotted frame like the other homepage cards (charges, stock, forecast) */
.ffc-wrap.dots{padding:14px;border:1px solid rgba(0,0,0,.09);border-radius:24px;background-color:#fff;background-image:radial-gradient(circle,rgba(0,0,0,.16) 1px,transparent 1.3px);background-size:14px 14px;box-shadow:none}
.ffc-wrap.dots .ffc{box-shadow:0 12px 30px -14px rgba(0,0,0,.18)}

/* ── "Choose your path" pop-up ── */
.ffm[hidden]{display:none}
.ffm{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.ffm-back{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.ffm-box{position:relative;width:100%;max-width:680px;max-height:90vh;overflow-y:auto;background:#fff;border-radius:32px;box-shadow:0 25px 60px -12px rgba(0,0,0,.45)}
.ffm-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border:0;border-radius:50%;background:#f4f4f5;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#111118;transition:background .12s,color .12s}
.ffm-x:hover{background:#111118;color:#fff}
.ffm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ffm-body{padding:clamp(24px,5vw,48px)}
.ffm h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin:0 0 6px;padding-right:40px}
.ffm-sub{margin:0 0 26px;font-size:15px;font-weight:500;color:#71717a;line-height:1.5}
.ffm-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ffm-opt{position:relative;overflow:hidden;text-align:left;font:inherit;display:flex;flex-direction:column;padding:26px;border-radius:24px;border:1px solid rgba(0,0,0,.06);background:#fafafa;color:#111118;cursor:pointer;transition:transform .15s ease,border-color .15s,background .15s}
.ffm-opt:hover{transform:scale(1.015);background:#fff;border-color:#111118}
.ffm-opt.dark{background:#111118;color:#fff;border-color:transparent;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.ffm-opt.dark::before{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:var(--grad);opacity:.35;filter:blur(28px)}
.ffm-opt.dark:hover{background:#111118}
.ffm-ico{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.06);margin-bottom:18px}
.ffm-opt.dark .ffm-ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}
.ffm-ico svg{width:22px;height:22px}
.ffm-opt h3{position:relative;margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.ffm-opt p{position:relative;margin:0 0 22px;font-size:13.5px;line-height:1.5;color:#71717a;font-weight:500}
.ffm-opt.dark p{color:rgba(255,255,255,.55)}
.ffm-go{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ffm-go svg{width:15px;height:15px}
.ffm-foot{padding:16px;text-align:center;border-top:1px solid rgba(0,0,0,.05);background:#fafafa;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#a1a1aa}
.ffm-f{display:block;margin-bottom:14px}
.ffm-f span{display:block;margin-bottom:6px;font-size:13px;font-weight:700}
.ffm-f input,.ffm-f select,.ffm-f textarea{width:100%;font:inherit;font-size:15px;padding:12px 14px;border:1.5px solid #d4d4d8;border-radius:12px;background:#fff;color:#111118}
.ffm-f textarea{resize:vertical;min-height:84px}
.ffm-f input:focus,.ffm-f select:focus,.ffm-f textarea:focus{outline:none;border-color:var(--accent-d);box-shadow:0 0 0 3px var(--accent-soft)}
.ffm-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ffm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ffm-err{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:#FDECEE;color:#9B1C2B;font-size:13.5px}
.ffm-err[hidden]{display:none}
.ffm-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
/* same shape as the site buttons (.btn: 10px radius, 600 weight, 15.5px, 15px 26px) */
.ffm-submit{flex:1;font:inherit;font-weight:600;font-size:15.5px;padding:15px 26px;border:1.5px solid transparent;border-radius:10px;background:#111118;color:#fff;cursor:pointer;transition:transform .12s ease,background .12s}
.ffm-submit:hover{background:#26263A;transform:translateY(-1px)}
.ffm-submit:disabled{opacity:.6;cursor:wait}
.ffm-back-btn{font:inherit;font-weight:600;font-size:15.5px;padding:15px 26px;border:1.5px solid #111118;border-radius:10px;background:transparent;color:#111118;cursor:pointer;transition:transform .12s ease,background .12s}
.ffm-back-btn:hover{background:#F0F0F5;transform:translateY(-1px)}
html.ffm-lock{overflow:hidden}
@media (max-width:640px){.ffm-opts,.ffm-two{grid-template-columns:1fr}.ffm-box{border-radius:24px}}