/* Research Web Highlighter — visual theme v2 (Oct 2026).
   Loaded after each page's own styles.css. Changes only colors, type and surfaces:
   no text, no markup structure, no URLs. */
:root{
  --bg:#f7f5fc;--paper:#fff;--ink:#1c1733;--muted:#5f5878;--line:#e4dff3;
  --lav:#5b35f0;--lav2:#7b5cf6;--lav-pale:#efeaff;--dark:#1c1342;
  --band-a:#2b1886;--band-b:#5b35f0;--band-c:#7b5cf6;
  --hl-yellow:#fde68a;--hl-green:#bbf7d0;--hl-blue:#bfdbfe;--hl-pink:#fbcfe8;
  --dot-yellow:#f2b705;--dot-green:#22a55b;--dot-blue:#3b82f6;--dot-pink:#e5488f;
  --v2-display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --v2-body:"Figtree","Onest",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --v2-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
}
body{font-family:var(--v2-body);background:var(--bg);color:var(--ink)}
h1,h2,h3,.hero h1,.section-heading h2,.library-copy h2,.scene-copy h2,.note-copy h2,.demo-copy h2,.faq-heading h2,.final-card h2{font-family:var(--v2-display);letter-spacing:-.03em}
.eyebrow{color:var(--lav)}

/* header: dark violet bar */
.site-header{background:rgba(35,20,110,.94);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.site-header .nav,.site-header .nav a{color:rgba(255,255,255,.82)}
.site-header .nav a:hover{color:#fff}
.site-header .brand{color:#fff}
.site-header .button-small{background:#fff;color:#22125f}
.site-header .lang-switch>summary{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}

/* buttons */
.button-primary{background:var(--lav);color:#fff;box-shadow:0 12px 28px rgba(91,53,240,.35)}
.button-primary:hover{background:#4b27e0}
.text-link{color:var(--lav)}

/* hero: violet band */
.hero{background:radial-gradient(110% 80% at 88% 0%,var(--band-c) 0%,transparent 55%),linear-gradient(160deg,var(--band-a),var(--band-b));color:#fff;position:relative}
.hero .eyebrow{color:#d9cfff}
.hero h1{color:#fff}
.hero h1 span{color:#fff;background:linear-gradient(transparent 62%,var(--dot-yellow) 62%,var(--dot-yellow) 90%,transparent 90%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .04em}
.hero .lead{color:#ece7ff}
.hero .text-link{color:#fff}
.hero .button-primary{background:#fff;color:#22125f;box-shadow:0 14px 30px rgba(10,4,50,.35)}
.hero .trust-row{color:#d9cfff}
.hero .product-window{border:0;box-shadow:0 40px 90px rgba(10,4,50,.45)}
.hero-mini-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);box-shadow:none;color:#fff;backdrop-filter:blur(4px)}
.hero-mini-card strong{color:#fff}
.hero-mini-card p{color:#ddd5ff}
.hero-mini-card:nth-child(1) strong{box-shadow:inset 0 -.38em 0 rgba(242,183,5,.75)}
.hero-mini-card:nth-child(2) strong{box-shadow:inset 0 -.38em 0 rgba(34,165,91,.75)}
.hero-mini-card:nth-child(3) strong{box-shadow:inset 0 -.38em 0 rgba(229,72,143,.75)}
.hero-mini-card strong{display:inline!important}
.hero-mini-card p{margin-top:8px!important}
/* callouts become sticky notes */
.hero-callout{background:#fde68a;border:0;border-radius:4px 4px 16px 4px;color:#3d3410;font-family:var(--v2-hand);font-size:21px;line-height:1.1;box-shadow:0 16px 30px rgba(10,4,50,.35)}
.hero-callout.callout-two{background:#fbcfe8;transform:rotate(-4deg)}
.hero-callout.callout-one{transform:rotate(3deg)}
.hero-callout b{background:rgba(0,0,0,.08);color:#3d3410;font-family:var(--v2-body);font-size:13px}

/* light sections */
.how-section{background:var(--bg)}
.library-section,.feature-section{background:#fff}
.demo-section{background:linear-gradient(180deg,#f2eefe,#f7f5fc)}
.faq-section{background:#efeafc}
.visual-step,.library-ui,.demo-browser,.product-window{border-color:var(--line);box-shadow:0 24px 60px -24px rgba(35,18,120,.28)}
.visual-step{border-radius:22px}
.step-no{font:800 12px var(--v2-display);color:#fff;background:var(--lav);padding:4px 9px;border-radius:999px}
.visual-step:nth-child(1) .step-no{background:var(--dot-yellow);color:#3d3410}
.visual-step:nth-child(2) .step-no{background:var(--dot-green)}
.visual-step:nth-child(3) .step-no{background:var(--dot-blue)}

/* sticky notes section: deep violet instead of near-black */
.note-section{background:radial-gradient(90% 70% at 10% 100%,rgba(229,72,143,.28),transparent 60%),linear-gradient(160deg,#1c1342,#2b1886)}
.note-benefits span{border-color:rgba(255,255,255,.22);color:#ece7ff;background:rgba(255,255,255,.06)}

/* final CTA */
.final-card{background:radial-gradient(100% 120% at 100% 0%,var(--band-c),transparent 60%),linear-gradient(135deg,var(--band-a),var(--band-b));box-shadow:0 30px 70px -20px rgba(43,24,134,.55)}

/* footer */
.site-footer{background:#fff;border-top:1px solid var(--line)}

@media (prefers-reduced-motion:reduce){.hero-callout{transform:none}}

/* feature grid: icons cycle through the four highlight colors */
.feature-grid article>span{background:var(--hl-yellow);color:#3d3410}
.feature-grid article:nth-child(4n+2)>span{background:var(--hl-green);color:#14532d}
.feature-grid article:nth-child(4n+3)>span{background:var(--hl-blue);color:#1e3a8a}
.feature-grid article:nth-child(4n)>span{background:var(--hl-pink);color:#831843}
.feature-grid article h3{font-family:var(--v2-display)}

/* secondary page heroes (locale / research / save / sticky / annotation): same violet band */
.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero{background:radial-gradient(110% 80% at 88% 0%,var(--band-c) 0%,transparent 55%),linear-gradient(160deg,var(--band-a),var(--band-b));color:#fff}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) :is(.locale-copy,.research-hero-copy,.save-hero-copy,.sticky-hero-copy,.annotation-hero-copy) h1{color:#fff}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) h1 span{color:#fff;background:linear-gradient(transparent 62%,var(--dot-yellow) 62%,var(--dot-yellow) 90%,transparent 90%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .04em}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) :is(.eyebrow,.trust-row,.annotation-trust){color:#d9cfff}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) .lead{color:#ece7ff}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) .text-link{color:#fff}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) .button-primary{background:#fff;color:#22125f;box-shadow:0 14px 30px rgba(10,4,50,.35)}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) .product-window,.annotation-workspace{border:0;box-shadow:0 40px 90px rgba(10,4,50,.45)}

/* website-notes (green inline theme): bring onto violet */
.wn-page .site-header .nav-links a,.site-header .nav-links a{color:rgba(255,255,255,.82)}
.site-header .wordmark{color:#fff}
header.site-header a.nav-cta{background:#fff!important;color:#22125f!important;border-color:#fff!important}
.hero h1 span{white-space:normal}
.hero h1 span:after{display:none}
.hero .hero-copy,.hero .trustline,.hero .trustline strong{color:#ece7ff}
.hero .eyebrow{color:#d9cfff}
.hero .btn-primary{background:#fff;color:#22125f}
.hero .subtle-link{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .hero-frame{background:#efeaff;border-color:transparent}
.hero .frame-back{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.btn-primary{background:var(--lav);color:#fff}
/* cards that sit on the violet hero keep dark text */
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) :is(.product-window,.locale-mini,.research-float,.save-float-card,.floating-note-card,.annotation-workspace,.annotation-note,.annotation-save-card){color:var(--ink)}
:is(.locale-hero,.research-hero,.save-hero,.sticky-hero,.annotation-hero) h1 span,.hero h1 span{background:linear-gradient(transparent 68%,var(--dot-yellow) 68%,var(--dot-yellow) 88%,transparent 88%)}