/* ===== Light cream parchment / matte canvas theme =====
   Overrides the dark base in styles.css by redefining its CSS variables.
   styles.css is kept verbatim; all theming lives here. */
:root{
  --bg:#f4efe4;        /* parchment */
  --panel:#fcf9f3;     /* cream card */
  --panel2:#ece4d5;    /* deeper cream */
  --ink:#2a2723;       /* warm near black, ink */
  --muted:#6d6557;     /* warm taupe */
  --line:#e3dac8;      /* soft warm border */
  --accent:#3b4a73;    /* ink indigo, the ink on parchment */
  --accent2:#4f7a4a;   /* sage green */
}

/* base surface + subtle matte canvas grain (inline SVG, no asset) */
html,body{background-color:var(--bg);color:var(--ink);}
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment:fixed;
}

/* form controls readable on a light surface */
select#lang,.waitlist input{background:var(--panel);color:var(--ink);border:1px solid var(--line);}
.btn{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.btn:hover{filter:brightness(1.05);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}

/* nav as links (the launch site uses separate pages, not tab buttons) */
nav.tabs a{flex:1;min-width:140px;text-align:center;text-decoration:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:13px 16px;border-radius:14px;font-size:15px;font-weight:600;display:inline-block;}
nav.tabs a:hover{color:var(--ink);}
nav.tabs a.active{color:#fff;background:var(--accent);border-color:var(--accent);}

/* waitlist */
.waitlist{margin:34px 0 0;border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:24px;}
.waitlist h2{margin:0 0 6px;font-size:20px;}
.waitlist p{color:var(--muted);font-size:14px;margin:0 0 12px;}
.waitlist form{display:flex;gap:8px;flex-wrap:wrap;}
.waitlist input{flex:1;min-width:200px;padding:12px 14px;border-radius:12px;font-size:14px;font-family:inherit;}
.wl-msg{margin-top:10px;font-size:13px;min-height:18px;}
.wl-msg.ok{color:var(--accent2);}
.wl-msg.err{color:#b4452f;}

/* contrast fixes: the base CSS carried dark theme only text colours that
   are invisible on cream. Force readable ink and flatten the blue tints. */
.chip{color:var(--ink);}
.twohats{background:var(--panel2);}
.twohats ul{color:var(--ink);}
.rcard p{color:var(--ink);}
.icta{background:var(--panel2);}
.icta p{color:var(--ink);}

/* Significant Data Fiduciary special case box (.overlay) and the translation
   pending banner carried dark theme reds and ambers. Force readable text. */
.overlay .ov-t{color:#b4452f;}
.overlay .txt{color:var(--ink);}
.overlay .lbl{color:#b4452f;}
.overlay ul{color:var(--ink);}
.pending{color:#7a5b14;}

/* CTA buttons: show Explore the roles on the left and Find my role on the right
   (Find my role stays highlighted by default). On hover or keyboard focus, the
   highlight shifts to whichever button you are about to click. */
.langnote{max-width:720px;margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5;}

/* brand as a home link */
a.brand{text-decoration:none;color:inherit;}

/* Landing page: intro, section chooser cards */
.home-intro{max-width:720px;margin:18px 0 4px;color:var(--ink);font-size:15px;line-height:1.55;}
.choose{margin:22px 0 10px;font-size:15px;color:var(--muted);font-weight:600;}
.cards-nav{display:flex;flex-direction:column;gap:12px;}
.section-card{display:block;text-decoration:none;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:16px 20px;transition:transform .12s,box-shadow .12s,background .12s;}
.section-card:hover{background:var(--panel);box-shadow:0 4px 14px rgba(42,39,35,.10);transform:translateY(-1px);}
.section-card .t{display:block;font-size:18px;font-weight:700;color:var(--ink);}
.section-card .d{display:block;margin-top:3px;font-size:13.5px;color:var(--muted);}

/* Homepage greeting bubbles: two cycling speech bubbles */
.greet-hero{max-width:600px;margin:20px auto 6px;display:flex;flex-direction:column;gap:14px;}
.bubble{position:relative;max-width:78%;padding:13px 18px;border-radius:20px;box-shadow:0 2px 8px rgba(42,39,35,.08);}
.bubble.a{align-self:flex-start;background:var(--accent);color:#fff;border-bottom-left-radius:5px;}
.bubble.b{align-self:flex-end;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-bottom-right-radius:5px;}
.bubble .g{display:block;font-size:23px;font-weight:700;line-height:1.25;transition:opacity .25s;}
.bubble .c{display:block;margin-top:3px;font-size:12px;letter-spacing:.2px;transition:opacity .25s;}
.bubble.a .c{color:rgba(255,255,255,.85);}
.bubble.b .c{color:var(--muted);}
.bubble.fade .g,.bubble.fade .c{opacity:0;}
.bubble.a::after{content:"";position:absolute;left:16px;bottom:-8px;border:9px solid transparent;border-top-color:var(--accent);border-bottom:0;}
.bubble.b::after{content:"";position:absolute;right:16px;bottom:-9px;border:9px solid transparent;border-top-color:var(--line);border-bottom:0;}
.bubble.b::before{content:"";position:absolute;right:17px;bottom:-7px;border:8px solid transparent;border-top-color:var(--panel);border-bottom:0;z-index:1;}

.icta .row{flex-direction:row-reverse;}
.icta .row .btn.ghost:hover,
.icta .row .btn.ghost:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent);}
.icta .row:has(.btn.ghost:hover) .btn:not(.ghost),
.icta .row:has(.btn.ghost:focus-visible) .btn:not(.ghost){background:transparent;color:var(--ink);border:1px solid var(--line);}