/* ============================================================
MarchCrest AI — usability & accessibility fixes
------------------------------------------------------------
HOW TO USE
1. Save this file next to index.html as fixes.css
2. In index.html, add this line AFTER the styles.css line:
3. Done. Nothing in styles.css is deleted — this file only
overrides the specific rules that cause problems.
WHY !important IS USED HERE
styles.css has several duplicate @media blocks that fight each
other (three separate max-width:540px blocks, six at 640px).
An override sheet has to win those fights. Once you clean up
the duplicates in styles.css, most of these can drop back to
normal rules.
============================================================ */
/* ------------------------------------------------------------
1. FONT FALLBACKS + BORDER COLOURS
DM Sans and Manrope load fine (styles.css used an @import;
that has moved to a in the head, which loads sooner).
These stacks just make the moment before they arrive look
deliberate on Windows and older Androids.
------------------------------------------------------------ */
:root{
--font:'DM Sans','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
--display:'Manrope','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
/* Border colours. The old --line (#343330) is 1.48:1 against the
background — invisible to a lot of people. Decorative rules
get a slightly brighter grey; anything that outlines a control
gets --line-ui, which clears the 3:1 WCAG minimum. */
--line:#403e3a;
--line-ui:#6b6860;
}
/* ------------------------------------------------------------
2. STICKY-HEADER ANCHOR OFFSET
The header is position:sticky and 80–110px tall, but
scroll-padding-top was 30px. Every nav link currently scrolls
the section title underneath the header.
------------------------------------------------------------ */
html{scroll-padding-top:126px}
@media(max-width:900px){ html{scroll-padding-top:100px} }
/* ------------------------------------------------------------
3. NO SIDEWAYS SCROLL
'clip' instead of 'hidden' — hidden would break the sticky header.
------------------------------------------------------------ */
html,body{max-width:100%;overflow-x:clip}
/* ------------------------------------------------------------
4. READABLE TEXT ON PHONES ← the biggest single fix
styles.css contains 72 font-size declarations below 11px,
including one at 5px and six at 6px. Nothing under 12px is
readable on a phone, and body copy wants 15–16px.
------------------------------------------------------------ */
@media(max-width:900px){
/* Small caps labels — floor of 11px, and looser tracking so
uppercase stays legible at small sizes */
.eyebrow,
.mini-label,
.map-label,
.sample-label,
.stage-heading,
.workspace-name,
.offer-audience,
.stat span,
.message-name span,
.workspace-top small,
.tab small,
.sidebar-foot{
font-size:11px!important;
letter-spacing:.1em!important;
line-height:1.5!important;
}
/* Anything a person actually reads — 15px floor */
.hero-sub,
.section-intro,
.solution-copy p,
.offer-description,
.process-grid p,
.section-split>p,
.engagement-options p,
.faqs p,
.faqs summary,
.tool-stack>div,
.message,
.message-name,
.activity-list,
.dashboard-note,
.stage-footer,
.hero-bottom,
.hero-highlights p,
.workspace-sidebar,
.footer-top p,
.footer-bottom{
font-size:15px!important;
line-height:1.65!important;
}
/* Numbers and sub-headings that got shrunk too far */
.stat b{ font-size:28px!important }
.workspace-top h3,
.agent-caption h3,
.process-grid h3{ font-size:20px!important }
.floating-tag{ font-size:11px!important;padding:8px 10px!important }
.contact-phone{ font-size:22px!important }
}
/* ------------------------------------------------------------
5. TOUCH TARGETS — 44×44px minimum
The hamburger currently lands around 30×28px on a phone, and
several buttons hide their label at small sizes, shrinking the
tappable area further.
------------------------------------------------------------ */
.menu-toggle,
.dialog-close,
#next-example,
#guide-close,
#guide-mic,
#guide-voice,
.text-button,
.dashboard-tabs button,
#topic-buttons button,
.stage-footer button,
.guide-choices button,
#guide-form button{
min-height:44px;
min-width:44px;
}
.menu-toggle{
padding:10px 15px!important;
font-size:13px!important;
display:inline-flex;
align-items:center;
gap:8px;
border-color:var(--line-ui)!important;
}
.menu-toggle span{ display:inline!important;margin:0!important }
/* Nav links and FAQ rows need a comfortable row height too */
.header nav a{ min-height:46px;display:flex;align-items:center }
.faqs summary{
min-height:48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
/* Buttons and inputs get a visible outline that meets 3:1 */
.button,
input,
textarea,
select,
.tab,
.offer-card{ border-color:var(--line-ui) }
input,textarea,select{ min-height:46px }
/* ------------------------------------------------------------
6. ONE MOBILE HEADER, NOT TWO
styles.css opens the hamburger at max-width:800px in one block
and at 900px in another, with different dropdown positions
(top:76px vs top:80px) and different background colours
(#1a2b27 vs #222b32). Between 801px and 900px — iPad portrait
is 820px — the two fight. This settles it.
------------------------------------------------------------ */
@media(max-width:900px){
.site-header{ overflow:visible }
.menu-toggle{ display:inline-flex!important;order:3 }
.header nav{
top:calc(100% + 10px)!important;
left:0!important;
right:0!important;
background:#1b2226!important;
border:1px solid var(--line-ui)!important;
border-radius:14px!important;
padding:10px!important;
z-index:25!important;
box-shadow:0 18px 40px rgba(0,0,0,.45);
}
}
/* The primary CTA disappeared entirely below 540px — that is the
button the whole page exists to get clicked. Bring it back. */
@media(max-width:640px){
.header-actions{ display:flex!important;margin-left:auto }
.header-actions .button{
font-size:13px!important;
padding:12px 16px!important;
min-height:44px;
display:inline-flex;
align-items:center;
gap:6px;
}
.header-actions .button span{ display:inline!important }
}
/* On the narrowest phones, shorten the label instead of hiding it */
@media(max-width:420px){
.header-actions .button{ padding:12px 13px!important;font-size:12px!important }
.menu-toggle{ padding:10px 12px!important }
.menu-toggle span:not(.sr-only){ display:none!important }
}
/* ------------------------------------------------------------
7. HERO HEIGHT ON PHONES
min-height:100svh means a visitor on an iPhone SE scrolls past
a nearly empty screen before reaching anything useful. Let the
content set the height instead.
------------------------------------------------------------ */
@media(max-width:900px){
.hero{
min-height:0!important;
padding-top:34px!important;
padding-bottom:44px!important;
}
.hero h1{ font-size:clamp(30px,7.6vw,42px)!important;line-height:1.12!important }
.hero h1 br{ display:none }
.hero h1 strong{ display:block;margin-top:.18em }
.hero-bottom p{ display:block!important }
}
/* ------------------------------------------------------------
8. LAYOUTS THAT STAY TWO-COLUMN TOO LONG
------------------------------------------------------------ */
@media(max-width:900px){
/* .solution-copy turns into a cramped 2-col grid at 800px */
.solution-copy{
display:flex!important;
flex-direction:column;
gap:14px;
padding:22px!important;
}
.solution-copy>.button{ width:100%!important;justify-content:center }
/* The workspace sidebar shrinks to 155px with 9px text — useless.
Hide it on phones; the main panel is the point. */
.workspace-demo{ grid-template-columns:1fr!important }
.workspace-sidebar{ display:none!important }
.workspace-main{ padding:24px 20px!important }
.section-split{ display:flex!important;flex-direction:column;gap:18px }
.section-split>p{ max-width:none!important }
.engagement-inner{ padding:28px!important;gap:28px!important }
.contact-section{ gap:28px }
}
/* ------------------------------------------------------------
9. FORCED LINE BREAKS
inside headings causes odd wrapping on narrow screens.
Let the browser break where it wants, and balance the result.
------------------------------------------------------------ */
h1,h2,h3{ text-wrap:balance }
.section-intro,.hero-sub{ text-wrap:pretty }
@media(max-width:640px){
.section h2 br,
.closing h2 br,
.contact-section h2 br,
.engagement h2 br,
.faq-section h2 br,
.section-intro br,
.hero-sub br{ display:none }
.section h2 strong,
.closing h2 strong,
.contact-section h2 strong{ display:block }
}
/* ------------------------------------------------------------
10. FOCUS RING
The existing ring is good; this just stops it being clipped
by rounded cards and keeps it visible on the accent buttons.
------------------------------------------------------------ */
:focus-visible{ outline:3px solid var(--accent)!important;outline-offset:3px!important;border-radius:6px }
.tab:focus-visible,.offer-card:focus-visible{ outline-offset:-3px!important }
/* ------------------------------------------------------------
11. SCREEN-READER-ONLY HELPER
Used by the shortened button labels above so the accessible
name stays complete even when the visible text is trimmed.
------------------------------------------------------------ */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ------------------------------------------------------------
12. PRINT / ZOOM SAFETY
At 200% browser zoom a fixed-height header clips its contents.
------------------------------------------------------------ */
.header{ height:auto!important;min-height:80px;padding-block:14px }
@media(min-width:901px){ .header{ min-height:96px } }
/* ------------------------------------------------------------
13. ADDED AFTER TESTING
Every button gets a 44px floor (a header CTA was landing at
39px tall on tablets), and the few labels that sit inside
tight chips get their breathing room back after the type-size
floor was raised in styles.css.
------------------------------------------------------------ */
.button,
.tab,
.topic,
.dashboard-tabs button,
#next-example,
.faqs summary{ min-height:44px }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:6px }
/* uppercase micro-labels: less tracking now they're bigger, so they still fit */
.mini-label,.map-label,.sample-label,.offer-audience,.stage-heading,
.workspace-name,.sidebar-foot,.badge,.tab small{ letter-spacing:.06em }
.badge,.action-chip,.activity-icon,.message-avatar{ line-height:1.25 }
.stat span{ line-height:1.35 }
/* ------------------------------------------------------------
14. PHONE HEADER + HERO FOOT
Bringing the main CTA back on phones (section 6) left three
things fighting for one row, and the hero foot was still
trying to be three columns at 390px.
------------------------------------------------------------ */
@media(max-width:560px){
/* the crest alone is enough branding once space is tight */
.header .brand-word{ display:none }
.header .brand-mark{ width:36px;height:36px }
.header-actions .button{ padding:12px 14px!important;font-size:13px!important }
.header-actions .button span{ display:none!important } /* drop the ↗, keep the words */
.header{ gap:10px }
}
@media(max-width:640px){
.hero-bottom{
display:flex!important;
flex-direction:column;
align-items:flex-start;
gap:12px!important;
text-align:left;
}
.hero-bottom > *{ max-width:none }
.hero-bottom p{ display:block!important }
.hero-bottom a{ min-height:44px;display:inline-flex;align-items:center }
/* keep the floating guide button clear of the last hero line */
.hero{ padding-bottom:88px!important }
}
/* Focused offers and a comfortable phone layout. */
.pilot-note{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-top:24px;padding:28px 30px;border:1px solid #344a44;border-radius:20px;background:#14221f}
.pilot-note h3{font-family:var(--display);font-size:23px;margin:12px 0}
.pilot-note p{font-size:16px;line-height:1.7;color:#c0cfcb}
.pilot-note small{display:block;font-size:13px;line-height:1.6;color:#aebbb8;margin-top:12px}
.hero-cta{align-self:center;margin:24px auto 0;gap:18px}
.hero-highlights>div{text-align:center;align-items:center;justify-content:center}
.offer-tabs .offer-card{min-width:0}
.offer-tabs .offer-title{font-size:clamp(23px,2.2vw,30px);line-height:1.3;margin:20px 0}
.offer-tabs .offer-description{line-height:1.7}
@media(min-width:901px){.menu-toggle{display:none!important}.header{gap:24px}.header nav{gap:18px}}
@media(max-width:900px){
.solution-panel{grid-template-columns:1fr!important}
.pilot-note{grid-template-columns:1fr;gap:22px}
.offer-tabs{grid-template-columns:1fr!important;gap:12px!important}
.offer-tabs .offer-card{padding:22px!important;border-radius:18px;min-height:0}
.offer-tabs .offer-title{font-size:23px!important;margin:10px 0!important}
.offer-tabs .offer-description{margin-bottom:16px!important}
.offer-tabs .offer-audience{padding-top:12px!important}
.header nav{display:none!important;position:absolute!important}
.header nav.open{display:flex!important;flex-direction:column;align-items:stretch}
.header nav a{padding:0 14px}
}
@media(max-width:640px){
.wrap{width:calc(100% - 36px)}
.section{padding-top:48px!important;padding-bottom:48px!important}
.offers-section{padding-top:24px!important}
.hero{padding:32px 0 36px!important}
.hero h1{font-size:clamp(32px,8.4vw,44px)!important;letter-spacing:-1.2px}
.hero-sub{max-width:36ch;margin-inline:auto}
.hero-highlights{margin:24px auto!important;gap:12px!important}
.hero-highlights>div{padding:18px!important}
.hero-highlights h2{font-size:19px!important}
.hero-bottom{align-items:center!important;text-align:center!important;margin-top:20px!important;gap:6px!important}
.hero-bottom p{display:none!important}
.section h2{font-size:32px!important;line-height:1.2!important;letter-spacing:-1px}
.section-intro{margin-top:18px!important}
.agent-stage{padding:20px 16px!important}
.stage-heading{flex-wrap:wrap;gap:8px}
.agent-visual{height:155px!important;min-height:155px!important}
.floating-tag{display:none}
.conversation,.message,.message>div{min-width:0;max-width:100%}
.action-chip{white-space:normal!important;font-size:12px!important}
.stage-footer{flex-direction:column;align-items:flex-start;gap:8px}
.pilot-note{padding:22px;gap:20px}
.stats{grid-template-columns:1fr!important;gap:10px!important}
.stat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:16px!important}
.stat small{grid-column:1/-1;font-size:12px!important}
.workspace-top{flex-wrap:wrap;gap:12px}
.dashboard-tabs{display:flex;flex-wrap:wrap;gap:8px}
.dashboard-tabs button{flex:1;font-size:13px!important;padding:10px!important}
.activity-row{grid-template-columns:28px minmax(0,1fr)!important;gap:10px!important}
.activity-row .badge{grid-column:2;justify-self:start;font-size:11px!important}
.activity-row small{font-size:12px!important;line-height:1.5!important}
.engagement-inner{grid-template-columns:1fr!important;padding:24px!important}
.contact-phone{font-size:17px!important}
.footer-bottom{align-items:flex-start!important;gap:12px!important}
footer{padding-bottom:96px!important}
.guide-launcher{right:14px!important;bottom:14px!important;padding:12px 18px!important;font-size:14px!important;min-height:46px}
.guide-panel{width:calc(100% - 24px)!important;right:12px!important;bottom:12px!important;height:min(620px,calc(100dvh - 24px))!important;max-height:calc(100dvh - 24px)!important}
dialog{width:calc(100% - 24px)!important;max-height:calc(100dvh - 24px);padding:24px!important}
#enquiry-form{grid-template-columns:1fr!important}
input,textarea,select{font-size:16px!important;min-width:0;max-width:100%}
}
@media(max-width:560px){
.header .brand-word{display:inline;font-size:22px;letter-spacing:-1px}
.header .brand-mark{width:36px;height:40px}
.header-actions{display:none!important}
.header{gap:12px;padding-block:12px;min-height:72px}
.menu-toggle{margin-left:auto;padding:10px!important}
.header .brand{gap:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:560px){.header .menu-toggle{margin-left:auto!important;margin-right:0!important}}
/* Short phone experience: essential information first, optional demos on tap. */
.mobile-disclosure{display:contents}
.mobile-disclosure>summary{display:none}
@media(max-width:640px){
.hero-sub{font-size:15px!important;line-height:1.6!important}
.hero-highlights{grid-template-columns:1fr 1fr!important;gap:8px!important;margin:20px 0 0!important}
.hero-highlights>div{padding:14px 8px!important;border-radius:14px}
.hero-highlights h2{font-size:15px!important;letter-spacing:-.4px;margin:0;line-height:1.5}
.hero-highlights p,.hero-bottom,.journey,.pilot-note,.closing{display:none!important}
.hero{padding:28px 0!important}
.hero h1{font-size:34px!important;margin:16px 0!important}
.hero-cta{margin-top:18px}
.offers-section>.section-intro{display:none}
.offer-tabs{margin-top:20px!important;gap:8px!important}
.offer-tabs .offer-card{padding:14px 16px!important;border-radius:14px!important;text-align:left}
.offer-tabs .mini-label,.offer-tabs .offer-description{display:none}
.offer-tabs .offer-title{font-size:18px!important;margin:0 0 4px!important}
.offer-tabs .offer-audience{font-size:10px!important;line-height:1.4!important;padding:0!important;border:0!important;letter-spacing:.04em!important}
.solution-panel{padding:8px!important;min-height:0!important;margin-top:12px}
.solution-copy{padding:16px!important;gap:12px!important}
.solution-copy>.mini-label{display:none}
.solution-copy h2{font-size:25px!important;margin:0!important;line-height:1.25!important}
.solution-copy p{line-height:1.6!important;max-width:none}
.solution-copy>.button{margin-top:4px}
.mobile-disclosure{display:block;border:1px solid #40544e;border-radius:14px;margin-top:16px;min-width:0;overflow:hidden}
.mobile-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;min-height:48px;cursor:pointer;color:#b9e5da;font-size:14px;list-style:none}
.mobile-disclosure>summary::-webkit-details-marker{display:none}
.mobile-disclosure>summary::after{content:'+';font-size:20px}
.mobile-disclosure[open]>summary::after{content:'−'}
.mobile-disclosure>.example-topics{padding:0 16px}
.mobile-disclosure .agent-visual{display:none}
.mobile-disclosure .agent-caption{padding:16px 0}
.workspace-section .section-split>p{font-size:15px!important;line-height:1.6!important}
.workspace-section .section-split{gap:12px}
.workspace-demo{margin-top:0!important}
.section{padding-block:30px!important}
.section h2{font-size:28px!important}
.section .eyebrow{font-size:10px!important;margin-bottom:12px!important}
.process-grid{gap:16px!important;margin-top:22px!important}
.process-grid article{display:grid;grid-template-columns:28px 1fr;gap:4px 10px;padding-top:14px!important}
.process-grid .step-number{grid-row:1/3;margin:0;font-size:15px}
.process-grid h3{margin:0!important;font-size:18px!important}
.process-grid p{line-height:1.5!important;font-size:14px!important}
.engagement-inner{padding:20px!important;gap:12px!important}
.engagement-inner h2{font-size:26px!important}
.engagement-inner p{font-size:15px;line-height:1.6}
.engagement-inner .button{margin-top:16px}
.engagement-options{padding:16px!important;gap:20px!important}
.faq-section{gap:16px!important}
.faq-section>div>.eyebrow{display:none}
.faqs summary{padding-block:12px!important;font-size:14px!important}
.contact-section{gap:18px!important}
.contact-section .section-intro{font-size:15px!important;margin-top:12px!important}
.footer-top{display:none!important}
footer{padding-top:18px!important}
}
@media(max-width:640px){
.process-grid article .step-number{position:static!important;grid-column:1;grid-row:1/3;align-self:start}
.process-grid article h3,.process-grid article p{grid-column:2;position:static!important;width:auto!important;max-width:none!important}
.process-grid article h3{grid-row:1}.process-grid article p{grid-row:2}
}
/* Reference-inspired contact ending, in the established dark teal palette. */
.contact-ending{background:#15221f;padding:76px 0 80px}
.ending-wrap{max-width:1120px}
.contact-ending h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(32px,3.4vw,46px);line-height:1.25;letter-spacing:-1px;max-width:100%}
.contact-invitation{font-size:20px;line-height:1.7;color:#aebeb8;max-width:620px;margin-top:26px}
.contact-list{margin:36px 0 46px;display:grid;gap:26px}
.contact-list>div[hidden]{display:none}
.contact-list dt{color:var(--accent);font-weight:650;font-size:16px;margin-bottom:8px}
.contact-list dd{margin:0;font-size:19px;line-height:1.6;color:#e0eae6}
.contact-list address{font-style:normal}
.contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;background:#21302c;border:1px solid #5b736b;border-radius:4px;padding:30px}
.contact-form label{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:16px;font-weight:600;color:#e0e8e4}
.contact-form input,.contact-form select,.contact-form textarea{background:#111e1a;color:#e2eee9;border:1px solid #6a8278;border-radius:4px;padding:14px 16px;width:100%;font-weight:400;font-size:18px;min-height:58px}
.contact-form textarea{min-height:164px;resize:vertical;line-height:1.6}
.contact-form textarea::placeholder{color:#92a89e}
.contact-form .full{grid-column:1/-1}
.contact-form-actions{display:flex;align-items:center;gap:24px}
.contact-form-actions .button{border-radius:4px;min-height:58px;padding:16px 28px;font-size:17px;flex-shrink:0}
.contact-form-actions p{color:#aebeb8;font-size:15px;line-height:1.6}
.contact-form #form-status:empty{display:none}
.ending-footer{background:#171f1d;padding:56px 0 30px!important;width:100%;margin:0}
.ending-footer .brand-word{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1px;font-size:32px}
.ending-footer .brand-mark{width:38px;height:42px}
.footer-tagline{color:#b0bcb6;font-size:18px;margin:24px 0 46px}
.ending-links{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:36px;color:#b9c5be;font-size:17px}
.ending-links a{min-height:44px;display:inline-flex;align-items:center}
.ending-links a:hover{color:var(--accent)}
.ending-legal{border-top:1px solid #3a4841;padding-top:28px;display:flex;justify-content:space-between;gap:24px;color:#94a59a;font-size:14px;line-height:1.6}
.ending-footer #privacy-button{font-size:12px;color:#94a59a;margin-top:12px;font-weight:400}
@media(max-width:640px){
.contact-ending{padding:34px 0 40px}
.contact-ending h2{font-size:32px;letter-spacing:-.6px}
.contact-invitation{font-size:16px;margin-top:18px;line-height:1.65}
.contact-list{gap:20px;margin:28px 0}
.contact-list dd{font-size:16px}
.contact-form{padding:18px;gap:18px;grid-template-columns:1fr}
.contact-form input,.contact-form select{min-height:48px;padding:12px}
.contact-form label{font-size:14px}
.contact-form textarea{min-height:130px;padding:12px}
.contact-form-actions{flex-direction:column;align-items:stretch;gap:12px}
.contact-form-actions .button{min-height:48px;font-size:16px}
.contact-form-actions p{font-size:13px}
.ending-footer{padding:34px 0 90px!important}
.footer-tagline{font-size:16px;margin:18px 0 22px}
.ending-links{gap:4px 18px;margin-bottom:22px;font-size:14px}
.ending-legal{flex-direction:column;gap:10px;padding-top:20px;font-size:12px}
/* Keep the connected-tools graphic visible, with less vertical padding. */
.journey{display:block!important}
.journey .section-intro{font-size:15px!important;line-height:1.6}
.journey .workflow-map{margin-top:24px!important;padding:0!important;gap:0!important}
.journey .tool-stack{width:100%!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.journey .map-label{grid-column:1/-1;margin-bottom:6px}
.journey .tool-stack>div{padding:10px 6px!important;font-size:11px!important;text-align:center;line-height:1.4!important;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.journey .connector{height:22px!important;margin:0 auto!important}
.journey .map-core{width:170px!important;min-height:130px!important;padding:16px!important;margin-inline:auto}
.journey .core-mark{width:40px;height:44px}
.journey .map-core b{font-size:16px}
.journey .map-core>span{font-size:12px}
}
.visibility-intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:52px;margin-bottom:36px}
.visibility-art{min-width:0;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at center,#234e43 0%,#1a2c27 48%,#191f24 85%)}
.visibility-art .agent-visual{height:340px;min-height:340px;margin:0;width:100%;position:relative}
.visibility-art .floating-tag{font-size:11px;padding:8px 10px}
.visibility-art .tag-left{left:12px}.visibility-art .tag-right{right:12px}
.visibility-copy p{color:#aebbb8;font-size:18px;line-height:1.7;margin-top:24px;max-width:430px}
.visibility-copy h2{font-size:clamp(30px,3.3vw,46px)}
@media(max-width:900px){.visibility-intro{gap:24px}.visibility-art .floating-tag{display:none}.visibility-art .agent-visual{height:280px;min-height:280px}}
@media(max-width:640px){
.visibility-intro{grid-template-columns:1fr;gap:22px;margin-bottom:20px}
.visibility-art .agent-visual{display:block!important;height:210px!important;min-height:210px!important}
.visibility-copy p{font-size:15px;line-height:1.6;margin-top:12px}
.visibility-art .orb{width:125px;height:125px}
.visibility-art .orb-mark{width:65px;height:65px}
}
@media(max-width:640px){.visibility-art .agent-visual{display:flex!important;align-items:center;justify-content:center}}
/* Explicit colours prevent the menu from becoming a blank native button. */
.header .menu-toggle{appearance:none;-webkit-appearance:none;background:#1b2925!important;color:#e8f4f1!important;border:1px solid #6e958a!important;border-radius:10px;line-height:1.2;font-weight:600;justify-content:center;flex-shrink:0}
.header .menu-toggle:hover,.header .menu-toggle[aria-expanded="true"]{background:#2b443b!important;border-color:#69cbb9!important}
.header .menu-toggle span{display:inline-block!important;font-size:18px;line-height:1;color:inherit}
/* Refined hero cards: a restrained glow and two purpose-built marks. */
.hero-highlights{gap:18px}
.hero-highlights>div{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#22433b66,transparent 70%),linear-gradient(155deg,#1b2927,#171f23);border:1px solid #38524b;border-radius:22px;padding:24px 20px 26px;box-shadow:inset 0 1px 0 #b6ffdf0d,0 8px 24px #00000010;transition:border-color .2s,box-shadow .2s}
.hero-highlights>div::before{content:'';position:absolute;top:0;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,#82dcca,transparent)}
.highlight-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:14px;color:#88ddcb;background:#6bd1b70c;border:1px solid #6bd1b72b;box-shadow:inset 0 1px 0 #baffdf0a}
.highlight-icon svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.highlight-icon circle{fill:#1b2c26}
.hero-highlights h2{font-size:21px;letter-spacing:-.6px;margin-bottom:8px;line-height:1.4}
.hero-highlights p{font-size:14px;color:#a9bbb5;line-height:1.6}
.hero-highlights .heading-arrow{font-weight:400;color:#7ed8c5;margin-inline:7px}
@media(hover:hover){.hero-highlights>div:hover{border-color:#598879;box-shadow:inset 0 1px 0 #b6ffdf16,0 8px 28px #00000018}}
@media(max-width:640px){
.hero-highlights>div{padding:14px 8px!important;border-radius:16px}
.highlight-icon{width:30px;height:30px;border-radius:9px;margin-bottom:9px}
.highlight-icon svg{width:21px;height:21px}
.hero-highlights h2{font-size:14px!important;line-height:1.5;letter-spacing:-.3px}
.hero-highlights .heading-arrow{margin-inline:2px}
}
/* Serif wordmarks only; website retains DM Sans and Manrope. */
.brand .brand-word,.ending-footer .brand-word{font-family:Georgia,'Times New Roman',serif;font-weight:400!important;letter-spacing:-1px}
.header .brand-word,.ending-footer .brand-word{font-size:32px}
.header .brand-mark,.ending-footer .brand-mark{width:38px;height:42px}
.small-brand .brand-word{font-size:24px}
@media(max-width:560px){.header .brand-word{font-size:32px!important;letter-spacing:-1px}.header .brand{gap:7px}}