/* Siebert Creative — /brief-builder only. The $49 Brief Builder orderer landing page. Loaded AFTER design-system.css and site.css, and only by brief-builder.html. Everything the sales page already has is used from site.css: .band, .split, .s4-grid, .eyebrow, .title, .standfirst, .btn, .fineprint, .proof-cards / .proof-card, .faq-*, .flow-* , .row-seq (.row-build/.step-num/.gs-copy), .site-nav, .site-footer, #sticky-cta. Nothing above is restated here. What IS here is the handful of patterns this page needs that the site has no component for: the hero quote carousel, the raft/yacht comparison and the cream card it now sits in down in the pain, the forest preview card, the live free trial, the template-vs-BB pair, and the upgrade rail. All of them are built on the existing tokens (--forest/--cream/--gold/--sand-text/--line/--serif) so they read as the same site. THE HERO IS THE ONE SECTION THE v4.2 LAYOUT PASS RESTYLED. Everything below it kept the styling it already had; the pass moved things (the boats out of the hero and into the pain) or removed them (the buy button, the free-to-try note and the Fern & Field helper, all out of the demo intro) rather than redrawing them. The one later exception is §3's content column, which the follow-up pass resized to the boats graphic so the section centres on the card. If a change makes a section below the hero look new, that is still the thing to question. Colour rule inherited from design-system.css and applied throughout: SAND on cream, GOLD on forest. The v4.1 mockup used gold on the cream hero (the aim dot and the dotted aim line); those are sand here. */ /* ============================================================ HERO / copy stack The sub-copy is two paragraphs on this page and three on the designer one, not a single block, and every one of them takes the page's standard body setting (18px Inter / 1.7 / --ink-mid), the same one every section below the hero uses. The serif in this column is the h1's alone. .bb-hero-lead therefore styles nothing the body paragraphs do not. It marks the FIRST paragraph, which the phone stack below has to place on its own, above the art. The .standfirst beside it on that paragraph is a hook too: it is what the hero entrance in site.css keys its delay off. ============================================================ */ .bb-hero-lead, .bb-hero-body{font-family:var(--sans);font-size:18px;line-height:1.7;color:var(--ink-mid); margin:0 0 18px;max-width:480px;} /* Holds open the gap the single .standfirst used to leave above the button. */ .bb-hero-body + .btn{margin-top:14px;} /* Tablet and up, the sub-copy block scales down one step and sets tighter, so it stops crowding the h1 and stops running past the boats beside it. Phone widths keep the sizes above: there the column is the whole page, the art sits inside the copy, and the block has nothing to balance against. */ @media(min-width:769px){ .bb-hero-lead, .bb-hero-body{font-size:17px;line-height:1.55;margin:0 0 16px;} } /* ---------------------------------------------------------- copy A/B -- ?v=human-results. Both sets of copy ship in the markup and the pre-paint script in brief-builder.html's stamps ; these three rules are the only thing that reads it. THREE BLOCKS FORK, and the class names keep the bb-hero- prefix they were born with rather than churning the hero markup for a rename: §1 hero - eyebrow, h1, standfirst, and the body paragraph, which is .bb-hero-default because the alt runs one paragraph §2 demo intro - eyebrow, h2, paragraph §3 pain opener - h2, plus one alt-only paragraph in front of the opener Everything else on the page is a single shared node. That is the whole discipline of the test: the two arms are the same page with three copy blocks swapped, so a difference in conversion is a difference in copy. NOT scoped to a section, so a fourth block needs markup and nothing here. display:none rather than visibility or opacity, so the arm that lost takes no layout space and is out of the accessibility tree entirely. .bb-hero-alt is hidden by DEFAULT, not by a rule on the default arm, so the no-param page and the JavaScript-off page are the same page: no attribute, no alternate copy, every block exactly as authored. display:block is the right restore for all of them: .eyebrow sets it on the span already, and the headings and paragraphs are block anyway. It beats .eyebrow's own display on source order, not specificity - this file loads after site.css. If a node that is not block-level ever joins the fork, give it its own rule rather than loosening this one. */ .bb-hero-alt{display:none;} [data-bb-hero="human-results"] .bb-hero-alt{display:block;} [data-bb-hero="human-results"] .bb-hero-default{display:none;} /* Joins the hero entrance from site.css, between the lead and the CTA. */ .anim #s1 .bb-hero-body{opacity:0;transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease); transition-delay:calc(var(--hero-step) * 2.5);} .anim.hero-in #s1 .bb-hero-body{opacity:1;transform:none;} /* ============================================================ HERO / two-column layout (v4.2) The hero is the ONE section this pass restyles. The boats left it for the pain section, and the right column now carries the quote carousel, so the .split default (55fr/45fr, centred) is replaced: the copy takes the space it needs and the card column is pinned to the card's own width, so there is little empty space to the card's right. align-items:start tops the two columns off level, matching the "Try it right here" band below. At 768px site.css collapses .split to one column. The carousel does not stack under the copy there: js/brief-builder.js relocates it, as ONE node, into the slot under the demo module (see .bb-hq-slot), so the phone order is hero copy + CTA -> demo -> quotes -> pain. The gap goes to 0 because the right column is then an empty grid row. ============================================================ */ /* Scoped to the two-column widths on purpose. site.css collapses .split at 768px with a bare class selector, and #s1 .split outranks it, so writing this unscoped would keep the 300px card column on a phone and squeeze the copy into a one-word-per-line ribbon. */ @media(min-width:769px){ /* BOTH columns are capped, and justify-content:start packs them left. The copy column used to be 1fr, which stretched it to the full band and left a gap between the end of the text and the card; capping it at 600px - the measure the copy actually wants - pulls the card back beside the text and drops the leftover width to the right of the card, where it reads as margin rather than as a hole in the hero. 288 = the design's 285px card plus the track's 3px snap gutter. */ #s1 .split{grid-template-columns:minmax(0,600px) minmax(0,288px); gap:clamp(36px,26.667px + 2.593vw,64px);align-items:start; justify-content:start;} } @media(max-width:768px){ /* The right column is an empty grid row once the carousel has moved out. */ #s1 .split{gap:0;} /* Before the relocation runs (and with JavaScript off) the carousel is still in the hero, where it needs its own gap under the copy - and has to be told to fit it. A grid item's min-width is auto, and the carousel wants the 520px its stacked rule gives it, so without these two the one-column hero sizes itself to the carousel and the whole page scrolls sideways. Only the no-JS path ever sees this: with the script running, the carousel has already left for the slot under the module by this width. */ #s1 .split > div{min-width:0;} #s1 .bb-hq{margin-top:26px;max-width:100%;} } /* ============================================================ HERO — trust row The mockup's above-fold micro-row. .fineprint already covers the proof line under it, so this is only the one row. ============================================================ */ .bb-trust{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:16px 0 0; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--forest);} .bb-trust .bb-trust__d{color:var(--ink-soft);font-weight:400;} /* Each claim is one unbreakable unit. The row still wraps BETWEEN items (that is what flex-wrap is for, and the orderer page's three items need it at phone widths), but a claim never breaks across lines mid-phrase. */ .bb-trust > span{white-space:nowrap;} /* Joins the hero entrance sequence from site.css. The row sits between the button and the fineprint, so it takes a delay between theirs; without this it would be the one element already on screen while the rest fade in. */ .anim #s1 .bb-trust{opacity:0;transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease); transition-delay:calc(var(--hero-step) * 3.25);} .anim.hero-in #s1 .bb-trust{opacity:1;transform:none;} /* ============================================================ HERO — the quote carousel (new component, v4.2) Four verbatim beta quotes, one card at a time, in the hero's right column on desktop and under the demo module on a phone. It is the SAME card as the §6 .proof-card lower down - terracotta quote mark, serif quote with a sand emphasis span, then a rule and the name anchored to the card bottom - at the size the hero column has room for. One deliberate delta from .proof-card, from the design source: the card is WHITE rather than cream, so it lifts off the cream hero (the §6 cards sit on forest). White alone is the whole lift - the hairline and the drop shadow it used to carry are gone, because two devices doing one job made the card read as a floating widget rather than as the same quote card the page already uses. Radii are the site's 4px, not the mockup's 12px, for the reason every other radius on this page is 4px. The track is a scroll-snap row, so a swipe is the browser's own and works with no JavaScript at all; the dots, the autoscroll and the analytics are what js/brief-builder.js adds on top. There is exactly ONE of these per page - the phone position is the same node moved, never a second copy, so the hero_quote_view events are not doubled. ============================================================ */ .bb-hq{width:100%;max-width:288px;} .bb-hq__track{display:flex;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} .bb-hq__track::-webkit-scrollbar{display:none;} /* padding-right keeps the snap from catching the next card's edge. */ .bb-hq__slide{flex:0 0 100%;scroll-snap-align:start;min-width:0;display:flex; margin:0;padding-right:3px;} .bb-hq__card{flex:1;display:flex;flex-direction:column;background:var(--color-bg-card); border:none;border-radius:4px;box-shadow:none; padding:clamp(24px,18.667px + 1.481vw,32px);} .bb-hq__qm{display:block;font-family:var(--serif);font-size:52px;line-height:.4;height:30px; color:var(--accent);user-select:none;} .bb-hq__body{font-family:var(--serif);font-weight:400; font-size:clamp(18px,16px + 0.556vw,21px);line-height:1.32;color:var(--ink);margin:20px 0 0;} .bb-hq__body .bb-hq__e{color:var(--sand-text);} .bb-hq__foot{margin-top:auto;padding-top:24px;} .bb-hq__rule{border-top:1px solid var(--line);margin-bottom:14px;} .bb-hq__name{font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--ink-mid);margin:0;} /* The dot the reader SEES is 8px on an 8px gap, the design's own pitch. The BUTTON around it is 16px wide and takes the design system's 44px minimum height, so the target is 16x44 rather than 8x8. It is drawn as a pseudo-element for that reason: a real 44x44 target on a 16px pitch would have to overlap its neighbours, and an overlapping target is worse than a small one - the reader would press one dot and page to another. The row needs no top margin because the 44px button carries the gap itself. */ .bb-hq__dots{display:flex;justify-content:center;} .bb-hq__dot{position:relative;width:16px;min-height:44px;border:none;background:none; padding:0;cursor:pointer;} .bb-hq__dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px; margin:-4px 0 0 -4px;border-radius:50%;background:var(--line); transition:background var(--dur-quick) var(--ease);} .bb-hq__dot.is-on::before{background:var(--sand-text);} /* The phone home for the carousel, under the demo module. Out of the flow on desktop; js/brief-builder.js moves the one carousel node into it at 768px and back out again above it. Its "What people are saying" eyebrow lives in the SLOT rather than travelling with the carousel, which is what makes it mobile-only without a second rule: in the hero the quotes need no label, because they are plainly the second half of the hero. Under the module they are a new block after the demo and want naming. display:none on the slot covers the eyebrow for free. */ .bb-hq-slot{display:none;} .bb-hq-slot__eb{margin-bottom:14px;} @media(max-width:768px){ .bb-hq-slot{display:block;margin-top:clamp(28px,25.333px + 0.741vw,36px);} /* Compact card once it stacks, so the quotes stay close to the module: smaller type and padding, same anatomy, name still on the card bottom. */ .bb-hq{max-width:520px;} .bb-hq__card{padding:18px 20px;} .bb-hq__qm{font-size:44px;height:24px;} .bb-hq__body{font-size:15px;line-height:1.42;margin:14px 0 0;} .bb-hq__foot{padding-top:16px;} .bb-hq__rule{margin-bottom:11px;} } /* ============================================================ THE RAFT / YACHT COMPARISON (new pattern) Two stacked scenes. The boats, the island and the AIMED marker are fixed sizes; only the waterline and the dotted aim line flex with the viewport, so the art never distorts. Both boat SVGs are placed at a fixed height with width:auto — their viewBoxes (561x664 and 1434x697) carry the ratio. ============================================================ */ .bb-compare{display:flex;flex-direction:column;gap:34px;width:100%;max-width:600px;} .bb-chart{margin:0;} .bb-scene{position:relative;width:100%;} .bb-scene--sail{height:90px;} .bb-scene--yacht{height:108px;} /* Waterline. --line is the site's hairline; on cream it reads as horizon. */ .bb-scene__wl{position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--ink-soft);} .bb-scene__boat{position:absolute;left:0;bottom:26px;width:auto;display:block;} .bb-scene--sail .bb-scene__boat{height:60px;} .bb-scene--yacht .bb-scene__boat{height:80px;} .bb-scene__goal{position:absolute;right:0;bottom:26px;height:58px;width:auto;display:block;} .bb-scene__dot{position:absolute;left:180px;bottom:40px;width:26px;height:26px;display:block;} .bb-scene__lab{position:absolute;left:168px;bottom:70px;width:50px;text-align:center; font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--sand-text);} .bb-scene__aim{position:absolute;left:210px;right:78px;bottom:47px;display:flex;align-items:center;} .bb-scene__aim .bb-scene__dots{flex:1;height:0;border-top:2.4px dotted var(--sand-text);} .bb-scene__aim .bb-scene__arw{width:0;height:0;border-top:6px solid transparent; border-bottom:6px solid transparent;border-left:10px solid var(--sand-text);} /* Caption. Sizes track .caption and .tl-eyb rather than inventing a third pair. */ .bb-cap{margin-top:12px;text-align:left;} .bb-cap__lab{display:block;font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--forest);margin-bottom:4px;} .bb-cap__desc{display:block;font-family:var(--serif);font-style:italic;font-size:15px; line-height:1.4;color:var(--forest);} @media(max-width:460px){ .bb-compare{gap:26px;} .bb-scene--sail{height:76px;} .bb-scene--yacht{height:92px;} .bb-scene--sail .bb-scene__boat{height:48px;} .bb-scene--yacht .bb-scene__boat{height:64px;} .bb-scene__goal{height:46px;} .bb-scene__wl,.bb-scene__boat,.bb-scene__goal{bottom:22px;} .bb-scene__dot{left:148px;bottom:34px;width:22px;height:22px;} .bb-scene__lab{left:136px;bottom:60px;font-size:10.5px;} .bb-scene__aim{left:176px;right:60px;bottom:39px;} .bb-cap__lab{font-size:11px;letter-spacing:.07em;} .bb-cap__desc{font-size:13px;} } /* ============================================================ §3 THE PAIN — the content column Sized by the boats graphic rather than by the page's usual reading measure: 640px capped, 60px of side padding, so the inner column is 520px - exactly the card's width. Heading, body and card therefore share one edge and the whole column centres in the band, with the text left-aligned inside it. The band's own watermark ring stays where it is behind all of it. The 60px goes at the phone break, where the band's gutter is already the only padding the card needs and 120px of it would cramp the graphic. ============================================================ */ .bb-pain-col{max-width:640px;padding:0 60px;} @media(max-width:768px){ .bb-pain-col{padding:0;} } /* ============================================================ THE BOATS AS A PAIN CARD (v4.2) The comparison left the hero and now sits inside §3, between "no way to steer it. It comes back looking finished." and the gold pull quote: the visual meets the copy at the line it illustrates, and cream on forest pops. Same box as .bb-aimcard - the other cream card on a forest band - at the site's 4px radius rather than the mockup's 16px. The shadow is the one thing it does not share: this card floats over the band's watermark ring, the aim card sits flat on plain forest. 520px is the graphic's own width, so the card is the boats plus its padding and nothing wider. .bb-compare's own 600px cap is dropped here because the card is the measure now. ============================================================ */ .bb-paincard{background:var(--cream);color:var(--ink);border:1px solid var(--line); border-radius:4px;padding:clamp(22px,18.667px + 0.926vw,32px);max-width:520px; margin:26px 0 30px;box-shadow:0 20px 50px rgba(0,0,0,.24);} .bb-paincard .bb-compare{margin:0;max-width:none;} /* ============================================================ THE FOREST PREVIEW CARD Lifted from the Brief Builder's own trial screens (.prev in Reference/BB_49_Trial_Screens_Mockup_v1.html), so the block on this page and the block inside the tool are the same object: a forest panel, a CREAM eyebrow behind a GOLD sparkle, and the reader's own answers set in GOLD ITALIC at 24px. Only the corner radius is the site's 4px rather than the tool's 12px. ============================================================ */ .bb-preview{background:var(--forest);border-radius:4px;padding:22px 24px;} .bb-preview__eb{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);margin:0 0 11px;} .bb-preview__eb svg{width:14px;height:14px;flex:none;} .bb-preview__st{font-family:var(--serif);font-size:24px;line-height:1.5;color:var(--cream);margin:0;} .bb-preview__st .bb-fill{color:var(--gold);font-style:italic;} .bb-preview__st .bb-ph{color:rgba(247,244,238,.45);font-style:italic;} .bb-preview__st .bb-live.is-done .bb-ph{display:none;} @media(max-width:520px){ .bb-preview{padding:18px 18px;} .bb-preview__st{font-size:20px;} } /* ============================================================ THE LIVE TRIAL (new pattern) The free "Try it right here" module: the REAL Brief Builder Audience and Moment screens, gated, plus the two net-new screens (the reward and the upgrade). Drawn from Reference/BB_49_Trial_Screens_Mockup_v1.html; the mockup's own palette maps onto site tokens (sienna -> --sand-text, sage -> --color-accent-subtle, rule -> --line) and every radius comes down to the site's 4px. GATING. There is no signup, no export, no save-to-file and no blank-start control anywhere in here, and js/brief-builder-trial.js writes nothing to storage. The tag at the top of both step screens is the whole contract: free to try, no signup, nothing to save. No red, and the only two accents are the site's: forest for "keep going", burnt sand for the $49 buy. ============================================================ */ /* ---- "Try it right here" is a two-column band: the promise on the left, the module actually running on the right, so the proof sits beside the claim instead of under it. align-items:start tops the copy off level with the card rather than centring it against a much taller module. Below 820px the two stack and the module takes the full width, where it gets its top margin back. ---- */ .bb-try{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,17.333px + 2.083vw,44px); align-items:start;} .bb-try__intro .title{margin-bottom:20px;} .bb-try__intro > p:last-child{margin-bottom:0;} /* ---- The module column: the module itself, and under it (on a phone only) the quote carousel. The intro beside it used to carry a buy button, the free-to-try note and the Fern & Field helper. The button went first - the module has its own CTA on its last screen and the nav CTA is sticky - and the two notes are now gone too, so nothing stands between the reader and the running module. Both promises are still made INSIDE the module, on its own step screens, which is where they are load-bearing: the free-to-try tag at the top of steps 1 and 2, and the "Stuck? Load the Fern & Field example" control under each preview. ---- */ .bb-try__mod{min-width:0;} /* ---- The hand-drawn arrow, desktop only. It fills the space the top-aligned intro leaves in the left column and points the eye across to the module. Purely decorative, so it is aria-hidden in the markup and simply goes at the width where the two columns stack and there is no "across" to point at. ---- */ .bb-tryarrow{display:block;width:100%;height:auto;margin:20px 0 0;} @media(max-width:820px){ .bb-tryarrow{display:none;} } /* min-width:0 so a long unbroken string inside a screen cannot push the column wider than its track. Width now comes from the grid, not a max-width. */ .bb-trial{min-width:0;scroll-margin-top:calc(var(--nav-height) + 24px);} @media(max-width:820px){ .bb-try{grid-template-columns:1fr;gap:0;} .bb-trial{margin-top:clamp(36px,29.333px + 1.852vw,56px);} } /* One screen at a time, but only once JS is here to switch between them. With JavaScript off the four screens render stacked and every string stays readable, which is the rule the rest of the page follows. */ .js .bb-trial__screen{display:none;} .js .bb-trial__screen.is-current{display:block;} .bb-trial__screen + .bb-trial__screen{margin-top:20px;} /* Focus lands on the screen heading after every move so a keyboard or screen reader arrives where the eye does. It is programmatic, so no ring. */ .bb-trial [data-bb-focus]:focus{outline:none;} /* ---- the screen card ---- */ .bb-tool{background:var(--color-bg-card);border:1px solid var(--line);border-radius:4px; padding:clamp(22px,14px + 2.222vw,38px) clamp(20px,10.667px + 2.593vw,40px);} /* ---- trial chrome: a two-segment bar in place of "Section X of 11", and the free-to-try promise the try-section copy makes. ---- */ .bb-tool__head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px; flex-wrap:wrap;margin-bottom:30px;} .bb-tool__prog{display:flex;gap:8px;} .bb-tool__seg{width:54px;height:6px;border-radius:99px;background:var(--line);} .bb-tool__seg.is-done{background:#AED0BC;} .bb-tool__seg.is-active{background:var(--sand-text);} .bb-tool__tag{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px; font-weight:600;color:var(--ink-mid);margin:0;} .bb-tool__tag svg{width:14px;height:14px;flex:none;} /* ---- screen head: chip, eyebrow, title, subhead ---- */ .bb-tool__shead{display:flex;align-items:flex-start;gap:16px;} .bb-tool__chip{width:46px;height:46px;border-radius:4px;background:var(--color-accent-subtle); display:grid;place-items:center;flex:none;} .bb-tool__chip svg{width:24px;height:24px;} .bb-tool__eb{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-mid);margin:0 0 2px;} .bb-tool__ti{font-family:var(--serif);font-weight:400;font-size:clamp(25px,22.333px + 0.741vw,30px); line-height:1.1;color:var(--ink);margin:0;} .bb-tool__sub{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-mid);margin:8px 0 0;} /* ---- "Stuck? Load the Fern & Field example". Never fires on its own: the trial always opens empty, and this is the only thing that fills it. It sits under the preview box, not above the fields: the reader meets the empty fields first and only looks for a way out once the sentence above has shown them what a filled-in answer builds. ---- */ .bb-example{display:flex;justify-content:flex-start;margin:14px 0 0;} .bb-example__btn{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--sand-text); background:none;border:0;border-bottom:1px dotted var(--sand-text);border-radius:0; padding:0 0 2px;min-height:0;cursor:pointer; transition:color var(--dur-quick) var(--ease),border-color var(--dur-quick) var(--ease);} .bb-example__btn:hover,.bb-example__btn:focus{color:var(--color-sand-strong); border-bottom-color:var(--color-sand-strong);} /* ---- a field: a QUESTION label, a (?) that opens the hint, and the hint again as ghost text inside the empty input ---- */ .bb-field{margin-top:20px;position:relative;} .bb-field__head{display:flex;align-items:center;gap:8px;margin-bottom:7px;} .bb-field__label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-mid);} .bb-field__q{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--sand-text); color:var(--sand-text);background:none;font-family:var(--sans);font-size:10px;font-weight:600; line-height:1;padding:0;min-height:0;display:inline-flex;align-items:center;justify-content:center; flex:none;letter-spacing:0;cursor:pointer; transition:background var(--dur-quick) var(--ease),color var(--dur-quick) var(--ease);} .bb-field__q:hover,.bb-field__q[aria-expanded="true"]{background:var(--sand-text);color:var(--cream);} .bb-field__wrap{position:relative;} /* Written as input.bb-field__in, not .bb-field__in. design-system.css styles input[type="text"] in its element layer, which outranks a bare class, so a class alone would silently lose its padding, type size and radius to it. Fill and border are set here rather than inherited: the live Brief Builder tool draws its fields white on a #D6D2C9 hairline, and the trial has to look like the thing it is a trial of, so it overrides the design system's cream input fill. The border is the tool's literal value, not --line (#DDD9D1), because matching the tool is the point. Focus is still left to the design system (forest ring, forest border, pale green fill). */ input.bb-field__in{display:block;width:100%;border:1px solid #D6D2C9;border-radius:4px; padding:11px 13px;font-family:var(--sans);font-size:15.5px;line-height:1.4;color:var(--ink); background-color:#fff;-webkit-appearance:none;appearance:none;} /* The in-field hint is drawn rather than set with the placeholder attribute: one of them has to italicise a single word ("the need BEHIND the need"), and ::placeholder cannot hold markup. It matches the input's own type size and inset so it sits exactly where the first character will, takes the same --ink-soft the design system gives ::placeholder, and is pointer-events:none so a click still lands on the input. .is-filled clears it the moment a character is typed; aria-describedby carries it while it shows. */ .bb-field__ph{position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%); font-family:var(--sans);font-size:15.5px;line-height:1.4;color:var(--ink-soft); pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bb-field__ph i{font-style:italic;} .bb-field.is-filled .bb-field__ph{display:none;} /* ---- THE FIELD HELP CARD ---- One component, used twice: the trial's (?) popover and the played hint in the "Isn't this just a template?" animation. Both carry the same content - the hint, then "Example:", then the examples - so they are written as one rule set here and differ only in how they are placed and revealed, further down. Anything added to the card belongs in this block, so the two cannot drift apart again. Every value is the live Brief Builder tool's own field-help card, the way input.bb-field__in above is the tool's own field. It was previously styled off the trial mockup's "creative" DEFINITION tooltip, a different and deliberately more prominent object - wider chrome, bigger padding, a heavier shadow, a 13.5px "Example:" label and hand-drawn 4px bullets - which is what made it read oversized next to the tool. No pointer arrow: the tool's card sits square under the field. Written as .bb-pop .bb-pop__lab, not .bb-pop__lab, because the `p` rule below is more specific than a bare class and silently ate the label's margin. */ .bb-pop,.bb-prompt__tip{ background:#F7F4EE;border:1px solid #D6D2C9;border-radius:4px;padding:13px 15px; box-shadow:0 14px 34px rgba(30,64,53,.18); font-family:var(--sans);font-size:13.5px;line-height:1.55;color:#1A1916;} .bb-pop[hidden]{display:none;} /* The hint sentence lives in a

, and design-system.css styles bare `p` in its element layer (17px on --leading-relaxed, its own font stack). An element rule beats inheritance outright, so the card's own 13.5px/1.55 never reached its body text and the hint rendered a third larger than the tool's - and larger than the example list right under it, which sets its size on the