/* ============================================================
   Evaluation AI — "User Interviews" design system (site build v4)
   Warm paper canvas · deep teal action · serif display · mono labels
   Fraunces (serif) · Figtree (sans) · IBM Plex Mono
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700&family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root{
  --canvas:#ffffff;
  --canvas-soft:#f8f4f2;
  --canvas-warm:#e6e2e0;
  --surface-accent:#e4f0f1;
  --ink:#000000;
  --ink-teal:#083236;
  --body-soft:#504d49;
  --mute:#817874;
  --primary:#0e4749;
  --primary-hover:#1c5d5f;
  --primary-active:#2a7779;
  --primary-pale:#cae1e2;
  --emerald-cta:#156152;
  --emerald-cta-hover:#177863;
  --emerald-bright:#158d71;
  --berry:#662344;
  --berry-deep:#4e132f;
  --navy:#011936;
  --navy-deep:#021020;
  --highlight-emerald:#bfddd5;
  --highlight-teal:#cae1e2;
  --highlight-yellow:#d9c787;
  --highlight-sand:#ece1d4;
  --border:#e2e6e9;
  --positive:#158d71;
  --destructive:#d64651;
  --on-primary:#f1fbfb;
  --font-serif:"Fraunces","P22 Mackinac Pro",Georgia,serif;
  --font-sans:"Figtree","Sofia Pro",system-ui,-apple-system,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-md:5px; --r-lg:8px; --r-xl:16px; --r-2xl:24px; --r-pill:88px; --r-pill-lg:100px;
  --shadow-soft:0 16px 16px -4px #0000000d;
  --shadow-card:8px 8px 20px #0000000f;
  --shadow-hard:6px 6px 0 0 #000000;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas-soft);color:var(--ink);font-family:var(--font-sans);font-size:14px;line-height:20px}
img{max-width:100%;display:block}
a{color:var(--primary)}

/* Type */
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:500;color:var(--ink);margin:0}
.h1{font-size:64px;line-height:76px;letter-spacing:-.01em;color:var(--ink-teal)}
.h2{font-size:42px;line-height:50px}
.h3{font-size:36px;line-height:44px}
.h4{font-family:var(--font-serif);font-weight:700;font-size:20px;line-height:26px}
.lead{font-size:18px;line-height:30px;color:var(--body-soft)}
.body{font-size:16px;line-height:24px;color:var(--ink)}
.small{font-size:13px;line-height:20px;color:var(--mute)}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--primary);display:inline-flex;align-items:center;gap:8px}
.eyebrow-pill{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#073b31;background:var(--highlight-emerald);border-radius:var(--r-pill);padding:4px 12px}
.eyebrow-pill.outline{background:#f4f9f9;border:1.5px solid var(--primary-active);color:var(--primary)}
.highlight{background:var(--highlight-emerald);border-radius:3px;padding:2px 6px}
.highlight.teal{background:var(--highlight-teal);padding:3px 8px}
.highlight.yellow{background:var(--highlight-yellow)}

/* Layout */
.container{max-width:1300px;margin:0 auto;padding:0 24px}
.band{padding:88px 0}.band.tight{padding:56px 0}
.band.warm{background:var(--canvas-soft)}.band.paper{background:var(--canvas)}
.band.teal{background:var(--primary)}.band.emerald{background:var(--emerald-bright)}
.band.navy{background:var(--navy);color:var(--canvas)}
.center{text-align:center}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.mt-lg{margin-top:24px}.mt-xl{margin-top:40px}.stack>*+*{margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:500;font-size:15px;line-height:1;padding:14px 22px 15px;border-radius:48px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary-hover);color:#fff}
.btn-primary:hover{background:var(--primary-active)}
.btn-brand{background:var(--emerald-cta);color:#fff;border-radius:var(--r-pill)}
.btn-brand:hover{background:var(--emerald-cta-hover)}
.btn-outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary-pale)}
.btn-secondary{background:#fff;border:2px solid var(--primary);color:var(--primary)}
.btn-secondary:hover{background:var(--primary-pale)}
.btn-small{padding:9px 16px;font-size:13px}
.btn-lg{padding:16px 28px 17px;font-size:16px}

/* Product card (soft register) */
.pcard{background:var(--canvas);border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-card)}
.pcard h3{font-size:22px;line-height:28px;font-family:var(--font-serif);font-weight:500;margin-bottom:6px}

/* Bento card (hard register) */
.bento{border-radius:var(--r-xl);border:2px solid var(--ink);box-shadow:var(--shadow-hard);padding:26px;background:var(--surface-accent);display:flex;flex-direction:column;gap:6px}
.bento h3{font-family:var(--font-serif);font-weight:500;font-size:20px;line-height:25px}
.bento.teal{background:var(--primary-hover);color:#fff}
.bento.emerald{background:var(--emerald-bright);color:#fff}
.bento.berry{background:#f9edf3}
.bento.yellow{background:var(--highlight-yellow)}
.bento.sand{background:var(--highlight-sand)}
.bento.pale{background:var(--primary-pale)}
.bento .num{font-family:var(--font-mono);font-size:20px;font-weight:600}
.bento.dark{background:var(--berry);color:#fff}
.bento.dark h3{color:#fff}
.bento.dark ul.ticks li{color:#f0e3ea}
.bento.dark ul.ticks li::before{background:var(--highlight-yellow)}

/* Tiers */
.tier{background:var(--canvas);border-radius:var(--r-2xl);padding:32px;border:1.5px solid var(--border);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:flex-start}
.tier.featured{background:var(--navy);color:var(--canvas);border:2px solid var(--ink)}
.tier .amount{font-family:var(--font-serif);font-size:44px;font-weight:500;letter-spacing:-.02em}
ul.ticks{list-style:none;padding:0;margin:14px 0 0}
ul.ticks li{position:relative;padding-left:24px;margin:8px 0;font-size:14px;color:var(--body-soft)}
ul.ticks li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;background:var(--emerald-bright)}
.tier.featured ul.ticks li,.band.navy ul.ticks li,.band.teal ul.ticks li,.band.emerald ul.ticks li{color:#e9eef0}

/* Table */
.stat-table{width:100%;border-collapse:collapse;background:var(--canvas);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.stat-table th,.stat-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px}
.stat-table th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--body-soft);background:var(--canvas-soft)}
.stat-table tr:last-child td{border-bottom:0}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1300px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
.brand .mark{width:22px;height:22px;border-radius:6px;background:var(--primary);position:relative}
.brand .mark::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:500}
.nav-links a{color:var(--ink);text-decoration:none}
.nav-links a:hover{color:var(--primary)}
.nav-badge{font-family:var(--font-mono);font-size:10px;color:var(--emerald-cta);vertical-align:super;margin-left:2px}

/* Hero */
.hero{padding:64px 0 56px}
.hero .h1{max-width:16ch}
section{padding:72px 0}
section.tight{padding:48px 0}
.bg-lifted{background:var(--canvas)}
.bg-warm{background:var(--canvas-soft)}
.bg-teal{background:var(--primary);color:#fff}
.bg-navy{background:var(--navy);color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Footer */
footer.uu{background:var(--navy);color:var(--canvas);padding:88px 0 40px}
footer.uu h4{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#9fb0c0;margin:0 0 12px}
footer.uu a{display:block;color:#e9eef0;text-decoration:none;font-size:13px;padding:6px 0}
footer.uu a:hover{color:#fff}
footer.uu .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
footer.uu .legal{margin-top:40px;padding-top:20px;border-top:1px solid #ffffff20;font-size:12px;color:#9fb0c0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Page components */
.crumbs{font-family:var(--font-mono);font-size:12px;color:var(--mute);margin-bottom:14px}
.crumbs a{color:var(--primary);text-decoration:none}
.ghost{font-family:var(--font-serif);font-size:110px;line-height:1;color:transparent;-webkit-text-stroke:1px var(--border);position:absolute;right:24px;top:12px;pointer-events:none;user-select:none;z-index:0}
.hero-rel{position:relative;overflow:hidden}
.hero-rel .container{position:relative;z-index:1}
.glance{width:100%;border-collapse:collapse;margin:18px 0}
.glance th{text-align:left;width:168px;vertical-align:top;padding:12px 16px 12px 0;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--body-soft);border-bottom:1px solid var(--border);font-weight:600}
.glance td{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--ink)}
.glance td b{font-weight:600}
.pc{border-radius:var(--r-lg);padding:24px;border:1.5px solid var(--border);background:var(--canvas)}
.pc.good{border-color:var(--highlight-emerald)}
.pc.bad{background:#fdf1f2;border-color:#f0d3d6}
.pc.bad ul.ticks li::before{background:var(--destructive)}
.cover{aspect-ratio:3/4;border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:30px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.cover .k{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#ffffffcc}
.cover h3{color:#fff;font-size:30px;line-height:36px}
.cover .rule{width:44px;height:3px;background:var(--highlight-emerald);margin:14px 0}
.cover ul{list-style:none;padding:0;margin:0;font-size:13px;color:#ffffffcc}
.cover ul li{margin:5px 0}
.cover .foot{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#ffffff99}
.cover.free{background:linear-gradient(160deg,var(--primary-hover),var(--primary))}
.cover.pro{background:linear-gradient(160deg,var(--navy),var(--navy-deep))}
.video-ph{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);background:linear-gradient(160deg,#0b2b2c,#062020);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);overflow:hidden}
.video-ph .play{width:64px;height:64px;border-radius:50%;background:#ffffff1a;border:2px solid #ffffff66;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;padding-left:4px}
.video-ph .tag{position:absolute;right:16px;bottom:14px;font-family:var(--font-mono);font-size:11px;color:#fff;background:#00000066;border-radius:var(--r-pill);padding:5px 12px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini a{background:var(--canvas);border-radius:var(--r-lg);padding:16px 18px;text-decoration:none;box-shadow:var(--shadow-card);border:1.5px solid var(--border);font-family:var(--font-serif);font-size:18px;color:var(--ink)}
.mini a span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mute);margin-top:4px}
.card-tint{background:var(--primary-pale);border-radius:var(--r-xl);padding:32px}
.stars{color:var(--highlight-yellow);font-size:16px;letter-spacing:2px}
.withaside{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.sticky{position:sticky;top:88px}
.aside-card{background:var(--canvas);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:28px;border:1.5px solid var(--border)}

/* Directory: search, chips, tool cards */
.search input{flex:1;min-width:260px;width:100%;padding:15px 18px;border:1px solid var(--border);border-radius:var(--r-pill);font-family:var(--font-sans);font-size:15px;background:#fff}
.search{margin:18px 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 24px}
.chip{border:1.5px solid var(--primary-active);background:#f4f9f9;border-radius:var(--r-pill);padding:7px 15px;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;color:var(--primary);cursor:pointer}
.chip.on{background:var(--primary);color:#fff}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.tcard .cat{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--emerald-cta)}
.tcard h3{font-family:var(--font-serif);font-weight:500;font-size:22px;color:var(--ink)}
.tcard p{margin:0;font-size:14px;color:var(--body-soft)}
.tcard .foot{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--mute)}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-card)}
.step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-family:var(--font-mono);font-weight:600;display:flex;align-items:center;justify-content:center}
.step h3{font-size:20px;line-height:26px;margin-bottom:4px}

/* Video card + player */
.video-card{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-card);background:#000}
.video-card video{width:100%;display:block}
.vp-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:2px solid #ffffff66;background:#00000066;color:#fff;font-size:24px;display:grid;place-items:center;cursor:pointer}
.vp-tag{position:absolute;right:14px;bottom:12px;font-family:var(--font-mono);font-size:11px;color:#fff;background:#00000066;border-radius:var(--r-pill);padding:5px 12px}

/* Newsletter popup */
.nl-overlay{position:fixed;inset:0;background:#01193666;display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.nl-overlay.on{display:flex}
.nl-modal{position:relative;background:var(--canvas);border-radius:var(--r-2xl);padding:36px;max-width:460px;box-shadow:0 24px 60px #00000033;text-align:center}
.nl-modal h3{font-family:var(--font-serif);font-size:26px;margin:10px 0 8px}
.nl-modal p{color:var(--body-soft);font-size:15px}
.nl-modal form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.nl-modal input{flex:1;min-width:200px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-family:var(--font-sans);font-size:15px}
.nl-close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:26px;color:var(--mute);cursor:pointer}

@media (max-width:991px){
  .h1{font-size:46px;line-height:54px}.h2{font-size:34px;line-height:42px}.h3{font-size:28px;line-height:36px}
  .split{grid-template-columns:1fr;gap:32px}.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  footer.uu .cols{grid-template-columns:repeat(2,1fr)}
  .withaside{grid-template-columns:1fr;gap:24px}.sticky{position:static}
  .mini{grid-template-columns:1fr}.ghost{display:none}.two{grid-template-columns:1fr}
}
@media (max-width:767px){
  .band{padding:56px 0}section{padding:52px 0}.hero{padding:40px 0 32px}
  .g3,.g2,.g4,.tgrid{grid-template-columns:1fr}
}
@media (max-width:479px){
  .h1{font-size:34px;line-height:40px}
  .nav-links{display:none}
}