/* ARA design (P92). Slice 1: slim cookie bar, layout only: same words, same buttons. */
.fixed.bottom-0.left-0.right-0.z-\[70\]{padding:0!important}
.fixed.bottom-0.left-0.right-0.z-\[70\]>div{max-width:none!important;margin:0!important;border-radius:0!important;border-width:1px 0 0 0!important;padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px))!important;display:flex;flex-direction:column;gap:6px}
.fixed.bottom-0.left-0.right-0.z-\[70\]>div>div:first-child,.fixed.bottom-0.left-0.right-0.z-\[70\]>div>div:first-child>div{line-height:1.35!important}
.fixed.bottom-0.left-0.right-0.z-\[70\] h3:first-child{display:inline;font-family:inherit!important;font-size:13px!important;font-weight:700;line-height:1.4!important;margin:0 .3em 0 0!important}
.fixed.bottom-0.left-0.right-0.z-\[70\] h3:first-child+p{display:inline;font-size:13px!important;line-height:1.4!important}
.fixed.bottom-0.left-0.right-0.z-\[70\]>div>div:last-child{margin-top:0!important;gap:8px!important;flex-wrap:nowrap!important}
.fixed.bottom-0.left-0.right-0.z-\[70\] button{min-height:44px;padding:0 10px!important;font-size:14px!important;line-height:1.2!important;white-space:normal;min-width:0;flex:1 1 auto}
.fixed.bottom-0.left-0.right-0.z-\[70\] button.btn-ghost{flex:0 1 auto}
body:has(.fixed.bottom-0.left-0.right-0.z-\[70\]) .min-h-screen.bg-brand-bg{padding-bottom:300px}
@media (min-width:768px){
 body:has(.fixed.bottom-0.left-0.right-0.z-\[70\]) .min-h-screen.bg-brand-bg{padding-bottom:120px}
 .fixed.bottom-0.left-0.right-0.z-\[70\]>div{flex-direction:row;align-items:center;justify-content:center;gap:24px;padding:12px 24px calc(12px + env(safe-area-inset-bottom,0px))!important}
 .fixed.bottom-0.left-0.right-0.z-\[70\]>div>div:first-child{max-width:720px}
 .fixed.bottom-0.left-0.right-0.z-\[70\] button{flex:0 0 auto;white-space:nowrap;padding:0 14px!important}
}

/* Slice 2: main button clear of the cookie bar, layout only: same words, same buttons. */
@media (max-width:639px){
 section.relative.min-h-screen.pt-16{align-items:flex-start}
 section.relative.min-h-screen.pt-16>.relative.max-w-6xl.py-12{padding-top:20px;padding-bottom:32px}
 section.relative.min-h-screen.pt-16 h1.text-4xl{font-size:2rem;line-height:1.2;margin-bottom:16px}
 section.relative.min-h-screen.pt-16 .flex-1.text-center>p.mb-10{margin-bottom:24px}
 .min-h-screen.flex.items-center.justify-center.px-6:has(>.max-w-lg.text-center.animate-fade-in>button.btn-primary){align-items:flex-start;padding-top:40px;padding-bottom:40px}
 .max-w-lg.text-center.animate-fade-in>p.mb-10:has(+button.btn-primary){margin-bottom:24px}
}
/* the header already shows the logo: drop the big duplicate in the hero on every screen size */
section.relative.min-h-screen.pt-16 .flex-1.text-center>div.mb-8:first-child:has(>img){display:none}

/* Slice 2b: pricing card buttons above the cookie bar on desktop, layout only: same words, same buttons. */
@media (min-width:1024px){
 section.pt-24.pb-10.px-6:has(.grid.lg\:grid-cols-4){padding-top:76px}
 section.pt-24.pb-10.px-6>.max-w-5xl>.text-center.mb-6:has(+.grid.lg\:grid-cols-4){margin-bottom:16px}
 section.pt-24.pb-10.px-6>.max-w-5xl>.text-center.mb-6:has(+.grid.lg\:grid-cols-4)>p.mb-4:first-child{margin-bottom:8px}
 section.pt-24.pb-10.px-6>.max-w-5xl>.text-center.mb-6:has(+.grid.lg\:grid-cols-4)>h1.mb-4{margin-bottom:8px}
}
/* wider card row where the screen has room: fewer wrapped lines, shorter cards */
@media (min-width:1260px){
 section.pt-24.pb-10.px-6>.max-w-5xl>.grid.lg\:grid-cols-4{margin-left:-80px;margin-right:-80px}
}
@media (min-width:1400px){
 section.pt-24.pb-10.px-6>.max-w-5xl>.grid.lg\:grid-cols-4{margin-left:-128px;margin-right:-128px}
}
/* Slice 6: on phones every button and menu link is at least 44 px tall (footer links were 19 px, rating stars 32 px,
   the header menu 40 px, several buttons and email boxes 38-42 px). Layout only: same words, same order. */
@media (max-width:639px){
 footer ul.space-y-2>li>a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
 footer ul.space-y-2>:not([hidden])~:not([hidden]){margin-top:0}
 div.md\:hidden.items-center>button.p-2{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 div.h-16>a.flex.items-center:first-child{min-height:44px}
 div.mt-auto>a.btn-ghost.py-2,.space-y-3>a.btn-ghost.py-2\.5,.space-y-3>input[type=email].py-2{padding-top:11px;padding-bottom:11px;min-height:44px}
 div.flex.justify-center.gap-2>button.transition-transform{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 div.text-center.mt-4>button.text-brand-gold.bg-transparent{min-height:44px;padding-left:8px;padding-right:8px}
 .bg-brand-surface.rounded-xl>button.w-full{min-height:44px}
}

/* Slice 5: readability. Muted and small gold text reach WCAG AA contrast (4.5:1) on every palette by mixing in a share of
   the site's own text colour (works on light and dark themes alike); white text on gold badges gets a deeper gold.
   Colour only: same words, same order, same layout. */
.text-brand-muted{color:color-mix(in srgb,rgb(var(--brand-muted-rgb)) 55%,rgb(var(--brand-text-rgb)))}
.btn-ghost,.btn-secondary,.text-brand-gold\/70,.text-brand-gold\/80,p.text-brand-gold,a.text-brand-gold,.text-brand-gold.text-sm,.text-brand-gold.text-xs{color:color-mix(in srgb,rgb(var(--brand-gold-rgb)) 45%,rgb(var(--brand-text-rgb)))}
.bg-brand-gold.text-white{background-color:color-mix(in srgb,rgb(var(--brand-gold-rgb)) 55%,#000)}

/* Slice 5b: on phones, reading paragraphs (landing cards, results text) get 16 px and line-height 1.6; the landing hero's
   second paragraph too on phones at least 800 px tall (on shorter screens it would push the quiz button under the cookie bar).
   Pricing cards, the quiz start note, footer and fine print keep their size. Type size and spacing only: same words, same order. */
@media (max-width:639px){
 .bg-brand-gold\/5>p.text-sm.leading-relaxed,
 .card.animate-slide-up>p.text-brand-muted.text-sm.mb-6,
 p.text-brand-text.text-sm.leading-snug,
 .card-hover>p.text-brand-muted.text-sm.leading-relaxed.mb-4{font-size:1rem;line-height:1.6}
}
@media (max-width:639px) and (min-height:800px){
 main p.text-sm.md\:text-base.leading-relaxed{font-size:1rem;line-height:1.6}
}