/* ============================================================================
   style.css — funnel pages (form / test / whatsapp-verify / result / success)
   and app/page-shell.php. v2 (2026-09-09): maps the old --color-* token names
   to the Graphite/Lime/Ivory brand and restyles the shared components, so the
   funnel matches site.css without rewriting every page's Tailwind markup.
   ========================================================================== */
@import url('/assets/fonts/onest/onest.css?v=1');

:root{
  /* brand */
  --graphite:#17191B; --graphite-90:#2A2D30;
  --lime:#CDF568; --lime-ink:#3A4A12;
  --ivory:#F5F3EC; --ivory-dim:#ECE9DE; --white:#fff;
  --ink-70:#4A4D50; --ink-45:#63666A; --danger:#B4231C;

  /* legacy names the funnel markup still references, remapped to the brand */
  --color-primary:#17191B;
  --color-primary-dark:#17191B;
  --color-primary-light:#CDF568;
  --color-whatsapp:#17191B;
  --color-whatsapp-dark:#17191B;
  --color-background:#F5F3EC;
  --color-surface-alt:#ECE9DE;
  --color-foreground:#17191B;
  --color-heading:#17191B;
  --color-muted-foreground:#4A4D50;
  --color-border:#ECE9DE;
  --color-card:#FFFFFF;
  --color-destructive:#B4231C;
  --radius:14px;
  --shadow-soft:none;
  --shadow-soft-lg:0 12px 40px -12px rgba(23,25,27,.28);

  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--graphite);background:var(--ivory);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font);color:var(--graphite);line-height:1.15;letter-spacing:-.02em;font-weight:700}
img,svg{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:3px solid var(--graphite);outline-offset:2px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--graphite);color:var(--white);padding:.75rem 1.25rem;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* buttons — match site.css */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:12px 1.75rem;border-radius:999px;
  font-weight:600;font-size:1rem;line-height:1.2;border:1.5px solid transparent;cursor:pointer;
  transition:background var(--ease) .18s,color var(--ease) .18s,border-color var(--ease) .18s;
  text-decoration:none;text-align:center;
}
/* legal footer links — bigger + padded so they're comfortable to tap on a phone */
footer nav a,footer nav button{display:inline-block;padding:7px 3px}
@media(max-width:600px){footer nav a,footer nav button{font-size:.875rem}}
.btn:active{transform:translateY(1px)}
.btn-primary,.btn-whatsapp{background:var(--graphite);color:var(--white)}
.btn-primary:hover,.btn-primary:focus-visible,
.btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:var(--lime);color:var(--lime-ink)}
.btn-outline{background:transparent;color:var(--graphite);border-color:var(--graphite)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--graphite);color:var(--white)}

/* card — flat, hairline, no shadow */
.card{background:var(--white);border:1px solid var(--ivory-dim);border-radius:var(--radius);box-shadow:none}
/* readable spacing between stacked explanation paragraphs inside a card
   (the funnel reset zeroes <p> margins; explanation cards need the rhythm back) */
.card p+p{margin-top:.6rem}

/* badge / chip */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:999px;background:var(--ivory-dim);color:var(--ink-70);
}

/* form fields */
input[type=text],input[type=email],input[type=date],input[type=tel],input[type=number],select,textarea{
  width:100%;min-height:52px;padding:0 14px;font:inherit;
  background:var(--white);color:var(--graphite);
  border:1px solid var(--graphite-90);border-radius:6px;
}
textarea{padding:12px 14px;min-height:120px;line-height:1.5}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--graphite);outline:3px solid var(--graphite);outline-offset:1px}
label{font-weight:600;font-size:.95rem}

/* links in prose */
main a:not(.btn){color:var(--graphite);text-underline-offset:3px;text-decoration-thickness:1px}
main a:not(.btn):hover{text-decoration-thickness:2px;text-decoration-color:var(--lime)}

/* FAQ accordion chevron (mockup index still uses <details>) */
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
.faq-icon{transition:transform var(--ease) .2s}
details[open] .faq-icon{transform:rotate(180deg)}

/* soft timer badge in page-shell */
#timer-badge{background:var(--ivory-dim)!important;color:var(--graphite)!important}

@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ============================================================================
   Funnel utilities — v3 (2026-09-10): the funnel pages (page-shell.php,
   take-test / test-result / payment / whatsapp-verify) were built with
   Tailwind-CDN utility classes in their markup. This static block reproduces
   the exact subset they use (Tailwind v3 default scale) so the CDN <script>
   can be dropped — no markup rewrite, identical rendering, no third-party
   request on every funnel page. If a page adds a new utility class, add it
   here too.
   ========================================================================== */

/* preflight parity: the element resets these pages relied on from Tailwind's
   base layer (lists in test-engine.php are fully inline-styled, so untouched) */
main h1,main h2,main h3,main h4,main h5,main h6,main p,main figure{margin:0}
fieldset{margin:0;padding:0;min-width:0;border:0}
legend{padding:0}
button,[type=button],[type=submit],[type=reset]{font-family:inherit}

/* display / position */
.block{display:block}
.flex{display:flex}
.sticky{position:sticky}
.top-0{top:0}
.z-40{z-index:40}

/* flexbox */
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}

/* box model */
.mx-auto{margin-left:auto;margin-right:auto}
.w-4{width:1rem}
.h-4{height:1rem}
.w-16{width:4rem}
.h-16{height:4rem}
.w-full{width:100%}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-6xl{max-width:72rem}

.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.pb-5{padding-bottom:1.25rem}

.mt-1{margin-top:.25rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mb-1\.5{margin-bottom:.375rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}

.space-y-2\.5>*+*{margin-top:.625rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}

/* borders (every use in the markup also sets border-color inline) */
.border{border-width:1px;border-style:solid;border-color:var(--color-border)}
.border-t{border-top-width:1px;border-top-style:solid;border-color:var(--color-border)}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--color-border)}
.rounded-lg{border-radius:.5rem}
.rounded-full{border-radius:9999px}

/* typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.text-center{text-align:center}
.text-left{text-align:left}
.text-start{text-align:start}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-line{white-space:pre-line}

/* misc */
.cursor-pointer{cursor:pointer}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* responsive — Tailwind sm: = 640px, md: = 768px */
@media(min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:p-6{padding:1.5rem}
  .sm\:p-8{padding:2rem}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}
}
@media(min-width:768px){
  .md\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
}