/* =========================================================
   Confido Design System — tokens + components
   Brand palette from logo; text-safe shades derived for WCAG AA.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* ---- Brand (logo) ---- */
  --leaf:#8BC34A;        /* gradient only */
  --botanical:#2EAF6B;   /* fills, icons, accents (not body text) */
  --turquoise:#00B3C7;   /* info, links on dark */
  --sky:#1DA1F2;         /* gradient only */
  --blue:#2F56DB;        /* primary action, 6.0:1 on white */

  /* ---- Scales ---- */
  --blue-50:#EEF2FD; --blue-100:#DCE4FB; --blue-200:#B6C6F6; --blue-500:#2F56DB; --blue-600:#2545B8; --blue-700:#1D3792; --blue-900:#0F1F57;
  --green-50:#EAF7F0; --green-100:#D2EFDF; --green-200:#A6DFBF; --green-500:#2EAF6B; --green-700:#1B7F4D; --green-900:#0E4A2C;
  --teal-50:#E5F8FA;  --teal-100:#C7EFF4; --teal-500:#00B3C7; --teal-700:#007C8A;
  --red-50:#FDEEEE;   --red-500:#E0383E;  --red-700:#B4232A;   /* emergency only */
  --amber-500:#F5A524;                                         /* stars only */

  /* ---- Neutrals ---- */
  --ink:#0B1B3A;       /* headings */
  --ink-2:#3B4A66;     /* body */
  --ink-3:#64718A;     /* muted, 4.7:1 on white */
  --line:#E5E7EB;      /* brand neutral gray */
  --line-2:#EEF0F4;
  --canvas:#F6F8FB;    /* page background */
  --surface:#FFFFFF;

  /* ---- Semantic ---- */
  --bg:var(--canvas);
  --card:var(--surface);
  --text:var(--ink-2);
  --heading:var(--ink);
  --muted:var(--ink-3);
  --primary:var(--blue-500);
  --primary-hover:var(--blue-600);
  --accent:var(--green-700);   /* accent TEXT */
  --accent-fill:var(--botanical);
  --focus:0 0 0 3px #fff, 0 0 0 5px var(--blue-500);
  --thread:linear-gradient(90deg,var(--leaf) 0%,var(--botanical) 30%,var(--turquoise) 60%,var(--sky) 80%,var(--blue) 100%);

  /* ---- Type ---- */
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.25rem;
  --fs-h4:clamp(1.15rem,1rem + .5vw,1.35rem);
  --fs-h3:clamp(1.4rem,1.2rem + .8vw,1.75rem);
  --fs-h2:clamp(1.9rem,1.5rem + 1.8vw,2.85rem);
  --fs-h1:clamp(2.5rem,1.8rem + 3.4vw,4.4rem);

  /* ---- Space / radius / shadow ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,27,58,.06),0 1px 1px rgba(11,27,58,.04);
  --sh-2:0 8px 24px -8px rgba(11,27,58,.12),0 2px 6px rgba(11,27,58,.05);
  --sh-3:0 24px 48px -16px rgba(15,31,87,.22);
  --container:1200px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);      /* entrances, UI */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);  /* on-screen movement */
  --ease:var(--ease-out);
}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
h1,h2,h3,h4{color:var(--heading);margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:700}
h1{font-size:var(--fs-h1);letter-spacing:-.035em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);letter-spacing:-.01em}
p{margin:0}
.accent{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em}
.on-dark .accent{color:#7FE0AE}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--thread)}
.lead{font-size:var(--fs-md);color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.container{padding-inline:32px}}
.section{padding-block:var(--s-8)}
@media (min-width:1024px){.section{padding-block:var(--s-9)}}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-7)}
.section-head .stack{display:grid;gap:var(--s-3);max-width:640px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- Thread (signature 1) ---- */
.thread{height:4px;background:var(--thread);border-radius:4px}

/* ---- Buttons ---- */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;font:600 var(--fs-sm)/1 var(--font-sans);letter-spacing:.005em;cursor:pointer;text-decoration:none!important;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .16s var(--ease-out);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px -8px rgba(47,86,219,.6)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--blue-200);color:var(--primary)}
.btn-green{background:var(--green-700);color:#fff}
.btn-green:hover{background:var(--green-900)}
.btn-emergency{background:var(--red-500);color:#fff;box-shadow:0 8px 20px -8px rgba(224,56,62,.6)}
.btn-emergency:hover{background:var(--red-700)}
.btn-ghost{background:transparent;color:var(--primary);padding-inline:6px}
.btn-ghost .icon,.btn-ghost i{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover .icon,.btn-ghost:hover i{transform:translateX(3px)}}
.btn-lg{--h:56px;padding:0 28px;font-size:var(--fs-base)}
.btn-sm{--h:38px;padding:0 16px;font-size:var(--fs-xs)}
.btn-white{background:#fff;color:var(--blue-700)}
.btn-white:hover{background:var(--blue-50)}

/* ---- Chips / badges ---- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip-blue{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}
.chip-green{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.chip-teal{background:var(--teal-50);border-color:var(--teal-100);color:var(--teal-700)}
.chip-red{background:var(--red-50);border-color:#F8D3D4;color:var(--red-700)}
/* Open-now pulse (signature 3) */
.live{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:var(--r-pill);background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);font-size:var(--fs-xs);font-weight:700}
.live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--botanical)}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--botanical);animation:pulse 1.8s var(--ease) infinite}
.on-dark .live{background:rgba(46,175,107,.16);border-color:rgba(127,224,174,.3);color:#9BEBC2}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.live i::after{animation:none}*{scroll-behavior:auto!important}}

/* Promise tick (signature 4) */
.tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green-50);color:var(--green-700);flex:none}
.tick .icon{width:15px;height:15px;stroke-width:2.6}

/* ---- Cards (signature 5) ---- */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-1)}
.card-hover{transition:transform .25s var(--ease-out),box-shadow .25s ease,border-color .25s ease}
@media (hover:hover) and (pointer:fine){.card-hover:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-100)}}
.icon-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--blue-50);color:var(--blue-500)}
.icon-tile.green{background:var(--green-50);color:var(--green-700)}
.icon-tile.teal{background:var(--teal-50);color:var(--teal-700)}
.icon-tile.red{background:var(--red-50);color:var(--red-500)}
.icon-tile .icon{width:24px;height:24px}

/* ---- Forms ---- */
.field{display:grid;gap:6px}
.label{font-size:var(--fs-xs);font-weight:700;color:var(--ink);letter-spacing:.02em}
.input,.select{height:50px;width:100%;padding:0 14px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;font:500 var(--fs-sm) var(--font-sans);color:var(--ink);transition:border-color .2s,box-shadow .2s;appearance:none}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364718A' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.input:hover,.select:hover{border-color:var(--blue-200)}
.input:focus,.select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50)}
.hint{font-size:var(--fs-xs);color:var(--muted)}

/* ---- Photo placeholder ---- */
.ph{position:relative;overflow:hidden;border-radius:var(--r-lg);background:
  radial-gradient(120% 80% at 80% 10%,rgba(0,179,199,.22),transparent 60%),
  radial-gradient(90% 70% at 10% 100%,rgba(46,175,107,.22),transparent 60%),
  linear-gradient(160deg,#DCE6F7,#EAF2F4);display:grid;place-items:center;color:var(--blue-700)}
.ph::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(47,86,219,.12) 1px,transparent 1px);background-size:18px 18px;mask:linear-gradient(180deg,#000,transparent 85%)}
.ph-label{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);font-size:var(--fs-xs);font-weight:600;color:var(--ink-2)}

/* ---- Stars ---- */
.stars{display:inline-flex;gap:2px;color:var(--amber-500)}
.stars svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* ---- Accordion ---- */
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font-weight:600;color:var(--ink);font-size:var(--fs-md)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .plus{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue-50);color:var(--blue-500);transition:transform .25s var(--ease)}
.acc[open] summary .plus{transform:rotate(45deg)}
.acc p{padding:0 48px 22px 0;color:var(--ink-2)}