/* flow.css, scoped under .mfs-flow so it neither depends on the host page nor leaks into it. rem sizes are converted to px at the 19px base the page was designed at, since rem would follow the host root. Generated from flow/flow.css; edit that, not this. */ .mfs-flow{font-size:19px;display:block;min-height:100vh;} .mfs-flow{ --paper:#E4DDC9; --paper-2:#E4DDC9; --card:#F6F2E7; --mat:#EDE7D6; --ink:#2A322C; --ink-soft:#5C665B; --pine:#2F5D48; --brass:#A98A43; --brass-text:#7A5C22; --rule:#D8D1BE; --shadow:42,50,44; --display:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Figtree",Inter,system-ui,-apple-system,sans-serif; --soft:var(--ink-soft); --text:var(--sans); --sunk:var(--paper-2); --on-pine:var(--card); --pine-hi:#274D3C; --brass-soft:#EDE2C4; --fast:120ms; --default:200ms; --slow:320ms; --out:cubic-bezier(.22,1,.36,1); } .mfs-flow *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} .mfs-flow [hidden]{display:none !important;} .mfs-flow,.mfs-flow{height:100%;} .mfs-flow{font-size:19px;} .mfs-flow{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text); font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;} .mfs-flow a{color:var(--pine);} .mfs-flow :focus-visible{outline:3px solid var(--brass);outline-offset:3px;} .mfs-flow .split{display:grid;grid-template-columns:1fr;min-height:calc(100vh - 78px);} @media (min-width:960px){.mfs-flow .split{grid-template-columns:1.45fr 1fr;} } .mfs-flow .ground{position:relative;z-index:0;overflow:hidden;background:var(--sunk); min-height:34vh;} @media (min-width:960px){.mfs-flow .ground{min-height:0;} } .mfs-flow .ground .plate{position:absolute;inset:0;background-size:cover; background-position:center;opacity:0; transition:opacity 520ms var(--out), transform 900ms var(--out); transform:scale(1.06);} .mfs-flow .ground .plate[data-on]{opacity:1;transform:scale(1);} .mfs-flow .ground::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(var(--shadow),.34),transparent 22%);} .mfs-flow .ground::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3; background:linear-gradient(rgba(111,84,22,0),rgba(111,84,22,.5),rgba(111,84,22,0));} @media (max-width:959px){.mfs-flow .ground::before{background:linear-gradient(rgba(var(--shadow),.3),transparent 30%);} .mfs-flow .ground::after{left:0;right:0;top:auto;bottom:0;width:auto;height:1px; background:linear-gradient(90deg,rgba(111,84,22,0),rgba(111,84,22,.5),rgba(111,84,22,0));} } .mfs-flow .top{position:relative;z-index:5;display:flex;align-items:center; justify-content:space-between;gap:16px;border-bottom:1px solid var(--rule); background:var(--paper); /* one page tint, Brian 2026-09-30 */ padding:clamp(14px,2vw,20px) clamp(18px,3.4vw,34px);} .mfs-flow .mark{font-family:var(--display);font-weight:600;font-size:24.32px;color:var(--ink); text-decoration:none;letter-spacing:-.01em; display:inline-flex;align-items:center;min-height:48px;padding:0 4px;} .mfs-flow .topRight{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px);} .mfs-flow .step{font-size:19.38px;color:var(--soft);font-weight:500;} .mfs-flow .back{font-size:19.76px;font-weight:600;color:var(--pine);text-decoration:none; display:inline-flex;align-items:center;min-height:48px;padding:0 4px; border-bottom:2px solid transparent;} .mfs-flow .back:hover{border-bottom-color:var(--pine);} /* start, not center: the panel was centred in a full-height grid, so the heading sat mid-screen with a band of empty paper above it, and drifted further as the panel grew. */ .mfs-flow .wrap{position:relative;z-index:1;display:grid;align-content:start; justify-items:center;background:var(--paper);min-height:calc(100vh - 78px); padding:clamp(22px,3.2vh,44px) clamp(22px,5vw,64px);} .mfs-flow .split .wrap{justify-items:center;min-height:0;} /* Air above the heading. The panel is top-aligned now rather than centred, which put it hard against the bar; this brings the whole column down together instead of nudging one element. Mark 2026-09-19. */ .mfs-flow .panel{width:100%;max-width:760px;margin-top:clamp(24px,6vh,72px);} .mfs-flow h1{font-family:var(--display);font-weight:600; font-size:clamp(32.3px,2.4vw,39.9px);line-height:1.1;letter-spacing:-.016em; margin:0;color:var(--ink);text-wrap:balance;font-variation-settings:"opsz" 72;} .mfs-flow .sub{margin:22px 0 0;color:var(--soft); font-size:20.9px;line-height:1.5;} .mfs-flow .ways{display:grid;gap:13px;grid-template-columns:1fr;margin-top:clamp(20px,2.6vw,28px);} .mfs-flow .way{display:block;text-align:left;text-decoration:none; background:var(--card);color:var(--ink); border:1px solid var(--rule);border-radius:16px; padding:clamp(18px,2.2vw,22px) clamp(20px,2.4vw,26px);cursor:pointer;font:inherit; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -22px rgba(var(--shadow),.55); transition:border-color var(--default) var(--out), box-shadow var(--default) var(--out), transform var(--default) var(--out);} .mfs-flow .way:hover{border-color:var(--brass);transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 40px -22px rgba(var(--shadow),.6);} .mfs-flow .way b{font-family:var(--display);font-weight:600; font-size:clamp(24.32px,1.9vw,28.5px);line-height:1.15; font-variation-settings:"opsz" 30;} .mfs-flow .way p{margin:6px 0 0;color:var(--soft);font-size:19.38px;line-height:1.5;} .mfs-flow .way .act{display:flex;align-items:center;gap:10px;margin-top:14px; font-weight:700;font-size:21.28px;color:var(--pine);} .mfs-flow .way .act svg{width:22px;height:22px;transition:transform var(--default) var(--out);} .mfs-flow .way:hover .act svg{transform:translateX(4px);} /* Matched to .sub. It carried max-width:48ch, which nothing else on the panel has, so it wrapped at a different measure to every line around it. */ /* ⚠️ MATCHED TO .hint, NOT TO .sub. These paragraphs sit among the hints now - the standfirst they were briefly matched to has been deleted - and they were a shade larger, led differently and wrapped at a different measure to every line beside them. Same type, same measure; only the margin differs. Mark 2026-09-19 spotted it between the magic-link line and this one. */ .mfs-flow .free{margin:18px 0 0;color:var(--soft);font-size:20.14px;max-width:56ch;} .mfs-flow } .drop,.mfs-flow .me{margin-top:clamp(18px,2.4vw,26px);width:100%;} .mfs-flow .dropzone{display:block;background:var(--card); border:3px dashed var(--rule);border-radius:16px; padding:clamp(26px,3.4vw,40px);text-align:center;cursor:pointer; transition:border-color var(--default) var(--out),background var(--default) var(--out);} .mfs-flow .dropzone:hover{border-color:var(--pine);background:#FFFFFF;} .mfs-flow .dropzone b{display:block;font-family:var(--display);font-weight:600; font-size:clamp(23.75px,2vw,28.5px);color:var(--ink);} .mfs-flow .dropzone span{display:block;margin-top:8px;color:var(--soft);font-size:20.9px;} .mfs-flow .dropzone input{position:absolute;width:1px;height:1px;opacity:0;} .mfs-flow .picked{margin:16px 0 0;color:var(--pine);font-size:20.9px;font-weight:600;} .mfs-flow .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap;font-size:19px;} .mfs-flow .photo{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center; padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule);} .mfs-flow .shot{position:relative;width:64px;height:64px;border-radius:50%;cursor:pointer; border:2px dashed var(--rule);background:var(--card);color:var(--pine); display:grid;place-items:center;overflow:hidden;padding:0; transition:border-color var(--fast) var(--out);} .mfs-flow .shot:hover{border-color:var(--pine);} .mfs-flow .shot.has{border-style:solid;border-color:var(--pine);} .mfs-flow .shot svg{width:30px;height:30px;} .mfs-flow .shot.has svg{display:none;} .mfs-flow .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .mfs-flow .photo b{font-family:var(--display);font-weight:600;font-size:20.9px;color:var(--ink);} .mfs-flow .photo p{margin:3px 0 0;color:var(--soft);font-size:19px;line-height:1.45;} .mfs-flow .why{display:block;font-style:normal;margin-top:7px;color:var(--soft); font-size:19px;line-height:1.4;} .mfs-flow .check{display:flex;align-items:center;gap:14px;margin-top:18px;cursor:pointer; min-height:56px;font-size:20.52px;} .mfs-flow .check input{width:26px;height:26px;accent-color:var(--pine);cursor:pointer;flex:0 0 auto;} /* The row the box shares with its hint (Side, bugs 5 and 8). Without this rule the row was a plain block and the label, a flex container, ran the full width - so a click far to the right of the words still toggled the box. The label is now only as wide as the box and its words. */ .mfs-flow .checkRow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:18px;min-height:56px;} .mfs-flow .checkRow .check{margin-top:0;min-height:0;flex:0 0 auto;width:auto;} .mfs-flow .checkHint{font-style:normal;font-size:.895rem;line-height:1.4;font-weight:700;color:var(--pine);background:var(--mat);border-radius:999px;padding:2px 10px;white-space:nowrap;} .mfs-flow .check i{font-style:normal;font-size:17.86px;font-weight:700;color:var(--pine); background:var(--mat);border-radius:999px;padding:2px 10px;margin-left:8px; white-space:nowrap;} .mfs-flow .help{margin-top:22px;} .mfs-flow .help summary{cursor:pointer;font-size:20.14px;font-weight:600;color:var(--pine); min-height:52px;display:flex;align-items:center;list-style:none;} .mfs-flow .help summary::-webkit-details-marker{display:none;} .mfs-flow .help summary::before{content:"\203A";display:inline-block;margin-right:10px; font-size:24.7px;transition:transform var(--fast) var(--out);} .mfs-flow .help[open] summary::before{transform:rotate(90deg);} .mfs-flow .help p{margin:2px 0 0 24px;color:var(--soft);font-size:19.76px;line-height:1.5; max-width:54ch;} .mfs-flow .veil{position:fixed;inset:0;z-index:50;display:grid;place-items:center; background:rgba(36,42,37,.45);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity var(--fast) var(--out);} .mfs-flow body[data-dragging] .veil{opacity:1;} .mfs-flow .veilCard{background:var(--card);border:3px dashed var(--pine);border-radius:16px; padding:clamp(30px,4vw,48px) clamp(36px,5vw,60px);text-align:center; max-width:560px;margin:20px;} .mfs-flow .veilCard b{display:block;font-family:var(--display);font-weight:600; font-size:clamp(30.4px,3vw,41.8px);color:var(--ink);} .mfs-flow .veilCard span{display:block;margin-top:10px;color:var(--soft);font-size:20.9px; line-height:1.5;} .mfs-flow body[data-dragging] .dropzone{border-color:var(--pine);background:#FFFFFF;} .mfs-flow .fields{display:grid;gap:12px;} .mfs-flow .pair{display:grid;gap:12px 24px;grid-template-columns:1fr;} @media (min-width:700px){.mfs-flow .pair{grid-template-columns:1fr 1fr;} } .mfs-flow .pick{border:0;margin:0;padding:0;} .mfs-flow .pick legend{padding:0;font-size:20.9px;color:var(--ink);font-weight:600; margin-bottom:8px;} .mfs-flow .picks{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;} .mfs-flow .picks label{position:relative;display:flex;align-items:center;justify-content:center; min-height:64px;font-size:21.28px;border:2px solid var(--rule);border-radius:999px; background:var(--card);cursor:pointer;font-size:21.28px;font-weight:600; transition:border-color var(--fast) var(--out),background var(--fast) var(--out);} .mfs-flow .picks label:hover{border-color:var(--soft);} .mfs-flow .picks input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;} .mfs-flow .picks input:checked + span{color:var(--on-pine);} .mfs-flow .picks label:has(input:checked){background:var(--pine);border-color:var(--pine);} .mfs-flow .picks label:has(input:focus-visible){outline:3px solid var(--brass);outline-offset:3px;} /* ⚠️ :not(.check) - the checkbox label is NOT a stacked field. This rule turned every label in a form into a grid, which put the tick on its own line above its words the moment the keep-signed-in box moved into #who. The equivalent rule further down already excludes it; this one had been missed, and nothing had landed a .check inside .fields until now. */ .mfs-flow .fields label:not(.picks label):not(.check){display:grid;gap:8px;align-content:start;} .mfs-flow .picks label{align-content:center;} .mfs-flow .fields span{font-size:20.52px;color:var(--ink);font-weight:600;} .mfs-flow .fields input{font:inherit;font-size:22.42px;color:var(--ink);background:var(--card); border:2px solid var(--rule);border-radius:12px;padding:0 18px;min-height:64px;} .mfs-flow .fields input:hover{border-color:var(--soft);} .mfs-flow .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;} .mfs-flow .prime{font:inherit;font-weight:700;font-size:21.66px;cursor:pointer; background:var(--pine);color:var(--on-pine);border:2px solid var(--pine); border-radius:999px;padding:0 34px;min-height:64px; transition:background var(--fast) var(--out);} .mfs-flow .prime:hover{background:var(--pine-hi);border-color:var(--pine-hi);} .mfs-flow .quiet{font:inherit;font-size:20.9px;font-weight:600;cursor:pointer; background:var(--card);color:var(--ink);border:2px solid var(--rule); border-radius:999px;padding:0 28px;min-height:64px; transition:border-color var(--fast) var(--out);} .mfs-flow .quiet:hover{border-color:var(--ink);} .mfs-flow .hint{margin:16px 0 0;color:var(--soft);font-size:20.14px;max-width:56ch;} .mfs-flow .err{display:block;font-style:normal;margin-top:8px;color:#8A2F1E; font-size:19.76px;line-height:1.4;max-width:46ch;} .mfs-flow .err::before{content:"";display:inline-block;width:9px;height:9px; margin-right:9px;border-radius:50%;background:#8A2F1E;vertical-align:1px;} .mfs-flow input[aria-invalid="true"]{border-color:#8A2F1E;} .mfs-flow #eFile{margin-top:16px;} .mfs-flow .hint b{color:var(--ink);} .mfs-flow .steps{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0; display:grid;gap:0;} .mfs-flow .steps li{display:grid;grid-template-columns:34px 1fr auto;align-items:center; gap:16px;padding:18px 6px;border-bottom:1px solid var(--rule); opacity:.42;transition:opacity var(--slow) var(--out);} .mfs-flow .steps li[data-on]{opacity:1;} .mfs-flow .steps .tick{font-size:24.7px;color:var(--rule);line-height:1;} .mfs-flow .steps li[data-done] .tick{color:var(--pine);} .mfs-flow .steps .what{color:var(--ink);font-size:21.28px;} .mfs-flow .steps .num{font-family:var(--display);font-variant-numeric:tabular-nums; color:var(--brass-text);font-size:21.66px;font-weight:600;opacity:0; transition:opacity var(--default) var(--out);} .mfs-flow .steps li[data-done] .num,.mfs-flow .steps li[data-on] .num{opacity:1;} .mfs-flow .bar{margin-top:30px;height:10px;border-radius:99px; background:var(--sunk);overflow:hidden;border:1px solid var(--rule);} .mfs-flow .bar i{display:block;height:100%;width:0;background:var(--pine); transition:width 240ms linear;} .mfs-flow .keep{margin-top:26px;padding:20px 22px;background:var(--card); border:1px solid var(--rule);border-radius:12px;max-width:640px;} .mfs-flow .keep label{display:block;font-size:20.52px;font-weight:600;color:var(--ink); margin-bottom:12px;} .mfs-flow .keepRow{display:flex;gap:12px;flex-wrap:wrap;} .mfs-flow .keepRow input{flex:1 1 280px;font:inherit;font-size:21.66px;color:var(--ink); background:#FFFDF7;border:2px solid var(--rule);border-radius:10px; padding:0 18px;min-height:64px;} .mfs-flow .keepRow .quiet{min-height:64px;} .mfs-flow .kept{margin:4px 0 0;color:var(--pine);font-weight:600;font-size:20.14px;} .mfs-flow .go{display:inline-flex;align-items:center;justify-content:center;gap:10px; margin-top:clamp(24px,3vw,34px);background:var(--pine);color:var(--on-pine); text-decoration:none;font-weight:700;font-size:21.66px;border-radius:999px; padding:0 36px;min-height:64px;opacity:0;transform:translateY(10px); pointer-events:none; transition:opacity var(--slow) var(--out),transform var(--slow) var(--out), background var(--fast) var(--out);} .mfs-flow .go[data-on]{opacity:1;transform:none;pointer-events:auto;} .mfs-flow .go:hover{background:var(--pine-hi);} .mfs-flow .seeding{position:fixed;inset:0;z-index:0;pointer-events:none;} .mfs-flow .seeding span{position:absolute;left:var(--x);top:var(--y);width:13px;height:13px; margin:-6px 0 0 -6px;border-radius:50%;background:var(--brass); box-shadow:0 0 0 5px rgba(138,106,34,.16); opacity:0;transform:translateY(-14px) scale(.5); animation:seedIn .7s cubic-bezier(.16,1,.3,1) both;} @keyframes seedIn{to{opacity:.55;transform:none;}} .mfs-flow body.atlasPage .wrap{padding:0;place-items:stretch;} .mfs-flow .map{position:relative;z-index:1;width:100%; height:calc(100vh - 74px);overflow:hidden;background:var(--sunk);} .mfs-flow .mapFit{position:absolute;inset:0; transition:left var(--slow) var(--out),right var(--slow) var(--out);} .mfs-flow .map[data-card="right"] .mapFit{right:420px;} .mfs-flow .map[data-card="left"] .mapFit{left:420px;} .mfs-flow .map .plate{position:absolute;inset:0;background-image:url("/img/world.jpg"); background-size:cover;background-position:center;} .mfs-flow .map svg{position:absolute;inset:0;width:100%;height:100%;} .mfs-flow .map .pin{cursor:pointer;} .mfs-flow .map .pin .ring{fill:none;stroke:#FFF3D4;stroke-width:3;} .mfs-flow .map .pin .halo{fill:rgba(255,243,212,.14);} .mfs-flow .map .pin:hover .ring{stroke:#FFFFFF;stroke-width:4.4;} .mfs-flow .map .pin:hover .halo{fill:rgba(255,255,255,.34);} .mfs-flow .map .pin[data-open] .ring{stroke:#FFFFFF;stroke-width:5;} .mfs-flow .map .pin[data-open] .halo{fill:rgba(255,255,255,.42);} .mfs-flow .map .pin:focus-visible .ring{stroke:#FFFFFF;stroke-width:5.4;} .mfs-flow .map .routes path{fill:none;stroke:#FFF3D4;stroke-width:2;opacity:.5; stroke-linecap:round;} .mfs-flow .pin.you .youDisc{fill:var(--pine);} .mfs-flow .pin.you .youInit{fill:var(--on-pine);font-family:var(--display);font-weight:600; font-size:26px;} .mfs-flow .legend .grow{display:inline-flex;align-items:center;justify-content:center; margin-top:14px;background:var(--pine);color:var(--on-pine);text-decoration:none; font-weight:700;font-size:20.14px;border-radius:999px;padding:0 26px;min-height:60px;} .mfs-flow .legend .grow:hover{background:var(--pine-hi);} .mfs-flow .legend{position:absolute;left:clamp(16px,3vw,26px);bottom:clamp(16px,3vw,26px); z-index:2;background:var(--card);border:2px solid var(--rule); border-radius:14px;padding:18px 22px;max-width:320px; transition:opacity var(--default) var(--out);} .mfs-flow .map[data-card] .legend{opacity:0;pointer-events:none;} .mfs-flow .legend b{display:block;font-family:var(--display);font-size:22.04px; color:var(--ink);margin-bottom:6px;} .mfs-flow .legend p{margin:0;color:var(--soft);font-size:20.14px;} .mfs-flow .legend p strong{color:var(--ink);} .mfs-flow .who{position:absolute;z-index:4;right:clamp(16px,3vw,26px);top:50%; transform:translateY(-50%) translateX(14px);width:min(388px,88vw); background:var(--card);color:var(--ink);border:2px solid var(--rule); border-radius:20px;overflow:hidden; box-shadow:0 30px 60px -34px rgba(var(--shadow),.6); opacity:0;pointer-events:none; transition:opacity var(--default) var(--out),transform var(--default) var(--out);} .mfs-flow .who[data-on]{opacity:1;transform:translateY(-50%);pointer-events:auto;} .mfs-flow .who[data-side="left"]{right:auto;left:clamp(16px,3vw,26px); transform:translateY(-50%) translateX(-14px);} .mfs-flow .who[data-side="left"][data-on]{transform:translateY(-50%);} .mfs-flow .who .face{width:100%;aspect-ratio:1;object-fit:cover;display:block; background:var(--sunk);border-bottom:2px solid var(--rule);} .mfs-flow .who .body{padding:22px 24px 24px;} .mfs-flow .who h2{font-family:var(--display);font-weight:600;font-size:29.64px;margin:0; color:var(--ink);font-variation-settings:"opsz" 30;line-height:1.15;} .mfs-flow .who .life{margin:6px 0 0;color:var(--brass-text);font-size:20.9px;font-weight:600;} .mfs-flow .who .place{margin:12px 0 0;color:var(--soft);font-size:20.52px;} .mfs-flow .who .open{display:flex;align-items:center;justify-content:center; margin-top:22px;background:var(--pine);color:var(--on-pine);text-decoration:none; font-weight:700;font-size:21.28px;border-radius:999px;min-height:68px; transition:background var(--fast) var(--out);} .mfs-flow .who .open:hover{background:var(--pine-hi);} .mfs-flow .who .shut{position:absolute;right:10px;top:10px;width:48px;height:48px; border:2px solid var(--rule);border-radius:50%;background:var(--card); color:var(--ink);font-size:24px;line-height:1;cursor:pointer;} .mfs-flow .who .shut:hover{border-color:var(--ink);} @media (max-width:720px){.mfs-flow .who,.mfs-flow .who[data-side="left"]{left:12px;right:12px;top:auto;bottom:12px; width:auto;transform:translateY(16px);} .mfs-flow .who[data-on],.mfs-flow .who[data-side="left"][data-on]{transform:none;} .mfs-flow .who .face{aspect-ratio:16/7;} .mfs-flow .map[data-card] .mapFit{left:0;right:0;} .mfs-flow .legend{display:none;} } @media (prefers-reduced-motion:reduce){.mfs-flow *{transition-duration:1ms !important;animation-duration:1ms !important;} } @media (max-height:840px) and (min-width:1100px){.mfs-flow .top{padding-top:10px;padding-bottom:10px;} .mfs-flow .wrap{padding-top:clamp(12px,1.8vh,22px);padding-bottom:clamp(12px,1.8vh,22px);} .mfs-flow .sub{margin-top:5px;} .mfs-flow .ways{margin-top:16px;gap:12px;} .mfs-flow .way{padding:16px 20px;} .mfs-flow .drop,.mfs-flow .me{margin-top:10px;} .mfs-flow .photo{padding-bottom:8px;margin-bottom:8px;} .mfs-flow .fields{gap:8px;} .mfs-flow .pair{gap:8px 24px;} .mfs-flow .why{margin-top:4px;} .mfs-flow .pick legend{margin-bottom:4px;} .mfs-flow .row{margin-top:10px;} .mfs-flow .hint{margin-top:8px;} .mfs-flow .free{margin-top:12px;} } .mfs-flow .atlasList{display:grid;gap:13px;margin-top:clamp(20px,2.6vw,28px);} .mfs-flow .atlasCard{display:grid;grid-template-columns:96px 1fr 28px;gap:18px; align-items:center;text-decoration:none; background:var(--card);color:var(--ink); border:1px solid var(--rule);border-radius:16px; padding:14px 18px 14px 14px;min-height:96px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 30px -22px rgba(var(--shadow),.55); transition:border-color var(--default) var(--out), box-shadow var(--default) var(--out), transform var(--default) var(--out);} .mfs-flow .atlasCard:hover{border-color:var(--brass);transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 40px -22px rgba(var(--shadow),.6);} .mfs-flow .atlasCard .thumb{width:96px;height:76px;object-fit:cover;border-radius:10px; box-shadow:0 0 0 1px var(--rule);} .mfs-flow .atlasWho{display:grid;gap:2px;} .mfs-flow .atlasWho b{font-family:var(--display);font-weight:600; font-size:clamp(22.42px,1.7vw,25.46px);line-height:1.2;color:var(--ink); font-variation-settings:"opsz" 26;} .mfs-flow .atlasWho i{font-style:normal;color:var(--soft);font-size:19px;} .mfs-flow .atlasWho em{font-style:normal;color:var(--brass-text);font-size:18.05px;} .mfs-flow .atlasCard .chev{width:24px;height:24px;color:var(--soft); transition:transform var(--default) var(--out),color var(--default) var(--out);} .mfs-flow .atlasCard:hover .chev{transform:translateX(3px);color:var(--pine);} .mfs-flow .atlasNew{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center; text-decoration:none;color:var(--ink); border:2px dashed var(--rule);border-radius:16px; padding:14px 18px 14px 14px;min-height:88px; transition:border-color var(--default) var(--out),background var(--default) var(--out);} .mfs-flow .atlasNew:hover{border-color:var(--pine);background:var(--card);} .mfs-flow .atlasNew .plus{display:grid;place-items:center;width:96px;height:68px; font-size:38px;color:var(--pine);font-weight:400;} /* --- account page: the per-page block from Seth's account.html, verbatim --- */ .mfs-flow .or{display:flex;align-items:center;gap:14px;margin:18px 0 12px;color:var(--soft);font-size:19.38px;} .mfs-flow .or::before,.mfs-flow .or::after{content:"";flex:1 1 auto;height:1px;background:var(--rule);} /* The providers open the page now, so they need air above them. */ .mfs-flow .with{display:grid;gap:10px;margin-top:22px;} .mfs-flow .with .quiet{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%;} .mfs-flow .with svg{width:22px;height:22px;flex:0 0 auto;} .mfs-flow .code{font-variant-numeric:tabular-nums;letter-spacing:.34em;text-align:center;font-size:36.1px !important; font-family:var(--display);font-weight:600;} .mfs-flow .sent{margin:0 0 14px;font-size:20.9px;color:var(--ink);line-height:1.5;} .mfs-flow .sent b{font-weight:600;color:var(--pine);word-break:break-all;} .mfs-flow a.change{display:inline;} .mfs-flow .change{font:inherit;font-size:20.14px;font-weight:600;color:var(--pine);background:none;border:0; padding:0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;} .mfs-flow .fields label:not(.picks label):not(.check){display:grid;gap:8px;min-width:0;} .mfs-flow .fields input:not([type=checkbox]){min-width:0;width:100%;box-sizing:border-box;} .mfs-flow #code .check{display:flex;margin-top:6px;} /* ──────────────────────────────────────────────────────────────────────────── The phone toggle was hidden here between 16:5x and 17:2x on 2026-09-18, while the door behind it led nowhere: email-start drops anything without an "@" and still answers 200, so typing a mobile reached a code screen nobody could leave. It is back because backend built the anonymous path (/register/phone-start, /register/phone-complete, /register/phone-regions) and verified it end to end against a real handset. ⚠️ IT ONLY SIGNS IN AN ACCOUNT THAT ALREADY HAS A VERIFIED NUMBER — 5 of ours do today — and an unknown number answers code_invalid, deliberately identical to a wrong code. So until account settings can LINK a number, most people who choose this door will be told their code is wrong with no way to learn why. Linking is the next piece, not this screen. ──────────────────────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────────────────────── The country picker — an addition to Seth's design, so its styling lives here rather than in his stylesheet. Values are copied from `.mfs-flow .fields input` (font-size 22.42px, 2px rule, 12px radius, 64px tall) so the two controls read as one field rather than a form control borrowed from somewhere else. A bare