/* ⚠️ NEVER PREPEND TO THIS FILE. It used to carry a UTF-8 BOM, and inserting text above it moved the BOM into the body, where U+FEFF is a valid CSS ident character — it fused with the next selector and silently killed that whole rule. On this file that was the entire design-token :root block. Keep it BOM-free. ══ THE BRUTALIST REGISTER, SHIPPED 26 AUGUST 2026 ════════════════════ This file replaced 1,374 lines that drew a dark page out of thirty-three gradients, blurs and drop shadows and eleven different corner radii. What is here has one radius (none), no shadow, no gradient and no glow, and every division is a rule that two sections share. ⚠ THE REST OF Phase_Two IS STILL IN THE OLD DARK REGISTER. login.html, the signup flow, subscribe.html, the guides and the legal pages all still load their own stylesheets and still look like the old site. Anybody who presses Log in from here walks straight out of this design and into that one. Converting them is queued, not done. ⚠ TWO TOKENS BELOW EXIST FOR THE SCRIPT, NOT FOR THE DESIGN. --accent and --red are read from landing.html by submitInvite() to colour the waitlist message. Removing them does not break a rule in this file — it silently makes the success and failure messages the same colour as body text. */ :root{ --paper:#eceae3; --ink:#111014; --grey:#7c7a72; --line:#111014; --money:#007a03; --attn:#e9ff4b; /* ══ THE FOUR AREA COLOURS ═════════════════════════════════════════ Ben pointed at the acid-yellow bar on this page and said: in THIS style. So they are flat fields with ink on them, the way that bar is — not a hairline and a tinted label, which is what they were an hour ago and which was too polite to be what he meant. ⚠️ THAT CHANGE FORCED A COMPLETELY DIFFERENT PALETTE, and it is worth knowing why rather than assuming a colour is a colour. A colour used as TEXT has to be dark enough that ink-dark type reads against paper. A colour used as a FIELD has to be light enough that ink reads on top of IT. Those are opposite requirements, so none of the four dark hues survived the change of role \u2014 they were re-derived from scratch. ⭐ AND THE ORANGE CAME BACK, which is the good news. As TEXT, orange collapsed into money-green under deuteranopia at \u0394E 5.7. As a light FIELD it is nowhere near it, because the failure was never about orange \u2014 it was about two dark saturated things at the same lightness. Ben asked for an orange by name and gets one. ⭐ MEASURED IN-BROWSER, CIEDE2000 plus a Vi\u00e9not deuteranopia simulation, against this page's own ink and paper: \u00b7 worst pair, deuteranope vision \u2014 18.8 (target 8, floor 6) \u00b7 worst pair, normal vision \u2014 24.7 (target 15) \u00b7 ink on the field \u2014 6.89 at worst (floor 4.5) \u00b7 nearest approach to the attention yellow, deuteranope \u2014 16.3, which is the one that matters most: an area colour must never be mistaken for the colour that means DO SOMETHING. ⚠️ The five-colour set in project_colour_findings_measured was validated against the DARK app surface and does not transfer to either role here. A palette is only ever validated against a ground AND a job. */ --c-catalog:#a888ff; --c-owe:#ff69ac; --c-tax:#7ce8fa; --c-money:#ff8a52; /* ⭐ THE FIFTH, added for Clients — the Why row only ever needed four, and the tools grid has five groups because the SIDEBAR has five. ⚠ The obvious choice failed. A periwinkle blue measured ΔE 7.2 from the catalog violet under deuteranopia, against a floor of 6 — one man in twelve would have seen Catalog and Work as the same colour. Swept twenty candidates; this mint is 13.9 from its nearest neighbour, 12.6:1 under ink, and 35.9 from money-green so it cannot be read as money. */ --c-work:#8fe6a0; /* ⚠ READ BY landing.html's submitInvite(), not by any rule in this file. --accent is the success colour, --red the failure one. The register has no red of its own, so this borrows the one the design notes already use to mean "this was wrong". */ --accent:#007a03; --red:#a4322c; --t-1:34px; --t-2:22px; --t-3:15px; --t-4:13px; --t-5:11px; --t-6:9.5px; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --sans:'Archivo','Helvetica Neue',Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;border-radius:0} html{color-scheme:light} body{background:var(--paper);color:var(--ink);font-family:var(--sans); -webkit-font-smoothing:antialiased} button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer} a{color:inherit} /* ⚠️ NO INVENTED HEXES. Six paragraph rules had picked up a soft #3a3840 for body copy, which is neither ink nor grey and is exactly the kind of "reasonable decision taken on its own" that produced 24 type sizes and 17 radii the first time. Body copy is ink. In a register with no shadow and no tint, a softened text colour is the one place greyness creeps back in. */ /* the press, carried over from the dashboard: instant down, eased up */ .press{transition:transform 130ms cubic-bezier(.2,.75,.3,1), box-shadow 130ms cubic-bezier(.2,.75,.3,1)} .press:active{transition-duration:0s;transform:translate(2px,2px); box-shadow:inset 3px 3px 0 rgba(17,16,20,.32)} .press.solid:active{box-shadow:inset 3px 3px 0 rgba(236,234,227,.34)} @media (prefers-reduced-motion:reduce){.press{transition:none} .press:active{transform:none;box-shadow:none}} /* ── the page ──────────────────────────────────────────── */ .wrap{max-width:1560px;margin:0 auto;padding:22px 20px 44px} /* ⚠ THE SECOND HERO CTA IS AN , NOT A BUTTON, because it goes somewhere — it scrolls to the tools. Every .acts rule therefore has to name both, or the anchor drops out of the shared box and renders as an underlined link sitting inside a button-shaped hole. */ .acts a{display:flex;align-items:center;text-decoration:none;cursor:pointer} @media (max-width:660px){ .wrap{padding:0} .site{border-left:0;border-right:0;border-top:0} } /* ══ THE HEADLINE TYPES ITSELF IN ═════════════════════════════ Ben, 26 August: "the little period at the end kind of repeats, kinda like in a search bar — the little thing would kinda blip." THREE RULES IT HAS TO KEEP, and they are the reason this is safe to ship rather than a trick: 1 · THE WORDS ARE IN THE PAGE BEFORE THE SCRIPT RUNS. The headline is real markup at first paint; the animation is layered over it. So it is selectable, findable, read aloud by a screen reader and seen by a search engine whether the animation ever runs or not. A headline that only exists after a timer is a headline Google never sees. 2 · NOTHING BELOW IT MOVES. The headline's finished height is measured and pinned before the first character is removed, so the page does not reflow while it types. 3 · NEVER UNDER prefers-reduced-motion, where the headline is simply present rather than typed faster. ⚠ IT USED TO BE ONCE PER VISIT AND NOW IT IS EVERY LOAD. Retyping is tiresome on a page you come BACK to inside a session, and nobody comes back to a landing page inside a session — they arrive once. Guarding it only made the effect invisible to the person most likely to reload, which is the owner showing it to somebody. */ .cur{display:inline-block;width:.055em;height:.7em;background:currentColor; vertical-align:-.01em;margin-left:.06em} /* the old terminal rate: half a second lit, half a second dark, and a hard step between them rather than a fade */ @keyframes blip{0%,50%{opacity:1}50.01%,100%{opacity:0}} .blip{animation:blip 1.06s steps(1,end) infinite} @media (prefers-reduced-motion:reduce){.blip{animation:none}} /* ══ THE PAGE ═════════════════════════════════════════════════════════ ⚠️ ONE BORDER AROUND EVERYTHING AND EVERY SECTION BUTTED INSIDE IT. The live page is a stack of floating cards on a dark ground with thirty-three gradients, blurs and drop shadows in its stylesheet and eleven different corner radii. This has one radius, no shadow, no gradient and no glow, and every division is a rule two sections share. */ .site{border:2px solid var(--line);background:var(--paper)} .nav{display:flex;align-items:stretch;border-bottom:2px solid var(--line)} .nav-b{font-size:20px;font-weight:900;letter-spacing:-.045em;padding:15px 22px; display:flex;align-items:center;flex:1} .nav a{border-left:1px solid var(--line);padding:0 18px;display:flex;align-items:center; font-family:var(--mono);font-size:var(--t-5);letter-spacing:.13em;text-transform:uppercase; text-decoration:none;white-space:nowrap} .nav a:hover{background:var(--ink);color:var(--paper)} .nav a.solid{background:var(--ink);color:var(--paper)} .nav a.solid:hover{background:var(--money);color:#fff} @media (max-width:760px){.nav a.hide-s{display:none}} /* ── the hero ─────────────────────────────────────────────────────── */ .hero{border-bottom:2px solid var(--line);container-type:inline-size} .hero-in{padding:52px 26px 44px} .hero-k{font-family:var(--mono);font-size:var(--t-6);letter-spacing:.18em; text-transform:uppercase;color:var(--grey);display:flex;justify-content:space-between;gap:16px} /* ⚠️ NO text-wrap:balance HERE, AND THAT IS THE POINT. The break is written into the markup because the two clauses are the design: one line is what the producer does, the next is what ALPHA does, and a browser deciding where to fold that would sometimes put "We've" on the first line and destroy the whole gesture. Balance is for sentences nobody planned. */ .hero h1{font-size:clamp(40px,8.6cqw,116px);font-weight:900;letter-spacing:-.05em; line-height:.9;margin:26px 0 0;overflow-wrap:break-word} /* ⭐ THE FIELD MARKS THE HALF YOU NO LONGER HAVE TO DO, which is the whole reason this slogan is worth building on rather than just liking. Line one is the producer's job. Line two is ALPHA's. Putting the one flat field of colour on the second line makes that division the loudest thing on the page — the green is literally the part somebody else is handling now. ⚠️ It is also the one place a green field is allowed to sit on something that is not a figure, and it earns it the same way the dashboard's does: it marks a CLAIM, not a number. */ /* ⭐ ANYTHING INSIDE A HIGHLIGHT IS BOLDED — Ben, 2026-08-27. 'bolder' rather than a number: this mark sits in an 800-weight headline, where a flat font-weight:700 would make it LIGHTER than the sentence holding it. ⚠️ Never use it on a mono highlight — Plex Mono 700 is not loaded and renders synthetic bold; those cap at 600. */ .mark{background:var(--money);color:#fff;padding:0 .08em .04em;display:inline-block; font-weight:bolder} .hero-sub{font-size:var(--t-2);line-height:1.4;max-width:46ch;margin-top:30px;font-weight:500; letter-spacing:-.015em} .acts{display:flex;flex-wrap:wrap;margin-top:34px;border:2px solid var(--line);width:max-content; max-width:100%} .acts button,.acts a{border-right:1px solid var(--line);padding:16px 24px; font-family:var(--mono);font-size:var(--t-5);letter-spacing:.13em;text-transform:uppercase} .acts button:last-child,.acts a:last-child{border-right:0} .acts button.solid,.acts a.solid{background:var(--ink);color:var(--paper)} .acts button:hover,.acts a:hover{background:var(--ink);color:var(--paper)} .acts button.solid:hover,.acts a.solid:hover{background:var(--money);color:#fff} /* ⓘ CORRECTION 1 — the live page says "Currently in private beta. Free for everyone testing it." The beta was cancelled on 18 August and there is nothing to request an invite to. This says what is true. */ .status{margin-top:18px;font-family:var(--mono);font-size:var(--t-6);letter-spacing:.14em; text-transform:uppercase;color:var(--grey)} /* ⚠️ THE EMBEDDED DASHBOARD IS GONE, AND IT TOOK THREE TRIES TO EARN THAT. First a hand-built copy of the screen: it dissolved into the page, because it was drawn in the same rules as everything around it and nothing said "a different object starts here". Then the same thing made live and pressable, on the theory that a response is better evidence than a frame. Ben, on both: "not feelin it." ⭐ HE IS RIGHT AND THE THIRD ANSWER IS THE OLD ONE: A LANDING PAGE DOES NOT OWE ANYBODY A PICTURE OF THE PRODUCT. It owes them a reason to care. The proof this page needed was already on it and at the right scale — the two small cards in the Why section, a royalty statement and a paid sync invoice. They are fragments and they read as fragments, which is exactly why they are believable: nobody mistakes them for the app, so nobody is judging them as one. The signup screen is where the product gets shown. This page's job is to make somebody want to get there. ═══════════════════════════════════════════════════════════════════ */ /* ── a section ────────────────────────────────────────────────────── */ .sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:15px 22px;border-bottom:2px solid var(--line); font-family:var(--mono);font-size:var(--t-5);letter-spacing:.18em;text-transform:uppercase} .sec-h em{font-style:normal;color:var(--grey);text-align:right} .lead{padding:26px 22px 30px;border-bottom:2px solid var(--line);container-type:inline-size} .lead h2{font-size:clamp(30px,4.8cqw,54px);font-weight:900;letter-spacing:-.042em; line-height:.98;max-width:18ch;text-wrap:balance} .lead p{font-size:var(--t-3);line-height:1.65;max-width:62ch;margin-top:16px;color:var(--ink)} /* ── the tools ────────────────────────────────────────────────────── */ .tools{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--line)} @media (max-width:1080px){.tools{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.tools{grid-template-columns:1fr}} .tool{padding:22px 20px 24px;border-right:1px solid var(--line); border-bottom:1px solid var(--line);min-width:0;text-decoration:none;display:block} /* ══ HOVER FILLS THE TOOL WITH ITS OWN PART OF THE APP ═══════════ It used to go flat black, which is correct and says nothing. The five colours are the ones already on the Why row below, so hovering Catalog up here and reading "track every royalty source" down there are visibly the same subject. ⚠ THE TEXT STAYS INK. These are FIELDS, not text colours — a colour light enough to carry ink on top is a different colour from one dark enough to read as type, which is why the Why row's set had to be re-derived from scratch when it changed role. Measured against this page's own ink: worst of the five is 6.9:1. */ .tool{--c:var(--ink);--ct:var(--paper)} .tool[data-area="catalog"]{--c:var(--c-catalog);--ct:var(--ink)} .tool[data-area="clients"]{--c:var(--c-work);--ct:var(--ink)} .tool[data-area="money"] {--c:var(--c-money);--ct:var(--ink)} .tool[data-area="owe"] {--c:var(--c-owe);--ct:var(--ink)} .tool[data-area="tax"] {--c:var(--c-tax);--ct:var(--ink)} .tool:hover,.tool:focus-visible{background:var(--c);color:var(--ct)} .tool:hover p,.tool:hover .tool-n,.tool:hover .plaid, .tool:focus-visible p,.tool:focus-visible .tool-n{color:inherit} .tools .tool:nth-child(4n){border-right:0} @media (max-width:1080px){.tools .tool:nth-child(4n){border-right:1px solid var(--line)} .tools .tool:nth-child(2n){border-right:0}} @media (max-width:620px){.tools .tool{border-right:0}} .tools .tool:nth-last-child(-n+4){border-bottom:0} @media (max-width:1080px){.tools .tool:nth-last-child(-n+4){border-bottom:1px solid var(--line)} .tools .tool:nth-last-child(-n+2){border-bottom:0}} @media (max-width:620px){.tools .tool:nth-last-child(-n+2){border-bottom:1px solid var(--line)} .tools .tool:last-child{border-bottom:0}} .tool-n{font-family:var(--mono);font-size:var(--t-6);letter-spacing:.16em;text-transform:uppercase; color:var(--grey)} .tool h3{font-size:var(--t-2);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin:12px 0 0} .tool p{font-size:var(--t-4);line-height:1.6;margin-top:10px;color:var(--ink)} .tool .plaid{font-family:var(--mono);font-size:var(--t-6);letter-spacing:.12em; text-transform:uppercase;color:var(--grey);display:block;margin-top:8px} /* ⭐ THE EYEBROWS ARE THE APP'S OWN GROUP NAMES, lifted from Phase_Two/nav.js: "Your catalog", "Your clients", "Money coming in", "People you owe", "Tax time". A landing page that names things the way the sidebar names them means a producer who signs up recognises every word on his second screen. It costs nothing and almost nobody does it. */ .also{padding:17px 22px;border-bottom:2px solid var(--line);font-size:var(--t-4); line-height:1.7;color:var(--ink)} /* ── why ──────────────────────────────────────────────────────────── */ /* ══ THE ONE BROKEN GRID ══════════════════════════════════════════════ Ben: it is flat. In this language the answer cannot be a shadow or a gradient \u2014 those are the things the register threw out on its first line. What is left is SCALE, DENSITY and ALIGNMENT, and the third one is the one nobody spends. ⚠️ EVERY OTHER BAND ON THIS PAGE IS FULL WIDTH AND SQUARED OFF, which is what makes a hard grid start reading as a spreadsheet. So exactly one section refuses: \u00b7 it carries a 108px EMPTY GUTTER on the left that exists nowhere else, so none of its vertical rules line up with any other section's \u2014 the eye catches that before it can name it; \u00b7 the headline ignores the gutter and starts at the true left edge, so the argument sits proud of everything arguing for it; \u00b7 the evidence column starts one row LOWER than the list beside it, so the two halves are deliberately out of step. ⭐ ONCE. A broken grid on every section is not a broken grid, it is a messy one \u2014 the break only reads because everything around it is rigid. That is the same economy as one loud thing per region and one flat field of colour per screen. */ .why{display:grid;grid-template-columns:108px minmax(0,1.15fr) minmax(0,1fr); border-bottom:2px solid var(--line);container-type:inline-size} .why-h{grid-column:1/-1;padding:34px 22px 30px;border-bottom:1px solid var(--line)} .why-g{grid-column:1;border-right:1px solid var(--line); display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px} .why-g span{font-family:var(--mono);font-size:var(--t-6);letter-spacing:.3em; text-transform:uppercase;color:var(--grey);writing-mode:vertical-rl;transform:rotate(180deg)} /* the four points stretch to fill the column rather than stopping halfway and leaving a tail of nothing under them — in a butted grid an empty tail reads as a section that ran out, not as air */ .why-l{grid-column:2;border-right:1px solid var(--line);min-width:0; display:flex;flex-direction:column} .why-l .wp{flex:1} .why-r{grid-column:3;min-width:0;display:flex;flex-direction:column} @media (max-width:1080px){ .why{grid-template-columns:minmax(0,1fr)} .why-g{display:none} .why-l{grid-column:1;border-right:0;border-bottom:2px solid var(--line)} .why-r{grid-column:1} } /* the headline is the biggest type on the page after the hero, and it starts left of everything that supports it */ .why-h h2{font-size:clamp(30px,6.6cqw,76px);font-weight:900;letter-spacing:-.048em; line-height:.94;max-width:15ch;text-wrap:balance} .why-h p{font-size:var(--t-3);line-height:1.6;max-width:54ch;margin-top:20px;color:var(--ink)} /* ⚠️ THE WHOLE ROW IS THE FIELD, and I argued against that an hour ago for a reason that turned out to be inherited rather than true. The objection was "a full row of colour behind body copy is unreadable at 13px" — which is correct for the DARK version of these hues and simply false for these. Ink on the worst of the four measures 6.89:1, half again over the 4.5 floor for body text, and on the cyan it is 11.6. Ben asked for the whole row and the numbers say the whole row is fine. ⭐ The lesson is the same one the palette taught twice tonight: an objection carried over from a previous version of a thing is not a measurement, it is a habit. Check it against the version in front of you. The internal hairline stays. With the row all one colour it is the only thing separating the label from the claim, and a hard rule doing structural work is the most in-register answer available. */ .wp{border-bottom:1px solid var(--line);--c:var(--paper);background:var(--c)} .wp:last-child{border-bottom:0} .wp:nth-child(1){--c:var(--c-catalog)} .wp:nth-child(2){--c:var(--c-owe)} .wp:nth-child(3){--c:var(--c-tax)} .wp:nth-child(4){--c:var(--c-money)} .wp-k{display:flex;align-items:baseline;gap:16px;padding:10px 22px; color:var(--ink);border-bottom:1px solid var(--line); font-family:var(--mono);font-size:var(--t-6);letter-spacing:.2em;text-transform:uppercase} /* the numeral is the quiet half of the strip and the area is the loud one, which is the right way round: nobody needs to know it is item three, they need to know it is tax */ .wp-k s{text-decoration:none;opacity:.55} .wp-b{padding:16px 22px 18px;min-width:0} .wp-b b{display:block;font-size:var(--t-3);font-weight:800;letter-spacing:-.02em} .wp-b p{font-size:var(--t-4);line-height:1.6;margin-top:7px;color:var(--ink)} .why-r{grid-column:3;min-width:0;display:flex;flex-direction:column} @media (max-width:1080px){ .why{grid-template-columns:minmax(0,1fr)} .why-g{display:none} .why-l{grid-column:1;border-right:0;border-bottom:2px solid var(--line)} .why-r{grid-column:1} } /* the headline is the biggest type on the page after the hero, and it starts left of everything that supports it */ .why-h h2{font-size:clamp(30px,6.6cqw,76px);font-weight:900;letter-spacing:-.048em; line-height:.94;max-width:15ch;text-wrap:balance} .why-h p{font-size:var(--t-3);line-height:1.6;max-width:54ch;margin-top:20px;color:var(--ink)} /* ⚠️ AND THE EVIDENCE STARTS ONE ROW LOW. The empty cell at the top of this column is the break doing its work: two halves of a section that plainly do not begin together. It costs one div. */ .card-off{border-bottom:1px solid var(--line);height:58px} @media (max-width:1080px){.card-off{display:none}} .card{border-bottom:1px solid var(--line);padding:20px 22px 22px} .card:last-child{border-bottom:0;flex:1} .card-k{font-family:var(--mono);font-size:var(--t-6);letter-spacing:.16em;text-transform:uppercase; color:var(--grey);padding-bottom:14px;border-bottom:1px solid rgba(17,16,20,.18); margin-bottom:4px} .cr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0; border-bottom:1px solid rgba(17,16,20,.14)} .cr:last-child{border-bottom:0} .cr span{font-size:var(--t-4);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cr span s{display:block;text-decoration:none;font-family:var(--mono);font-size:var(--t-6); letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:4px} .cr b{font-family:var(--mono);font-weight:500;font-size:var(--t-4);flex:none; font-variant-numeric:tabular-nums;color:var(--money)} .big{font-family:var(--mono);font-weight:500;font-size:var(--t-1);letter-spacing:-.03em; font-variant-numeric:tabular-nums;display:block;margin-top:16px} .big+s{display:block;text-decoration:none;font-family:var(--mono);font-size:var(--t-6); letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:10px} /* ── pricing ──────────────────────────────────────────────────────── */ .price{border-bottom:2px solid var(--line);container-type:inline-size} .price-h{padding:26px 22px 28px;border-bottom:1px solid var(--line)} .price-h h2{font-size:clamp(28px,5cqw,54px);font-weight:900;letter-spacing:-.042em; line-height:.98;max-width:17ch;text-wrap:balance} .price-h p{font-size:var(--t-3);line-height:1.65;max-width:58ch;margin-top:16px;color:var(--ink)} .plans{display:grid;grid-template-columns:repeat(3,1fr)} @container (max-width:820px){.plans{grid-template-columns:1fr}} .plan{padding:22px 20px 24px;border-right:1px solid var(--line);min-width:0} .plan:last-child{border-right:0} @container (max-width:820px){.plan{border-right:0;border-bottom:1px solid var(--line)} .plan:last-child{border-bottom:0}} .plan b{display:block;font-size:var(--t-3);font-weight:800;letter-spacing:-.02em} .plan p{font-size:var(--t-4);line-height:1.6;margin-top:9px;color:var(--ink)} /* ── the close ────────────────────────────────────────────────────── */ .close{border-bottom:2px solid var(--line);padding:52px 26px 48px;container-type:inline-size} .close h2{font-size:clamp(34px,6.6cqw,80px);font-weight:900;letter-spacing:-.048em; line-height:.94;max-width:14ch;text-wrap:balance} .close .status{margin-top:22px} .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:18px 22px; font-family:var(--mono);font-size:var(--t-6);letter-spacing:.13em;text-transform:uppercase; color:var(--grey)} .foot b{color:var(--ink);font-weight:500;font-family:var(--sans);font-size:15px; letter-spacing:-.04em} .foot a{text-decoration:none} .foot a:hover{color:var(--ink)} .foot-l{display:flex;flex-wrap:wrap;gap:18px;align-items:center} /* ══ THE WAITLIST CAPTURE ══════════════════════════════════════ landing.html injects this form next to whichever CTA was pressed. The markup is built in JS and cannot be changed from here, so these class names are a contract: .invite-form, .invite-input, .invite-send, .invite-msg. Renaming one in the script without renaming it here leaves an unstyled form on the live page. ⚠ A FIELD HAS TO LOOK LIKE A FIELD. A bare input in this register is a strip of grey placeholder text with no border and no fill, and it reads as a caption rather than as somewhere to type. It gets the same hard-ruled box as every button, with a heavier bottom rule so the two are not confused. */ .invite-form{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin-top:18px; border:2px solid var(--line);width:max-content;max-width:100%} .invite-input{flex:1 1 240px;min-width:0;border:0;border-right:1px solid var(--line); padding:15px 16px;font-family:var(--sans);font-size:var(--t-3); background:var(--paper);color:var(--ink)} .invite-input::placeholder{color:var(--grey)} .invite-input:focus{outline:2px solid var(--ink);outline-offset:-2px} .invite-form .invite-send{padding:15px 24px;background:var(--ink);color:var(--paper); font-family:var(--mono);font-size:var(--t-5);letter-spacing:.13em;text-transform:uppercase; white-space:nowrap;cursor:pointer;border:0;width:auto} .invite-form .invite-send:hover{background:var(--money);color:#fff} .invite-form .invite-send[disabled]{cursor:default;background:var(--grey)} /* the message is a full-width row UNDER the box, so a long sentence cannot squeeze the input down to nothing on a phone */ .invite-msg{flex:1 0 100%;margin:0;padding:0 16px;font-family:var(--mono); font-size:var(--t-6);letter-spacing:.1em;text-transform:uppercase;line-height:1.6} .invite-msg:not(:empty){padding:12px 16px;border-top:1px solid var(--line)} /* ══ THE LOGGED-IN HEADER ════════════════════════════════════ Also built in JS, also a contract. A producer who is already signed in sees their own name here instead of Log in. */ .header-user-pill{display:flex;align-items:center;gap:9px;padding:0 16px; border-left:1px solid var(--line);text-decoration:none} .header-user-pill:hover{background:var(--ink);color:var(--paper)} .header-avatar{display:flex;align-items:center;justify-content:center; width:24px;height:24px;border:1.5px solid currentColor; font-family:var(--mono);font-size:var(--t-6);letter-spacing:.02em} .header-username{font-family:var(--mono);font-size:var(--t-5);letter-spacing:.1em; text-transform:uppercase;white-space:nowrap} @media (max-width:600px){.header-username{display:none}} .nav .btn-signup{border-left:1px solid var(--line);padding:0 18px;display:flex; align-items:center;background:var(--ink);color:var(--paper);cursor:pointer; font-family:var(--mono);font-size:var(--t-5);letter-spacing:.13em;text-transform:uppercase; white-space:nowrap;text-decoration:none} .nav .btn-signup:hover{background:var(--money);color:#fff}