/* ⚠ HEADINGS ARE GENERAL SANS, 2026-09-20. These four were the last Cormorant Garamond headings on the site: the audit pages were not in the redesign that shipped the day before, so "See what your website is costing you." and "What the audit found" were still set in a serif nothing else uses. 🚫 No serif or script faces anywhere in Kreated. ========== ================================================================ KREATED V2 — /free-website-audit/ This route opens on light paper and travels into night, the same journey the homepage makes. sets the starting theme in markup, atmosphere.js drives it, and data-atmos-anchor on the "What the audit checks" section says where the inversion fires. ⚠ WHY THE ANCHOR IS WHERE IT IS. The hero AND the result container sit above it, so an audit result is read on paper however long it runs. A findings document that changes theme under the reader mid-sentence is the one thing this layout must not do. ⚠ EVERY COLOUR HERE IS A TOKEN. --ground, --ink-1..4, --accent, --surface, --stroke all interpolate on --k, so one rule set serves both halves of the journey. 🚫 Do not hardcode a hex that has to work in both. The two exceptions are the hero glow and the card wash, which are rgba blues layered over the ground and are meant to read as light rather than as paint. ⚠ NO FULL-BLEED SECTION BORDERS. ~50 of them across the site were the single largest continuity defect: each page read as stacked bands rather than one environment. Structure comes from type scale and section padding instead. 🚫 Do not put a page-width border back on a section. ⚠ leaf.css is loaded by this page for ONE component: the native
FAQ. Nothing else from it is used. ========================================================================== */ /* ========================================================================== 1. THE HERO ========================================================================== */ .ah{ position:relative; padding:clamp(96px,11vh,150px) 0 clamp(40px,6vw,74px); /* ⚠ isolate, so the glow's blend cannot reach the fixed .atmos layer behind the document. Without it the two light sources multiply and the hero develops a hard edge where the glow's radius ends. */ isolation:isolate; } /* The blue arriving from below. It is the same idea as .atmos, scoped to the hero and anchored off the BOTTOM edge, so the light comes up into the composition rather than sitting behind the headline. ⚠ THE STOPS ARE THE WHOLE POINT. Five of them, easing to fully transparent well inside the layer, is what keeps the edge invisible. A two-stop gradient to `transparent` terminates in a visible ring, which is exactly the kind of seam this page was rebuilt to remove. 🚫 Do not simplify these. */ .ah__glow{ position:absolute;z-index:-1;pointer-events:none; /* 🚨 IT MUST OVERHANG THE SECTION. With inset:0 the layer stopped exactly at the hero's bottom edge while the gradient was still at roughly a fifth of its strength there, which painted a hard horizontal line straight across the page — visible in the render as a band edge under the fact strip, and precisely the seam this page exists to not have. The overhang lets the light finish fading in the section below, where nothing is drawn. 🚫 Do not put inset:0 back. */ inset:0 0 -340px 0; background: radial-gradient(120% 78% at 50% 96%, rgba(33,72,216,.20) 0%, rgba(33,72,216,.12) 22%, rgba(33,72,216,.055) 44%, rgba(33,72,216,.018) 64%, rgba(33,72,216,0) 84%), radial-gradient(66% 52% at 90% -6%, rgba(91,134,255,.11) 0%, rgba(91,134,255,.04) 40%, rgba(91,134,255,.012) 62%, rgba(91,134,255,0) 82%); /* 🚨 THE MASK IS WHAT ACTUALLY GUARANTEES NO EDGE, and the overhang alone did not. An ellipse whose centre sits below the box is at its STRONGEST along the bottom edge, so it gets cut there however far the layer is extended: moving the overhang only moved the line further down the page. The mask forces the layer's own alpha to zero before its bottom edge, so the light fades out no matter what the radials underneath are doing. 🚫 Do not remove this and rely on the gradient stops alone. */ -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.16) 88%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.16) 88%, transparent 100%); /* strongest on paper, where it is the only atmosphere; it steps back at night because .atmos is already carrying the room by then */ opacity:calc(1 - var(--k) * .45); } .ah__in{ max-width:1000px; text-align:center; } .ah__h{ margin:0 0 clamp(16px,1.8vw,24px); font-family:'General Sans',system-ui,sans-serif; font-weight:400; font-size:clamp(40px,6.2vw,84px); line-height:1.02; letter-spacing:-.015em; color:var(--ink-1); text-wrap:balance; } .ah__lead{ max-width:56ch; margin:0 auto clamp(30px,3.6vw,46px); font-size:clamp(16px,1.25vw,19px); line-height:1.62; color:var(--ink-3); text-wrap:pretty; } /* ---- the form, as the primary object ------------------------------------ A single elevated card rather than a column of fields. The wash is a very low-alpha blue over the ground, not a solid fill, so it reads as a raised plane in the same light rather than as a box pasted on top. */ .ah__card{ position:relative; max-width:760px; margin:0 auto; padding:clamp(20px,2.4vw,32px); text-align:left; border:1px solid var(--stroke); border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,calc(.55 - var(--k) * .49)) 0%, rgba(255,255,255,calc(.30 - var(--k) * .27)) 100%), linear-gradient(180deg, rgba(33,72,216,calc(.030 + var(--k) * .020)) 0%, rgba(33,72,216,calc(.008 + var(--k) * .010)) 100%); box-shadow: 0 1px 0 rgba(255,255,255,calc(.6 - var(--k) * .55)) inset, 0 18px 44px -28px rgba(10,20,60,calc(.34 + var(--k) * .30)); backdrop-filter:blur(2px); } /* ⚠ .ilink IS ALSO WHITE. leaf.css sets it for the service pages, which are night. In the failure card on paper it rendered as an invisible gap in the middle of a sentence: "You can also ________ and get a straight answer." The underline was the only thing showing. */ .ah__nojs .ilink, .aud .ilink, .ax .ilink{color:var(--ink-1);border-bottom-color:var(--accent)} .ah__nojs .ilink:hover, .aud .ilink:hover, .ax .ilink:hover{border-bottom-color:var(--ink-1)} /* ⚠ FOUR INHERITED RULES HAVE TO BE UNDONE HERE, and all four are correct where they come from. styles.css owns the form component for the contact page and the other conversion routes, and every one of those is night territory. This route is the first that is not. 1. .kform carries a border-top and top padding, which the old markup cancelled with `.page .kform`. This card is not inside `.page`, so the rule came back and painted a hairline across the top of the card. 2. .field inputs are `color: var(--white)`. On paper that is WHITE TEXT IN A WHITE FIELD: the visitor cannot read what they are typing. This was the worst defect on the redesigned page. 3. .err is #FFB4B4, a pale pink sized for a dark ground, which on paper is roughly 1.6:1 and unreadable — and it is the text that carries the error, so it is the one thing that must never be invisible. 4. .ilink, handled just above. 🚫 Do not fix any of these in styles.css. Every other form on the site is dark and every one of those values is right there. */ .ah__card .kform{border-top:0;padding-top:0} .ah__card .field input, .ah__card .field select, .ah__card .field textarea{ color:var(--ink-1); background:color-mix(in srgb, var(--ink-1) 3%, transparent); border-color:var(--stroke-hi); } .ah__card .field input:hover, .ah__card .field textarea:hover{border-color:var(--accent)} .ah__card .field input:focus-visible, .ah__card .field textarea:focus-visible{ border-color:var(--accent); background:color-mix(in srgb, var(--ink-1) 5%, transparent); } .ah__card .field input::placeholder, .ah__card .field textarea::placeholder{color:var(--ink-4);opacity:1} /* #A32017 on the day ground and #FFB4B4 on the night one. Both clear 4.5:1 against their own half of the journey, and they swap on --k with everything else. Colour is still not the only signal: the message itself is the error. */ .ah__card .err{color:color-mix(in srgb, #A32017, #FFB4B4 calc(var(--k) * 100%))} .ah__card .field.is-bad input, .ah__card .field.is-bad select, .ah__card .field.is-bad textarea{ border-color:color-mix(in srgb, #C0342A, #FF8A8A calc(var(--k) * 100%)); } /* the address plus the button: one row on desktop, stacked on a phone */ .af-form__lead{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; } .af-form__lead .field{margin:0} .af-form__go{ /* matches the input's height so the row reads as one control */ height:56px; white-space:nowrap; } @media (max-width:720px){ .af-form__lead{grid-template-columns:minmax(0,1fr)} .af-form__go{width:100%} } /* ⚠ The remaining fields are still REQUIRED and still visible. They are set below a hairline as "how the result reaches you", not hidden behind a disclosure: a required field inside a collapsed panel is a form that fails validation for reasons the visitor cannot see. 🚫 Do not put them in a
. */ .af-form__rest{ margin-top:clamp(18px,2vw,24px); padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--stroke); } .ah__facts{ display:flex;flex-wrap:wrap;justify-content:center; gap:10px clamp(18px,2.4vw,32px); margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none; font-size:13.5px;letter-spacing:.01em;color:var(--ink-4); } .ah__facts li{display:flex;align-items:center;gap:9px} .ah__facts li::before{ content:"";width:5px;height:5px;border-radius:50%; background:var(--accent);opacity:.75;flex:0 0 auto; } .ah__nojs{ max-width:60ch; margin:clamp(20px,2.4vw,28px) auto 0; font-size:14px;line-height:1.6;color:var(--ink-4); } /* ========================================================================== 2. THE SECTIONS BELOW THE FOLD ========================================================================== */ .ax{padding:clamp(56px,7vw,104px) 0} .ax--close{padding-bottom:clamp(64px,8vw,120px)} .ax__h{ margin:0 0 clamp(8px,1vw,12px); font-family:'General Sans',system-ui,sans-serif; font-weight:400; font-size:clamp(28px,3.6vw,48px); line-height:1.08; letter-spacing:-.01em; color:var(--ink-1); } .ax__sub{ margin:0 0 clamp(28px,3.4vw,44px); font-size:16px;color:var(--ink-4); } .ax__h + .ax__grid, .ax__h + .ax__steps, .ax__h + .ax__get{margin-top:clamp(28px,3.4vw,44px)} /* ---- what the audit checks ---------------------------------------------- */ .ax__grid{ display:grid; /* ⚠ AN EXPLICIT COUNT, NOT auto-fit. There are exactly six cells, and with auto-fit a 1440 viewport fitted four on the first row and left TWO EMPTY CELLS on the second, which rendered as a grey block because the rule lines are made of the grid's own background. Three columns divide six exactly; two and one do as well. 🚫 Do not put auto-fit back unless the number of cells stops being a multiple of the column counts below. */ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0;padding:0;list-style:none; /* ⚠ the 1px gap plus a background is the RULE SYSTEM: the lines are the gaps between cells, so they stop exactly at the grid and never run to the viewport edge the way the old section borders did */ background:var(--stroke); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; } .ax__c{ padding:clamp(22px,2.4vw,32px); background:var(--ground); transition:background-color var(--t-fast,.18s) ease; } .ax__c:hover{background:var(--surface)} .ax__c h3{ margin:0 0 10px; font-size:17px;font-weight:500;letter-spacing:-.005em;color:var(--ink-1); } .ax__c p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-3)} /* ⚠ THE LIMITATION NOTE, added 2026-09-02. Sits under the six-cell grid and states what the tool cannot see. It is deliberately NOT styled as fine print: the honesty is the product, so it reads at the same size as the cell copy, set apart by a rule rather than by being made small and grey. 🚫 Do not shrink it, hide it, or move it below the fold of the section. */ .ax__note{ max-width:76ch; margin:clamp(20px,2.4vw,28px) 0 0; padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--stroke); font-size:15px;line-height:1.62;color:var(--ink-3); } /* ---- how it works -------------------------------------------------------- */ .ax__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(24px,3vw,44px); margin:0;padding:0;list-style:none;counter-reset:none; } .ax__steps li{position:relative;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--stroke)} /* ⚠ --accent is SAFE here, and the reason is worth writing down because it looks unsafe. --accent's dark-half definition is color-mix(#FFFFFF, --bx-acc-night, --p2), so the instant --k flips to 1 the accent is WHITE and it travels to cobalt as the night closes in. It is never the near-black dusk value on a dark ground. Measured 11.9:1 immediately after the inversion. */ .ax__n{ display:block;margin-bottom:12px; font-size:12px;font-weight:600;letter-spacing:.24em; color:var(--accent); } .ax__steps h3{ margin:0 0 9px; font-size:19px;font-weight:500;letter-spacing:-.005em;color:var(--ink-1); } .ax__steps p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-3)} /* ---- what you get -------------------------------------------------------- */ .ax__get{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(22px,2.6vw,38px); margin:0;padding:0;list-style:none; } .ax__get h3{ margin:0 0 9px; font-size:17px;font-weight:500;color:var(--ink-1); } .ax__get h3::before{ content:"";display:block;width:24px;height:2px;margin-bottom:14px; background:var(--accent);opacity:.8; } .ax__get p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-3)} /* ---- the close ----------------------------------------------------------- */ .ax__close{max-width:760px;text-align:center} .ax__closeh{ margin:0 0 clamp(14px,1.6vw,20px); font-family:'General Sans',system-ui,sans-serif; font-weight:400;font-size:clamp(28px,4vw,52px);line-height:1.06; letter-spacing:-.012em;color:var(--ink-1);text-wrap:balance; } .ax__closep{ margin:0 auto clamp(26px,3vw,36px);max-width:58ch; font-size:16px;line-height:1.65;color:var(--ink-3);text-wrap:pretty; } .ax__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} /* the contractor-audit pointer under the buttons (2026-09-16) */ .ax__ctas + .ax__closep{margin-top:clamp(22px,2.4vw,30px)} .ax__meta{ margin:clamp(22px,2.4vw,30px) 0 0; font-size:14px;color:var(--ink-4); } /* the phone number reads as a quiet fact, not as a second call to action */ .ax__meta a{color:var(--ink-3);border-bottom:1px solid var(--stroke-hi);padding-block:4px} .ax__meta a:hover{border-bottom-color:var(--accent);color:var(--ink-1)} /* ---- FAQ ----------------------------------------------------------------- ⚠ leaf.css sets `.faqs summary` and the answer links to var(--white), because the six service pages that own that component are always night. This route is not: it opens on paper, and under prefers-reduced-motion it STAYS on paper, so those rules rendered white text on a white ground and the whole FAQ was invisible. The tokens below interpolate on --k and are correct in both halves of the journey. 🚫 Do not fix this in leaf.css. The service pages are right as they are. */ .ax__faqwrap{max-width:900px} .ax__faqs{margin-top:clamp(22px,2.6vw,34px)} .ax__faqs summary, .ax__faqs summary:hover{color:var(--ink-1)} .ax__faqs .faqs__a p{color:var(--ink-3)} .ax__faqs .faqs__a a{color:var(--ink-1);border-bottom-color:var(--accent)} .ax__faqs summary::before, .ax__faqs summary::after{background:var(--accent)} .ax__faqs, .ax__faqs details{border-color:var(--stroke)} /* ========================================================================== 3. THE AUDIT ITSELF — stage, result, plan, failure Rendered by /free-website-audit/audit.js. Every class below is written by that file, so 🚫 renaming one here without renaming it there breaks the result silently: the markup still arrives, it is simply unstyled. ========================================================================== */ .aud{padding:0 0 clamp(20px,3vw,40px)} /* ---- running ------------------------------------------------------------- */ .aud__stage{ max-width:760px;margin:clamp(28px,3.4vw,44px) auto 0; padding:clamp(22px,2.6vw,32px); border:1px solid var(--stroke);border-radius:16px; background:var(--surface); } .aud__stageh{ margin:0 0 16px;font-size:13px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4); } .aud__stages{margin:0;padding:0;list-style:none;display:grid;gap:11px} .aud__st{ display:flex;align-items:center;gap:12px; font-size:15px;color:var(--ink-4); transition:color .3s ease; } .aud__st.is-done{color:var(--ink-1)} .aud__dot{ width:7px;height:7px;border-radius:50%;flex:0 0 auto; background:var(--stroke-hi); transition:background-color .3s ease,box-shadow .3s ease; } .aud__st.is-done .aud__dot{ background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); } .aud__wait{margin:18px 0 0;font-size:13.5px;color:var(--ink-4)} /* ⚠ The pulse is on the NEXT undone row only, so there is one moving thing on screen rather than six. Under reduced motion it stops and the list still fills in, which is the information the animation was carrying. */ .aud__st:not(.is-done) .aud__dot{animation:audPulse 1.5s ease-in-out infinite} @keyframes audPulse{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion: reduce){ .aud__st:not(.is-done) .aud__dot{animation:none} } /* ---- the result document ------------------------------------------------- Held to a reading measure and centred. It is a document, so it is set like one: no card, no shadow, generous leading. */ .aud__result{max-width:900px;margin:clamp(28px,3.4vw,44px) auto 0} .aud__head{ padding-bottom:clamp(20px,2.4vw,28px); border-bottom:1px solid var(--stroke); } .aud__h2{ margin:0 0 10px; font-family:'General Sans',system-ui,sans-serif; font-weight:400;font-size:clamp(30px,4vw,50px);line-height:1.06; letter-spacing:-.012em;color:var(--ink-1); } .aud__h2:focus-visible{outline:2px solid var(--stroke-focus);outline-offset:6px} .aud__site{ margin:0 0 14px; font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-4); } .aud__summary{ margin:0;max-width:58ch; font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--ink-2); } .aud__group{padding:clamp(26px,3vw,38px) 0 0} .aud__h3{ margin:0 0 clamp(14px,1.6vw,20px); font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-1); } .aud__h3 span{ display:block;margin-top:6px; font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none; color:var(--ink-4); } /* ---- one finding --------------------------------------------------------- ⚠ THE STATUS IS NOT CARRIED BY COLOUR ALONE (WCAG 1.4.1). The category label, the group heading it sits under and the wording all state it. The accent bar is reinforcement. 🚫 Do not remove the group headings and rely on the bar. */ .af{ position:relative; padding:clamp(16px,1.8vw,22px) 0 clamp(16px,1.8vw,22px) clamp(18px,2vw,26px); border-top:1px solid var(--stroke); } .af:first-of-type{border-top:0} .af::before{ content:"";position:absolute;left:0;top:clamp(18px,2vw,24px);bottom:clamp(18px,2vw,24px); width:2px;border-radius:2px;background:var(--stroke-hi); } .af--critical::before{background:#E0483C} .af--recommended::before{background:var(--accent)} .af--optional::before{background:var(--ink-4);opacity:.5} .af--alreadyStrong::before{background:#3FA37A} .af__h{ margin:0 0 8px; font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.005em; color:var(--ink-1); } .af__cat{ display:block;margin-bottom:7px; font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-4); } .af__why{margin:0 0 10px;font-size:15px;line-height:1.62;color:var(--ink-3)} .af__ev{ margin:0;padding:0;list-style:none;display:grid;gap:6px; font-size:13.5px;line-height:1.55;color:var(--ink-4); } .af__ev li{padding-left:16px;position:relative} .af__ev li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:1px;background:var(--stroke-hi); } .af__next{ margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2); } /* ---- the recommendation -------------------------------------------------- ⚠ NO STRIKE-THROUGH, NO "WAS", NO FAKE ANCHOR PRICE. The numbers come from the same table /pricing/ publishes and mean the same thing there. */ .aud__plan{ margin-top:clamp(32px,3.6vw,48px); padding:clamp(24px,2.8vw,36px); border:1px solid var(--stroke);border-radius:18px; background: linear-gradient(180deg, rgba(33,72,216,calc(.035 + var(--k) * .025)) 0%, rgba(33,72,216,calc(.008 + var(--k) * .012)) 100%), var(--surface); } .aud__plan--none{background:var(--surface)} .aud__none{margin:0;max-width:56ch;font-size:16px;line-height:1.62;color:var(--ink-2)} .aud__poor{ margin:0 0 14px;padding:12px 16px; border-left:2px solid var(--accent);border-radius:0 8px 8px 0; background:color-mix(in srgb, var(--accent) 7%, transparent); font-size:14.5px;line-height:1.55;color:var(--ink-2); } .aud__why{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--ink-2)} .aud__lines{margin:0;padding:0;list-style:none;display:grid;gap:0} .aud__lines li{ display:flex;justify-content:space-between;align-items:baseline;gap:20px; padding:11px 0;border-top:1px solid var(--stroke); font-size:15px;color:var(--ink-2); } .aud__lines li:first-child{border-top:0} .aud__lines li span:last-child{color:var(--ink-4);white-space:nowrap;font-variant-numeric:tabular-nums} .aud__t{ display:flex;justify-content:space-between;align-items:baseline;gap:20px; margin:0;padding:13px 0 0;border-top:1px solid var(--stroke-hi); font-size:15px;color:var(--ink-3); } .aud__t + .aud__t{border-top:0;padding-top:6px} .aud__t b{font-size:19px;font-weight:500;color:var(--ink-1);font-variant-numeric:tabular-nums} .aud__terms{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--ink-4)} .aud__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.2vw,26px)} @media (max-width:520px){ .aud__ctas .btn{width:100%} } .aud__scope{ margin:clamp(24px,2.8vw,34px) 0 0; padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--stroke); font-size:13px;line-height:1.6;color:var(--ink-4); } /* ---- failure ------------------------------------------------------------- ⚠ THIS IS A DESIGNED STATE, NOT A FALLBACK. It sits in the same card language as the plan, keeps the same measure, and always offers a way forward. A visitor who hits it should feel the page handled it, not that the page broke. 🚫 No red banner, no error code, no apology paragraph. */ .aud__fail{ max-width:640px;margin:0 auto; padding:clamp(26px,3vw,38px); border:1px solid var(--stroke);border-radius:18px; background:var(--surface); text-align:center; } .aud__fail .aud__h2{ margin-bottom:12px;font-size:clamp(24px,3vw,36px); } .aud__fail p{margin:0 auto 16px;max-width:46ch;font-size:15.5px;line-height:1.62;color:var(--ink-3)} .aud__fail p:last-child{margin-bottom:0} .aud__fail .btn{margin-top:2px} .aud__failalt{font-size:14px;color:var(--ink-4)} /* ========================================================================== 4. RESPONSIVE 360 is the narrowest real phone this has to survive; 390 is the common one. ========================================================================== */ @media (max-width:1080px){ .ax__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .ah{padding-top:clamp(78px,10vh,104px)} .ax__steps li{padding-top:14px} } @media (max-width:640px){ .ax__grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:560px){ .ah__card{ padding:18px 16px;border-radius:14px; margin-inline:calc(var(--gutter, 20px) * -.25); } .ah__facts{gap:8px 16px;font-size:13px} .aud__stage,.aud__fail{padding:20px 16px;border-radius:14px} .aud__plan{padding:20px 16px;border-radius:14px} .ax__c{padding:20px 16px} /* the price rows stack rather than being squeezed to two narrow columns */ .aud__lines li{flex-direction:column;gap:2px} .aud__lines li span:last-child{color:var(--ink-3)} } /* ---- the report link ----------------------------------------------------- Sits inside the result head, under the summary: the moment someone has read the verdict is the moment they want to send it on. Quiet on purpose — a hairline field and a ghost button, not a second call to action competing with the plan below. */ .aud__share{margin:clamp(18px,2vw,24px) 0 0;max-width:640px} .aud__share-l{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3)} .aud__share-row{display:flex;gap:10px;align-items:stretch} .aud__share-u{flex:1 1 auto;min-width:0;height:48px;padding:0 14px; border:1px solid var(--stroke-hi);border-radius:10px;background:var(--surface); font:500 14px/1 'General Sans',system-ui,sans-serif;color:var(--ink-1); text-overflow:ellipsis} .aud__share-u:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .aud__share-b.btn{height:48px;flex:0 0 auto;padding:0 20px} .aud__share-n{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-4)} @media (max-width:520px){ .aud__share-row{flex-direction:column} .aud__share-b.btn{width:100%} } .aud__saved{margin:14px 0 0;max-width:58ch;font-size:14px;line-height:1.6;color:var(--ink-3)} /* ---- the trades programme, beside the plan ------------------------------- Quiet on purpose: a hairline and a label, not a second plan. It sits after the totals so it can never be read as one of the priced lines. */ .aud__prog{margin:clamp(18px,2vw,24px) 0 0;padding:14px 0 0;border-top:1px solid var(--stroke)} .aud__prog-l{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--accent)} .aud__prog-t{margin:0;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--ink-2)}