/* ========================================================================== Factbox — /join and /start. Loaded after css/app.css and css/account.css. It uses their tokens and adds no colour of its own: every value below is a var() from app.css's :root. There is not one hex literal in this file, on purpose — the site was repainted onto a light palette in a single afternoon and the things that broke were the ones carrying their own colours. WHAT THIS FILE IS FOR, AND WHAT IT USED TO BE FOR. /join was two things on one URL: five screens of onboarding questions, and a checkout. The questions are retired — the conversion flow asks for an account inside the story now, in the sheet js/recommend.js puts over it — and js/start.js, which drove them, is gone with them. So: /join the checkout. The sign-up form and the plan picker are styled by css/account.css exactly as they were; nothing in here touches a .jn- selector, so the plan picker cannot be restyled by accident. /start one real screen with one real door: a promise, and a button that goes to /join. It is the only page left that uses the .ob / .ob-top / .ob-mark / .ob-stage / .st-screen / .ob-centre / .ob-sub / .ob-act block below, and it is why that block is still here. WHAT WAS REMOVED WITH THE QUESTIONS: the story-behind-the-sheet layer (.ob-behind*), the sheet itself (.ob-sheet), the back button, the progress track, the option cards and their ticks (.ob-opt*, .ob-tick), the affirmation's figure (.ob-stat*), the result screen's rows (.ob-row, .ob-card), and the two body classes js/start.js used to hide the site chrome (body.ob-on, body.ob-over). None of them has any markup left to style. Bringing the flow back means bringing them back with it. --------------------------------------------------------------------------- THE THREE RULES THIS FILE EXISTS TO KEEP 1. NOTHING TAPPABLE BELOW --bottom-safe. Every reader arrives in the Instagram or TikTok webview, whose toolbar is drawn over the bottom ~13vh of the viewport. The column carries that much padding underneath, and the primary button is pushed to the bottom of the column with `margin-top:auto` — so its bottom edge is (viewport - bottom-safe - 8px) BY CONSTRUCTION rather than by a number someone tuned once. The column is height-capped and the content scrolls inside it, so this holds at any viewport rather than at the three sizes someone remembered to check; the short-viewport blocks at the end of the file only stop it needing to. 2. ONE SCREEN AT A TIME, AND THE REST ARE display:none. Not opacity:0, not visibility:hidden. A hidden button that still takes a tap is a real bug this flow has had. 3. EVERY HIDEABLE THING SHIPS ITS OWN [hidden] RULE. `.go{display:block}` in app.css is (0,1,0) and beats the user agent's `[hidden]{display:none}` (0,0,1) — so `