/* ================================================================== * THE LEAD FORM — /audit-form-preview/ today, /ai-visibility-check/ * after the swap. Loaded only on whichever page is showing the form, * and AFTER ai-visibility-check.css, which that page also loads. See * inc/lead-form.php. * * TWO JOBS. The form card (sections 01, 02, 04 on), and the layout of * the hero it sits in (section 03, and nowhere else). Bands 2 to 7 are * the live AI Visibility Check's, markup and stylesheet, with ONE rule * answered here: the size of band 4's heading in its pill (section 10), * and the sizes of this page's own three pictures (section 11). * * The hero's markup is the live page's too. Its arrangement on a wide * screen is not: section 03 has the history, and it is worth reading * before changing anything, because this band was laid out five times * in one day. * * THE CARD IS MODELLED ON A FORM GEREK SUPPLIED AS A REFERENCE - a * small coloured label, a title, one quiet line; short questions two to * a row and long ones the full width; soft tinted boxes; one wide * button with an arrow. In this site's navy, blue and orange. * * NOT MEASURED OFF ANYTHING. Every value is chosen from the tokens in * main.css; a change is a design call, not a fidelity regression. * * 01 TOKENS * 02 THE CARD * 03 THE HERO: WORDS AND MASCOT LEFT, FORM RIGHT * 04 THE FORM GRID, AND WHY A FIELD IS THREE ROWS * 05 A FIELD * 06 THE WEBSITE CHECKBOX * 07 LOCAL OR NATIONAL * 08 THE STRIP BEFORE THE OPTIONAL QUESTIONS * 09 THE SPAM CHECK, THE FAILURE NOTE, THE BUTTON * 10 BAND 4'S HEADING: ONE LINE IN ITS PILL * 11 THIS PAGE'S OWN PICTURES: BANDS 2, 4 AND 7 * ================================================================== */ /* ================================================================== * 01 TOKENS * * FOUR DIFFERENT INKS, ON PURPOSE. Gerek, looking at a card where the * title, every label and the line between the two halves were all the * same bold navy: "I just see a lot of the same text." So each kind of * text has its own: the title is navy, a question is near-black, an * example is grey, the strip sits on soft yellow, the small label on * top is orange. The eye can tell what a line IS before it reads it. * ================================================================== */ .lf-card { --lf-label: #14202c; /* a question: near-black with the navy's blue in it, 16:1 */ --lf-quiet: #55606e; /* the line under the title, and examples: 6.4:1 on white, 5.9:1 on the box tint */ --lf-border: #8492a6; /* a blue-grey hairline, 3.2:1 on white: enough for the edge of a control to be seen by everyone, soft enough not to look like a tax form */ --lf-fill: #f6f8fb; /* --c-grey-soft: the box is a tint, not a hole */ --lf-strip: #fff4cf; /* a soft yellow: the site's amber, let down with white */ --lf-error: #b3311a; /* 6.2:1 on white. The contact form's #dd4420 is 4.27:1 - fine for a border, short of the 4.5:1 that 13px error TEXT needs. Same red, a step down. */ --lf-error-line: #dd4420; /* the contact form's own, for borders */ --lf-error-fill: #fdf1ee; --lf-gap: 14px; /* under every box; also where a mistake is written */ --lf-box-pad: 11px; /* above and below the type in a box: 11 + 22 + 11 + 2 = 46px */ } /* ================================================================== * 02 THE CARD * * It sits in `.avc-hero__widget`, the live page's own slot for the * calendar. Its width is section 03's business: 600 at most while the * band is stacked, the whole of its own 580px column beside the words. * ================================================================== */ .lf-card { margin-inline: auto; padding: clamp(20px, 4vw, 30px) clamp(18px, 4vw, 32px) clamp(22px, 4vw, 32px); border: 1px solid rgba(6, 58, 108, 0.1); border-radius: 24px; background: var(--c-white); box-shadow: 0 14px 40px rgba(4, 30, 60, 0.32); } .lf-card__head { margin-bottom: 20px; text-align: left; } /* THE BAND IS `avc-dark`, which paints every h2 and every

inside it WHITE, at (0,1,1). On a white card that is white on white. So every heading and paragraph in the card states its own colour at (0,2,0). This is the trap that file's own header warns about, met from the other side. */ /* "START HERE", over the title. Gerek liked it and wanted it noticed: "make that a little bit bigger if you can, or put some moving arrows there." Both: 15px where it was 12, and two arrows after it pointing down at the first question. --c-orange-deep and not --c-orange: the brand orange is 3.0:1 on white, and this is small bold type. */ .lf-card .lf-card__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-orange-deep); text-align: left; } /* THE ARROWS MOVE SIX TIMES AND STOP. Not for ever, and that is this site's own rule, learned the hard way: a looping float was tried on the homepage hero and Gerek had it out - "annoying after 10 seconds" (BUILD-PLAN.md, "Motion policy"). A visitor spends a good deal longer than ten seconds beside this one, filling in eleven boxes. So they catch the eye when the page opens, which is the job, and are then still. To make them loop: `infinite` in place of the 6 below. Ask Gerek to look at it for a full minute first. Two heavy chevrons, the second starting a beat after the first so the pair reads as one movement downwards rather than two things bobbing in step. */ .lf-card__nudge { display: inline-flex; gap: 0; color: var(--c-orange); } .lf-card__arrow { width: 1.25em; height: 1.25em; margin-inline: -0.12em; animation: lf-nudge 1.1s ease-in-out 0.6s 6 both; } .lf-card__arrow + .lf-card__arrow { animation-delay: 0.78s; } @keyframes lf-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } } .lf-card .lf-card__title { margin: 0 0 6px; font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 2.5rem); /* 32 on a phone, 40 at desktop */ font-weight: 400; line-height: 1; letter-spacing: normal; text-transform: uppercase; color: var(--c-navy); text-align: left; } .lf-card .lf-card__intro { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--lf-quiet); text-align: left; } /* ================================================================== * 03 THE HERO: WORDS AND MASCOT LEFT, FORM RIGHT * * SIX PASSES AT THIS BAND, all on Gerek's eye, 2026-10-08: * * 1 two columns copied off his reference page, mascot dropped. * Wrong: the reference had been for the FORM's look. * 2 the live page's own arrangement, form in the calendar's slot. * Right setup; the button 90px under the fold on his screen. * 3 the same, closed right up. "Too far in the other direction... * this whole page just feels off balance." * 4 his own words: "the H1 and the texts are on the left side. We * move the caricature below that, and then we have the form more * vertical instead of wide." Built edge to edge under the header: * "Better, but... very heavy on one side and very open on the * left. [They] need to each come in about 50 to 100 pixels... * then the image can take up that space on the left side." * 5 The two columns come in from the header's edges; the mascot is * centred in the left column and bigger; the white summary is * pushed under the fold ("I really don't want it there... this * gets a human conversion first"). "We are getting better, but * still not there." * 6 THIS, which is 5 adjusted: the headline bigger (80, was 70), * the form 50px in from the right edge, and the form set lower so * its top is nearer the headline's. * * THE MARKUP IS THE LIVE TEMPLATE'S AND IS NOT REARRANGED. Its order - * headline, line, [form, mascot], summary - is the order it stacks in * below 993, as on the live page. From 993 `.avc-hero__book` becomes * `display: contents`, which dissolves the box round the form and the * mascot so that all five things are placed by ONE grid: * * (slack) | * headline | * line | form * mascot | * (slack) | * ---------- the fold ---------- * summary, full width * * THE FOLD IS BUILT IN. The form's cell is given a minimum height of * the screen less the header, so that the summary's row starts under * the bottom edge of the window whatever the window's height. The two * slack rows share what the words-and-mascot leave, so those sit in the * middle of it; the form sits low in it (see the cell's own note). A * tall screen gets air above the headline; a short one gets none; * neither shows the summary before a scroll. * * KEYED ON `:has(.lf-card)`, not on a class, so the band's markup stays * the live template's. A browser without :has() gets the live page's * arrangement with the form in the calendar's slot - which works. * * Each rule is one class heavier than the rule it answers in * ai-visibility-check.css, so the order the two files load in cannot * decide it. * ================================================================== */ .avc-hero:has(.lf-card) { --lf-top: 32px; padding-block: var(--lf-top) 60px; } .avc-hero:has(.lf-card) .avc-hero__headline { margin-bottom: 10px; } .avc-hero:has(.lf-card) .avc-hero__accent { margin-bottom: 18px; } /* The slot keeps its side inset - it is what holds the card off the band's edge on a phone - and gives up the 20px above and below. */ .avc-hero:has(.lf-card) .avc-hero__widget { margin-block: 0; } /* A form in one column reads best at about this width; the slot it sits in is as wide as the band while stacked. */ .avc-hero:has(.lf-card) .lf-card { max-width: 600px; } @media (min-width: 600px) { /* The live page gives the handwritten line 1.45 of leading from here up, measured, because over a calendar it could afford it. That is 23px of air on one line of type. */ .avc-hero:has(.lf-card) .avc-hero__accent { line-height: 1.1; } } @media (min-width: 769px) { .avc-hero:has(.lf-card) { --lf-top: 44px; padding-bottom: 80px; } } @media (min-width: 993px) { .avc-hero:has(.lf-card) { --lf-top: 24px; padding-bottom: 70px; } /* ONE GRID FOR ALL FIVE, on the width of the bands below: 1200, plus the 20px a side the live page insets every module by. Rows 1 and 5 are the slack. Row 6 is the summary. */ .avc-hero:has(.lf-card) > .container { /* 1240 of content: the bands' 1200 and 40 more, which is what lets the headline be 80px and still break in two - "about your business" is 556px wide at that size and the column is 570. */ max-width: calc(var(--container-band) + 40px + 2 * var(--avc-inset)); padding-inline: var(--avc-inset); /* THE FORM IS NOT HARD AGAINST THE RIGHT EDGE. Gerek, on a version where it was: "move it a little bit more to the left." Up to 50px of the band is left to its right, less on a narrow screen where the words need the room more. */ padding-right: calc(var(--avc-inset) + clamp(0px, 3.5vw - 16px, 50px)); grid-template-columns: minmax(0, 1fr) minmax(0, 580px); grid-template-rows: 1fr auto auto auto 1fr auto; column-gap: clamp(24px, 3vw, 44px); align-items: start; } .avc-hero:has(.lf-card) .avc-hero__book { display: contents; } /* THE FORM'S CELL, AND THE FOLD. As tall as the window less the header (92 + its 1px rule), less this band's top padding, less 20 so the card's shadow is not cut by the bottom edge. Capped, so a very tall monitor does not open a quarter of a screen of blue above the headline - on one of those the next band is in view anyway. A flex column; its minimum height is what stretches the two slack rows. THE CARD SITS LOW IN IT, NOT IN THE MIDDLE: four fifths of the spare height goes above the card and one fifth below. Centred, its top edge stood 70px above the headline's and the two columns read as starting at different heights. Gerek: "add another 20 to 40 pixels above the top of the form. Bring it closer to the level of the H1." The two pseudo-elements are the two shares. */ .avc-hero:has(.lf-card) .avc-hero__widget { grid-column: 2; grid-row: 1 / span 5; display: flex; flex-direction: column; min-height: min(100vh - var(--header-h) - 1px - var(--lf-top) - 20px, 1200px); margin: 0; } .avc-hero:has(.lf-card) .avc-hero__widget::before, .avc-hero:has(.lf-card) .avc-hero__widget::after { content: ""; flex: 4 1 0; } .avc-hero:has(.lf-card) .avc-hero__widget::after { flex-grow: 1; } .avc-hero:has(.lf-card) .lf-card { width: 100%; max-width: none; } /* 80px, where the live page's is 70 - "the H1: just make it bigger". It is the biggest it can be and still be two lines in this column. 5.2vw reaches it at 1540 and is 66 at 1280, 53 at 1024. `balance` breaks it "See what AI says / about your business" rather than six words over one. */ .avc-hero:has(.lf-card) .avc-hero__headline { grid-column: 1; grid-row: 2; margin: 0 0 14px; font-size: clamp(44px, 5.2vw, 80px); text-align: left; text-wrap: balance; } /* 44 at most, not the live page's 50, and two lines: the column is about 570px and the line is 650 wide at 44. Balanced, it breaks after "form." */ .avc-hero:has(.lf-card) .avc-hero__accent { grid-column: 1; grid-row: 3; margin: 0; font-size: clamp(28px, 3.1vw, 44px); text-align: left; text-wrap: balance; } /* THE MASCOT FILLS THE LEFT. Centred in his column under the words, which is the open space Gerek pointed at, and as big as the form's height leaves room for. His width is the smaller of a share of the screen's width and a share of its HEIGHT: he is half as tall again as he is wide, and on a short screen it is his height that would push the band past the form. */ .avc-hero:has(.lf-card) .avc-hero__media { grid-column: 1; grid-row: 4; justify-self: center; margin: 18px 0 0; } .avc-hero:has(.lf-card) .avc-hero__img { width: clamp(170px, min(23vw, 38vh), 330px); max-width: 100%; margin: 0; } /* UNDER THE FOLD, full width, under both columns - the live page's own box. The form's cell ends 20px above the bottom of the window, so 60 here starts it 40px below. */ .avc-hero:has(.lf-card) .avc-hero__summary { grid-column: 1 / -1; grid-row: 6; margin: 60px 0 0; } } /* A MIDDLING SCREEN - a 1080p monitor, about 950px under the browser's bars. At its full size the card is 880px tall and its button would be 15px under the fold there. Two pixels off each box and each gap, and a little off the card's own padding, is 50px. */ @media (min-width: 993px) and (max-height: 1019px) { .avc-hero:has(.lf-card) .lf-card { --lf-gap: 12px; --lf-box-pad: 10px; padding-block: 22px 24px; } .avc-hero:has(.lf-card) .lf-card__head { margin-bottom: 14px; } .avc-hero:has(.lf-card) .lf-form__optional { margin-bottom: 12px; } } /* A SHORT SCREEN - a 13 or 14 inch laptop, 800px or so under the browser's bars. Everything gives a little so the button stays in view: the padding, the type, and the card (40px boxes, 8px between rows). "Start here" stays - Gerek wants it seen - and the 20px it costs comes off the card's padding and the gaps round its title. Columns only - on a phone the form is taller than the screen whatever is done. 939 AND NOT 899: at its full size the card is about 800px tall, and it needs a 940px window to clear the fold with the header above it. */ @media (min-width: 993px) and (max-height: 939px) { .avc-hero:has(.lf-card) { --lf-top: 8px; } .avc-hero:has(.lf-card) .avc-hero__headline { margin-bottom: 6px; font-size: clamp(40px, 4.5vw, 64px); } .avc-hero:has(.lf-card) .avc-hero__accent { font-size: clamp(26px, 2.7vw, 36px); } .avc-hero:has(.lf-card) .avc-hero__media { margin-top: 10px; } .avc-hero:has(.lf-card) .lf-card { --lf-gap: 8px; --lf-box-pad: 8px; padding-block: 12px 14px; } .avc-hero:has(.lf-card) .lf-card__head { margin-bottom: 8px; } .avc-hero:has(.lf-card) .lf-card__eyebrow { margin-bottom: 3px; font-size: 13px; } .avc-hero:has(.lf-card) .lf-card__title { margin-bottom: 3px; font-size: 28px; } .avc-hero:has(.lf-card) .lf-card__intro { font-size: 14px; } .avc-hero:has(.lf-card) .lf-form__optional { margin: 0 0 8px; padding-block: 6px; } .avc-hero:has(.lf-card) .lf-form__submit { margin-top: 2px; padding-block: 9px; } } /* ================================================================== * 04 THE FORM GRID, AND WHY A FIELD IS THREE ROWS * * SHORT QUESTIONS TWO TO A ROW, LONG ONES THE FULL WIDTH, from 600 up. * Name | email, business | website and best-known-for | competitor are * the pairs. `--wide` and `--long` take the whole row. * * Two fields side by side do not always have labels of the same height * - the website's carries a checkbox - and a mistake under one would * push it out of line with the other. So every field is a SUBGRID * spanning three of the form's rows: the label, the box, the line for * a mistake. A pair shares those three rows, and the two boxes land on * one line whatever is above or below either. That is why a field's * children come in that order in the markup. * * Below 600 it is one column and none of that is needed. * ================================================================== */ .lf-form { display: block; } @media (min-width: 600px) { .lf-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; row-gap: 0; } .lf-field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } /* The label sits on the box, not at the top of a tall row. */ .lf-field > :first-child { align-self: end; } .lf-field--wide, .lf-field--long, .lf-form > noscript, .lf-form__optional, .lf-form__check, .lf-form__status, .lf-form__submit { grid-column: 1 / -1; } } /* ================================================================== * 05 A FIELD * ================================================================== */ /* THE [hidden] ATTRIBUTE MUST WIN. The city question is hidden with it until "Local or regional" is chosen, and `display: grid` above would otherwise show a question nobody was asked. */ .lf-form .lf-field[hidden] { display: none; } .lf-field > label, .lf-field .lf-field__top > label:first-child, .lf-field > .lf-label { display: block; margin: 0 0 5px; font-family: var(--f-body); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--lf-label); text-align: left; } /* The mark on the seven required questions. Decoration only - the boxes carry `required` themselves, which is what a screen reader reads. */ .lf-req { font-weight: 700; color: var(--lf-error-line); } /* 46px: 11 + 22 + 11 + 2 of border. 16px TYPE AND NOT A PIXEL LESS: iOS zooms the whole page when a field under 16px takes focus, and does not zoom back - eleven lurches on an eleven-question form. */ .lf-field input[type="text"], .lf-field input[type="email"] { display: block; width: 100%; padding: var(--lf-box-pad) 14px; border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-fill); font-family: var(--f-body); font-size: 16px; font-weight: 300; line-height: 22px; color: var(--c-ink); -webkit-appearance: none; appearance: none; transition: border-color var(--ease), background var(--ease); } /* THE THREE EXAMPLES, inside the boxes they are examples for. Grey and a size down, so nobody takes one for an answer already given. They are only on full-width boxes: "athletes, pregnant moms, small businesses, etc." does not fit in half a card, and an example cut off mid-word is worse than none. */ .lf-field input::placeholder { font-size: 15px; color: var(--lf-quiet); opacity: 1; /* Firefox dims placeholders by default */ } /* The ring is main.css's amber, inherited. The border goes to the brand blue with it and the tint clears to white, so the box being typed in is the brightest thing on the card. */ .lf-field input[type="text"]:focus-visible, .lf-field input[type="email"]:focus-visible { border-color: var(--c-blue-mid); background: var(--c-white); } /* SWITCHED OFF, AND IT HAS TO LOOK IT: the website box once "I don't have one yet" is ticked. Dashed and struck through, so what was typed is still there to come back to but plainly not being sent. */ .lf-field input:disabled { border-style: dashed; background: var(--c-white); color: var(--lf-quiet); text-decoration: line-through; cursor: not-allowed; } .lf-field [aria-invalid="true"] { border-color: var(--lf-error-line); } /* THE GAP UNDER A BOX AND THE PLACE A MISTAKE IS WRITTEN ARE THE SAME SPACE. Empty, this is the room between two rows of the form; with a mistake in it, it grows by exactly that line and no more. SHOWN EVEN WHEN `hidden`. The script hides this line with the attribute and empties it; if that removed the box, a field with no mistake would lose its gap and the row beneath would close up. Its being empty is what hides it. */ .lf-form .lf-field__error, .lf-form .lf-field__error[hidden] { display: block; min-height: var(--lf-gap); margin: 0; padding: 3px 0 0; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--lf-error); text-align: left; } .lf-form .lf-field__error:not(:empty) { padding-bottom: 8px; } /* The four optional questions carry no line for a mistake - nothing about them can be wrong - so their gap is their own. */ .lf-field:not(:has(.lf-field__error)) { padding-bottom: var(--lf-gap); } /* ================================================================== * 06 THE WEBSITE CHECKBOX * * On the label's own line, at the far end of it. It is the alternative * to the box below, so that is where the eye looks for it, and up there * it adds no height to the form. * ================================================================== */ .lf-field__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .lf-check { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 5px; font-size: 13.5px; font-weight: 400; line-height: 1.3; color: var(--lf-quiet); white-space: nowrap; cursor: pointer; } .lf-check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--c-navy); cursor: pointer; } /* A 17px box is a small thing to hit with a thumb. While stacked there is room to give the whole label a proper target. */ @media (max-width: 599px) { .lf-check { min-height: 32px; margin-bottom: 2px; font-size: 15px; } .lf-check input { width: 20px; height: 20px; } } /* ================================================================== * 07 LOCAL OR NATIONAL * * Two real radio buttons, each inside a label drawn as half of one * control the height of a text box. The radio itself is hidden from * the eye and nothing else: it still takes focus, still moves with the * arrow keys, and is still announced as one of two. * ================================================================== */ .lf-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .lf-choice__option { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(var(--lf-box-pad) * 2 + 24px); /* the height of a text box, whatever that is */ padding: 4px 10px; border: 1px solid var(--lf-border); border-radius: 12px; background: var(--lf-fill); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--lf-label); text-align: center; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); } .lf-choice__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .lf-choice__option:hover { border-color: var(--c-blue-mid); } /* The chosen half. :has() is in every current browser. */ .lf-choice__option:has(input:checked) { border-color: var(--c-navy); background: var(--c-navy); font-weight: 600; color: var(--c-white); } /* The radio is invisible, so the ring it would have had goes on the label that stands in for it. */ .lf-choice__option:has(input:focus-visible) { outline: 3px solid var(--c-amber); outline-offset: 2px; } .lf-field.is-invalid .lf-choice__option { border-color: var(--lf-error-line); } /* ================================================================== * 08 THE STRIP BEFORE THE OPTIONAL QUESTIONS * * The one place the form changes from must to may, and it has to LOOK * like a change. As a line of the same dark type between two blocks of * the same dark type it disappeared: "needs to be a different color, * probably the lighter blue... it's just too much of the same." * * So it is a strip. It was pale blue with blue words for one round; * Gerek, on seeing that: "should be in a yellow background, a softer * yellow. That way, it's easy to draw attention to the eye." So: a soft * yellow behind, the site's amber down the left edge, and the words in * the same near-black as the questions - 15:1 on the yellow. Blue words * on yellow would have been the one thing on the card harder to read * than before. * * SOFT, AND KEEP IT SOFT. This is the part of the form a visitor may * skip; the orange button is the part they must not. A strong yellow * here would be the loudest thing on the card and it would be pointing * at the optional questions. * ================================================================== */ .lf-card .lf-form__optional { margin: 6px 0 16px; padding: 10px 14px; border-left: 3px solid var(--c-amber); border-radius: 10px; background: var(--lf-strip); font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--lf-label); text-align: left; } .lf-card .lf-form__optional strong { font-weight: 700; } /* ================================================================== * 09 THE SPAM CHECK, THE FAILURE NOTE, THE BUTTON * ================================================================== */ /* INVISIBLE FOR NEARLY EVERYBODY, and then it must take no room at all. Cloudflare always puts its own element in here, so `:not(:empty)` is true even when nothing is showing and would open a gap above the button for everybody. The script adds `is-asking` only while Cloudflare actually wants a box ticked. */ .lf-form__check.is-asking { margin: 0 0 12px; } /* The contact form's failure note. */ .lf-card .lf-form__status { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--lf-error-line); border-radius: var(--radius); background: var(--lf-error-fill); font-size: 15px; font-weight: 400; line-height: 1.4; color: #8c2a13; /* 6.4:1 on the fill above */ text-align: left; } .lf-card .lf-form__status[hidden] { display: none; } /* THE SITE'S ORANGE PILL, the full width of the card, with an arrow. .cta-button is written for a link; as a