/*
Theme Name: SARI NeuralTech
Theme URI: https://sarineuraltech.com
Author: SARI NeuralTech
Author URI: https://sarineuraltech.com/about/
Description: Custom theme for SARI NeuralTech — Mind, Nature, and Technology in balance. An individual-first, calm, warm-editorial theme (cream, sage, terracotta, serif headlines). No employer, title, or designation appears anywhere in this theme's content by design.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sari-neuraltech
*/

/* ============ RESET & BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sari-bg);
  color: var(--sari-text);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0 0 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
}
p { margin: 0 0 18px; color: var(--sari-text-dim); font-size: 17px; }

/* ============ DESIGN TOKENS ============ */
:root {
  /* Warm Editorial palette — cream, sage, terracotta, warm near-black text. */
  --sari-bg: #FAF6EF;
  --sari-bg-2: #F1E9DC;
  --sari-accent: #3F5D46;
  --sari-accent-2: #C17A54;
  --sari-text: #211D19;
  --sari-text-dim: #6B6055;
  --sari-card: #F3ECE0;
  --sari-border: rgba(43,38,33,0.12);
  --sari-maxw: 1120px;
  --sari-on-accent: #FAF6EF;

  /* Dark band — used sparingly (footer, one homepage callout) for editorial contrast/rhythm. */
  --sari-dark: #211D19;
  --sari-dark-text: #FAF6EF;
  --sari-dark-text-dim: #C7BEB0;
  --sari-dark-border: rgba(255,255,255,0.10);
  --sari-accent-on-dark: #D7A374;
}

/* ============ LAYOUT UTILITIES ============ */
.sari-wrap { max-width: var(--sari-maxw); margin: 0 auto; padding: 0 24px; }
.sari-section { padding: 76px 0; position: relative; }
.sari-section-tight { padding: 44px 0; }
.sari-eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sari-accent); font-weight: 600; margin-bottom: 18px;
}
.sari-border-y { border-top: 1px solid var(--sari-border); border-bottom: 1px solid var(--sari-border); }
.sari-border-t { border-top: 1px solid var(--sari-border); }
.sari-border-b { border-bottom: 1px solid var(--sari-border); }
.sari-center { text-align: center; }

/* ============ BUTTONS ============ */
.sari-btn {
  display: inline-block; padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease; cursor: pointer; border: none;
}
.sari-btn-primary { background: var(--sari-accent); color: var(--sari-on-accent); }
.sari-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(63,93,70,0.22); opacity: 0.95; }
.sari-btn-ghost { border: 1px solid var(--sari-border); color: var(--sari-text); background: transparent; }
.sari-btn-ghost:hover { border-color: var(--sari-accent); transform: translateY(-2px); }
.sari-btn-locked, .sari-btn-locked:hover { opacity: 0.55; cursor: not-allowed; transform: none; border-style: dashed; }
.sari-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.sari-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sari-cta-row.sari-center { justify-content: center; }

/* ============ HEADER / NAV ============ */
.sari-header {
  background: var(--sari-bg); border-bottom: 1px solid var(--sari-border);
  position: sticky; top: 0; z-index: 100;
  transition: background .2s ease, border-color .2s ease;
}
.sari-header-inner {
  max-width: var(--sari-maxw); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.sari-logo {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px; font-weight: 600; color: var(--sari-text); letter-spacing: -0.01em;
  white-space: nowrap; flex-shrink: 0;
}
.sari-logo span { color: var(--sari-accent); }
.sari-logo-image { display: flex; align-items: center; flex-shrink: 0; }
.sari-logo-image img, .sari-logo-image svg { display: block; max-height: 60px; width: auto; }
.sari-logo-image a { display: flex; align-items: center; }

/* ---- Content-discovery additions: category badges, filter tabs, reading time, related posts ---- */
.sari-cat-badge {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 4px 10px; border-radius: 20px;
  background: rgba(63,93,70,0.12); color: var(--sari-accent); margin-right: 8px;
}
.sari-cat-badge.sari-cat-mindful { background: rgba(193,122,84,0.15); color: var(--sari-accent-2); }
.sari-reading-time { font-size: 12.5px; color: var(--sari-text-dim); }
.sari-post-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }

.sari-filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px;
}
.sari-filter-btn {
  background: var(--sari-card); border: 1px solid var(--sari-border); color: var(--sari-text);
  padding: 8px 16px; border-radius: 22px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.sari-filter-btn:hover { border-color: var(--sari-accent); }
.sari-filter-btn.sari-filter-active {
  background: var(--sari-accent);
  border-color: transparent; color: var(--sari-on-accent);
}

.sari-search-box { position: relative; margin-bottom: 28px; max-width: 420px; }
.sari-search-box input {
  width: 100%; padding: 11px 16px 11px 40px; border-radius: 24px; border: 1px solid var(--sari-border);
  font-size: 14px; font-family: inherit; box-sizing: border-box;
  background: #FFFFFF; color: var(--sari-text);
}
.sari-search-box input::placeholder { color: var(--sari-text-dim); }
.sari-search-box input:focus { outline: none; border-color: var(--sari-accent); }
.sari-search-box::before {
  content: "⌕"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--sari-text-dim); font-size: 16px;
}
.sari-no-results { display: none; padding: 30px 0; text-align: center; color: var(--sari-text-dim); }
.sari-no-results.sari-show { display: block; }

.sari-related {
  margin-top: 50px; padding-top: 36px; border-top: 1px solid var(--sari-border);
}
.sari-related h2 { font-size: 20px; margin-bottom: 18px; color: var(--sari-text); }
.sari-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.sari-related-card {
  border: 1px solid var(--sari-border); border-radius: 12px; padding: 18px; background: var(--sari-card);
}
.sari-related-card .sari-date { font-size: 12px; color: var(--sari-text-dim); margin-bottom: 6px; }
.sari-related-card h3 { font-size: 15.5px; margin: 0 0 8px; line-height: 1.35; }
.sari-related-card a { color: var(--sari-text); }
.sari-related-card a:hover { color: var(--sari-accent); }

/* ---- Video embeds (single-post paired video + the Videos hub page) ---- */
.sari-video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: var(--sari-card); border: 1px solid var(--sari-border);
}
.sari-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sari-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.sari-video-card { background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 14px; overflow: hidden; }
.sari-video-card .sari-video-embed { border-radius: 0; border: none; }
.sari-video-empty {
  text-align: center; padding: 60px 24px; border: 1px dashed var(--sari-border); border-radius: 14px;
  color: var(--sari-text-dim); margin-top: 30px;
}
.sari-video-empty strong { display: block; color: var(--sari-text); margin-bottom: 8px; font-size: 16px; }
.sari-nav-toggle {
  display: none; background: none; border: 1px solid var(--sari-border); border-radius: 6px;
  padding: 8px 10px; cursor: pointer; flex-shrink: 0;
  position: relative; width: 40px; height: 36px;
}
.sari-nav-toggle span, .sari-nav-toggle::before, .sari-nav-toggle::after {
  display: block; width: 18px; height: 2px; background: var(--sari-text); content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
}
.sari-nav-toggle::before { top: 12px; }
.sari-nav-toggle span { top: 17px; }
.sari-nav-toggle::after { top: 22px; }
.sari-primary-nav { flex-shrink: 1; min-width: 0; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.sari-header-auth {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--sari-border);
}
.sari-header-auth a { font-size: 13.5px; font-weight: 600; color: var(--sari-text-dim); white-space: nowrap; transition: color .15s ease; }
.sari-header-auth a:hover { color: var(--sari-text); }
.sari-header-auth-cta { color: var(--sari-accent) !important; }
.sari-primary-nav ul {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  flex-wrap: nowrap;
}
.sari-primary-nav li { position: relative; }
.sari-primary-nav a {
  position: relative;
  display: inline-block;
  font-size: 15px; font-weight: 500; color: var(--sari-text-dim);
  white-space: nowrap;
  padding: 6px 1px;
  transition: color .15s ease;
}
.sari-primary-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--sari-accent);
  transition: right .2s ease;
}
.sari-primary-nav a:hover { color: var(--sari-text); }
.sari-primary-nav a:hover::after { right: 0; }
.sari-primary-nav .sari-current > a,
.sari-primary-nav a.sari-current {
  color: var(--sari-text);
}
.sari-primary-nav .sari-current > a::after,
.sari-primary-nav a.sari-current::after {
  right: 0;
}
.sari-nav-cta {
  padding: 9px 18px !important; border: 1px solid var(--sari-border); border-radius: 6px; color: var(--sari-text) !important;
}

/* ============ FOOTER ============ */
.sari-footer { background: var(--sari-dark); border-top: 1px solid var(--sari-dark-border); padding: 48px 0 28px; }
.sari-footer-inner { max-width: var(--sari-maxw); margin: 0 auto; padding: 0 24px; text-align: center; }
.sari-footer p { font-size: 14px; color: var(--sari-dark-text-dim); margin-bottom: 10px; }
.sari-footer .sari-footer-links { display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.sari-footer .sari-footer-links a { font-size: 14px; color: var(--sari-dark-text-dim); }
.sari-footer .sari-footer-links a:hover { color: var(--sari-accent-on-dark); }

/* ============ HERO ============ */
.sari-hero {
  padding: 96px 0 72px;
  background: var(--sari-bg-2);
  border-bottom: 1px solid var(--sari-border);
  position: relative; overflow: hidden;
}
.sari-hero .sari-wrap { position: relative; z-index: 1; }
.sari-hero h1 { font-size: clamp(30px, 5vw, 54px); line-height: 1.1; font-weight: 500; }
.sari-hero .sari-grad { color: var(--sari-accent); }
.sari-hero p.sari-sub { max-width: 680px; font-size: 18px; margin-bottom: 32px; }
.sari-hero.sari-center p.sari-sub { margin-left: auto; margin-right: auto; }

/* ---- Homepage-only hero motif: static concentric rings, no motion, no gradient fill ---- */
.sari-hero-motif {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.sari-hero-motif svg { width: min(640px, 92vw); height: auto; }

/* ---- Two-column intro layout: text + a small brand-illustration visual (Nature/Technology) ---- */
.sari-split-section { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.sari-split-visual { display: flex; align-items: center; justify-content: center; }
.sari-split-visual svg { width: min(240px, 80%); height: auto; }
@media (max-width: 760px) {
  .sari-split-section { grid-template-columns: 1fr; }
  .sari-split-visual { order: -1; margin-bottom: 8px; }
  .sari-split-visual svg { width: 160px; }
}

/* ---- About page: photo + bio row (photo optional — falls back to a placeholder circle) ---- */
.sari-about-photo-row { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; }
.sari-about-photo { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
.sari-about-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sari-about-photo-placeholder {
  width: 100%; height: 100%; border-radius: 50%; border: 1.5px dashed var(--sari-border);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; color: var(--sari-text-dim); line-height: 1.3; background: var(--sari-bg-2);
}
@media (max-width: 560px) {
  .sari-about-photo-row { flex-direction: column; text-align: center; }
}

/* ---- Recommended-reading (affiliate) blocks ---- */
.sari-book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.sari-book-title { font-weight: 600; font-size: 15px; }
.sari-book-author { font-size: 13px; color: var(--sari-text-dim); margin-bottom: 8px; }
.sari-book-why { font-size: 14.5px; margin-bottom: 10px; }
/* Affiliate CTA: a small solid pill in the brand's own terracotta accent — deliberately not a
   generic blue underlined link. It stands out through shape and color contrast against the flat
   text around it (the same reason the site's other buttons use solid fills), while staying fully
   inside the brand palette instead of borrowing the web's default "hyperlink blue," which would
   read as an out-of-place, slightly cheaper convention against this editorial design. */
.sari-book-cta {
  display: inline-block; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
  background: var(--sari-accent-2); color: #fff; transition: transform .18s ease, opacity .18s ease;
}
.sari-book-cta:hover { transform: translateY(-1px); opacity: 0.92; text-decoration: none; }

/* ---- Small line-icon badge, used above each pillar's hero and on the homepage pillar cards ---- */
.sari-pillar-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--sari-bg); border: 1px solid var(--sari-border); color: var(--sari-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.sari-pillar-icon svg { width: 28px; height: 28px; }
.sari-hero.sari-center .sari-pillar-icon { margin-left: auto; margin-right: auto; }
.sari-card .sari-pillar-icon { background: var(--sari-bg-2); margin-bottom: 16px; }

/* ============ STATS STRIP ============ */
.sari-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 44px 24px; max-width: var(--sari-maxw); margin: 0 auto; text-align: center;
}
.sari-stat .num { font-size: clamp(22px, 3vw, 30px); font-weight: 700; font-family: 'Newsreader', serif; }
.sari-stat .lbl { font-size: 13px; color: var(--sari-text-dim); margin-top: 6px; }

/* ============ CARDS ============ */
.sari-card {
  background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 16px; padding: 32px;
}
.sari-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 16px;
}
.sari-tag-primary { background: rgba(63,93,70,0.13); color: var(--sari-accent); }
.sari-tag-secondary { background: rgba(193,122,84,0.15); color: var(--sari-accent-2); }
.sari-link { color: var(--sari-accent); font-weight: 600; font-size: 15px; }
.sari-link:hover { text-decoration: underline; }

.sari-focus-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }

/* ============ POST / JOURNAL CARDS ============ */
.sari-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.sari-post-card { background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 14px; padding: 24px; }
.sari-post-card .sari-date { font-size: 12px; color: var(--sari-text-dim); margin-bottom: 8px; }
.sari-post-card h3 { font-size: 18px; margin-bottom: 10px; line-height: 1.35; }
.sari-post-card p { font-size: 14px; margin-bottom: 12px; }
.sari-post-card img { border-radius: 10px; margin-bottom: 16px; aspect-ratio: 16/9; object-fit: cover; }
.sari-pagination { display: flex; justify-content: space-between; margin-top: 40px; }

/* ---- Homepage-only: the first "Latest from the Journal" post gets a larger, curated treatment
   instead of sitting in the small grid like the other two — a static "editor's pick," not a
   rotator. Falls back to a pillar icon when the post has no featured image yet. ---- */
.sari-post-featured { grid-column: 1 / -1; padding: 0; display: flex; overflow: hidden; }
.sari-post-featured-visual {
  flex: 0 0 280px; background: var(--sari-bg-2); color: var(--sari-accent);
  display: flex; align-items: center; justify-content: center;
}
.sari-post-featured-visual.sari-cat-nature { color: var(--sari-accent-2); }
.sari-post-featured-visual img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; margin-bottom: 0; }
.sari-post-featured-visual svg { width: 60px; height: 60px; }
.sari-post-featured-body { flex: 1; min-width: 0; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.sari-post-featured-body h3 { font-size: 23px; margin-bottom: 10px; }
.sari-post-featured-body p { font-size: 15.5px; }
@media (max-width: 700px) {
  .sari-post-featured { flex-direction: column; }
  .sari-post-featured-visual { flex: 0 0 160px; width: 100%; }
  .sari-post-featured-body { padding: 22px; }
}

/* ============ SINGLE POST ============ */
.sari-single-header { padding: 64px 0 32px; border-bottom: 1px solid var(--sari-border); }
.sari-single-header h1 { font-size: clamp(28px, 4vw, 42px); }
.sari-single-meta { font-size: 14px; color: var(--sari-text-dim); }
.sari-single-content { padding: 48px 0; max-width: 760px; margin: 0 auto; }
.sari-single-content p, .sari-single-content li { font-size: 18px; color: var(--sari-text); }
.sari-single-content h2 { margin-top: 40px; font-size: 26px; }
.sari-single-content img { border-radius: 12px; margin: 24px 0; }
.sari-single-content a { color: var(--sari-accent); text-decoration: underline; }

/* ---- In-article data additions: tables, illustrative stat tiles, diagram figures ---- */
.sari-content-table-wrap { overflow-x: auto; margin: 28px 0; }
.sari-content-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.sari-content-table th {
  background: var(--sari-bg-2); color: var(--sari-text); text-align: left; padding: 12px 14px;
  font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--sari-border);
}
.sari-content-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--sari-border); color: var(--sari-text); vertical-align: top;
}
.sari-content-table tr:last-child td { border-bottom: none; }

.sari-inline-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 8px;
  padding: 26px 20px; background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 14px;
}
.sari-inline-stats .stat-num { font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; font-family: 'Newsreader', serif; color: var(--sari-accent); text-align: center; }
.sari-inline-stats .stat-lbl { font-size: 12.5px; color: var(--sari-text-dim); text-align: center; margin-top: 6px; }
.sari-illustrative-note {
  font-size: 12.5px; color: var(--sari-text-dim); font-style: italic; margin: 10px 0 26px; text-align: center;
}
.sari-figure { margin: 30px 0; text-align: center; }
.sari-figure img { border-radius: 12px; width: 100%; max-width: 620px; margin: 0 auto; display: block; }
.sari-figure figcaption { font-size: 13px; color: var(--sari-text-dim); margin-top: 10px; font-style: italic; }

@media (max-width: 640px) {
  .sari-inline-stats { grid-template-columns: 1fr; }
}

/* ---- App shells: Daily Mentor Mirror + Decision Maker ---- */
.sari-app-shell { max-width: 640px; margin: 0 auto; }
.sari-app-panel {
  background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 16px;
  padding: 30px 28px; margin-bottom: 28px;
}
.sari-app-panel h2 { font-size: 18px; margin-bottom: 6px; }
.sari-app-panel .sari-app-step-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--sari-accent); margin-bottom: 6px; display: block;
}

/* ---- Orphaned (kept for safety, not linked from any live template): wizard progress bar ---- */
.sari-ds-progress { margin-bottom: 28px; }
.sari-ds-progress-track {
  height: 6px; background: var(--sari-bg-2); border-radius: 999px; overflow: hidden; margin-bottom: 12px;
}
.sari-ds-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--sari-accent);
  transition: width .35s ease;
}
.sari-ds-progress-labels { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.sari-ds-progress-step {
  font-size: 11px; font-weight: 600; color: var(--sari-text-dim); text-transform: uppercase; letter-spacing: .04em;
  transition: color .2s ease;
}
.sari-ds-progress-step-active { color: var(--sari-accent); }
.sari-ds-progress-step-done { color: var(--sari-text); }
.sari-ds-step { animation: sariDsStepIn .3s ease; }
@keyframes sariDsStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Orphaned: "Reality Check" report block ---- */
.sari-ds-reality-check {
  background: var(--sari-bg-2);
  border: 1px solid var(--sari-border); border-radius: 12px; padding: 20px 22px;
}
.sari-ds-reality-check h3 {
  color: var(--sari-accent-2) !important;
}
.sari-ds-reality-headline { font-weight: 700; color: var(--sari-text); margin-bottom: 8px; font-size: 15.5px; }
.sari-ds-reality-block p { font-size: 14.5px; }
.sari-ds-autonomy-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: rgba(193,122,84,0.15); color: var(--sari-accent-2); border: 1px solid rgba(193,122,84,0.3);
}

.sari-field { margin-bottom: 22px; }
.sari-field label { display: block; font-size: 14px; color: var(--sari-text); margin-bottom: 8px; font-weight: 600; }
.sari-field textarea, .sari-field input[type="text"] {
  width: 100%; background: #FFFFFF; border: 1px solid var(--sari-border); border-radius: 10px;
  padding: 12px 14px; color: var(--sari-text); font-family: inherit; font-size: 15px; box-sizing: border-box;
}
.sari-field textarea { min-height: 100px; resize: vertical; }
.sari-field textarea:focus, .sari-field input[type="text"]:focus { outline: none; border-color: var(--sari-accent); }
.sari-slider-row { display: flex; align-items: center; gap: 14px; }
.sari-slider-row input[type="range"] { flex: 1; accent-color: var(--sari-accent); }
.sari-slider-val { font-weight: 700; font-size: 16px; min-width: 28px; text-align: center; color: var(--sari-accent); }
.sari-slider-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--sari-text-dim); margin-top: 4px; }

.sari-app-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sari-app-note { font-size: 12.5px; color: var(--sari-text-dim); margin-top: 14px; }

.sari-app-result {
  margin-top: 20px; padding: 20px; border-radius: 12px; background: rgba(63,93,70,.08);
  border: 1px solid rgba(63,93,70,.22); font-size: 15px; color: var(--sari-text); display: none;
}
.sari-app-result.sari-show { display: block; }
.sari-app-result.sari-error { background: rgba(196,68,68,.08); border-color: rgba(196,68,68,.25); }
.sari-app-result .sari-app-result-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sari-accent);
  display: block; margin-bottom: 8px;
}

.sari-score-dial { text-align: center; margin: 22px 0; }
.sari-score-dial .num { font-size: 44px; font-weight: 700; font-family: 'Newsreader', serif; color: var(--sari-accent); }
.sari-score-dial .lbl { font-size: 13px; color: var(--sari-text-dim); margin-top: 2px; }

/* ---- Decision Maker: category-driven slider groups + two-axis score display ---- */
.sari-dm-group {
  border-top: 1px solid var(--sari-border); padding-top: 16px; margin-top: 20px;
}
.sari-dm-group:first-child { border-top: none; margin-top: 8px; padding-top: 0; }
.sari-dm-group h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sari-accent-2); margin: 0 0 12px; font-family: 'Work Sans', sans-serif;
}
.sari-dm-slider-field { margin-bottom: 16px; }
.sari-dm-slider-field label { font-size: 13.5px; }

.sari-dm-reflect {
  border-top: 1px solid var(--sari-border); padding-top: 16px; margin-top: 20px;
  background: var(--sari-bg-2); border-radius: 12px; padding: 18px 20px; border: 1px solid var(--sari-border);
}
.sari-dm-reflect h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sari-accent-2); margin: 0 0 8px; font-family: 'Work Sans', sans-serif;
}
.sari-dm-reflect-note { font-size: 13px; color: var(--sari-text-dim); margin: 0 0 14px; line-height: 1.5; }
.sari-dm-reflect-list { margin: 0; padding-left: 20px; }
.sari-dm-reflect-list li { font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; color: var(--sari-text); }
.sari-dm-reflect-list li:last-child { margin-bottom: 0; }

.sari-dm-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.sari-dm-score-card {
  background: var(--sari-bg-2); border: 1px solid var(--sari-border); border-radius: 12px;
  padding: 18px; text-align: center;
}
.sari-dm-score-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--sari-text-dim); margin-bottom: 6px; }
.sari-dm-score-num { font-size: 36px; font-weight: 700; font-family: 'Newsreader', serif; color: var(--sari-accent); line-height: 1; }
.sari-dm-score-card:nth-child(2) .sari-dm-score-num { color: var(--sari-accent-2); }
.sari-dm-score-band { font-size: 12.5px; color: var(--sari-text-dim); margin-top: 4px; }
.sari-dm-quadrant {
  background: var(--sari-bg-2);
  border: 1px solid var(--sari-border); border-radius: 12px; padding: 16px 18px; font-size: 14px; color: var(--sari-text-dim);
}
.sari-dm-quadrant-title { font-weight: 700; color: var(--sari-text); margin-bottom: 6px; font-size: 15px; }

.sari-app-history-search { margin-bottom: 16px; }
.sari-app-history-item {
  border-bottom: 1px solid var(--sari-border); padding: 16px 0;
}
.sari-app-history-item:last-child { border-bottom: none; }
.sari-app-history-item .sari-date { font-size: 12px; color: var(--sari-text-dim); }
.sari-app-history-item .sari-hist-note { font-size: 14.5px; color: var(--sari-text); margin: 6px 0; }
.sari-app-history-item .sari-hist-reflection { font-size: 13.5px; color: var(--sari-text-dim); font-style: italic; }
.sari-app-empty-history { text-align: center; padding: 24px; color: var(--sari-text-dim); font-size: 14px; }
.sari-privacy-note {
  font-size: 12.5px; color: var(--sari-text-dim); text-align: center; margin: -10px 0 30px;
}
.sari-loading-dots::after { content: '…'; animation: sari-dots 1.2s steps(4, end) infinite; }
@keyframes sari-dots { 0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; } }

/* ---- Flagship homepage callout — deliberately a dark band for editorial contrast/rhythm ---- */
.sari-flagship-card {
  background: var(--sari-dark);
  border: 1px solid var(--sari-dark-border); border-radius: 20px; padding: 44px;
}
.sari-flagship-card h2 { font-size: clamp(24px, 3vw, 32px); color: var(--sari-dark-text); }
.sari-flagship-card p { color: var(--sari-dark-text-dim); }
.sari-flagship-card strong { color: var(--sari-dark-text); }
.sari-flagship-card .sari-tag-primary { background: rgba(255,255,255,0.12); color: var(--sari-accent-on-dark); }
.sari-flagship-card .sari-btn-ghost { border-color: rgba(255,255,255,0.25); color: var(--sari-dark-text); }
.sari-flagship-card .sari-btn-ghost:hover { border-color: var(--sari-accent-on-dark); }

/* ---- Orphaned: select dropdowns + choice-pill groups (checkbox/radio) ---- */
.sari-field select {
  width: 100%; background: #FFFFFF; border: 1px solid var(--sari-border); border-radius: 10px;
  padding: 12px 14px; color: var(--sari-text); font-family: inherit; font-size: 15px; box-sizing: border-box;
}
.sari-field select:focus { outline: none; border-color: var(--sari-accent); }
.sari-choice-group { display: flex; flex-wrap: wrap; gap: 10px; }
.sari-choice {
  position: relative; display: inline-flex; align-items: center; background: var(--sari-bg-2);
  border: 1px solid var(--sari-border); border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-size: 14px; color: var(--sari-text-dim); transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sari-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sari-choice:hover { border-color: var(--sari-accent); }
.sari-choice.sari-selected { border-color: var(--sari-accent); background: rgba(63,93,70,.10); color: var(--sari-text); }

/* ---- Orphaned: structured recommendation report ---- */
.sari-ds-report { margin-top: 6px; }
.sari-ds-report-section { margin-bottom: 26px; }
.sari-ds-report-section h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--sari-text-dim); margin-bottom: 12px;
  font-family: 'Work Sans', sans-serif;
}
.sari-ds-capability-item, .sari-ds-cost-card {
  background: var(--sari-bg-2); border: 1px solid var(--sari-border); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 10px; font-size: 14.5px; color: var(--sari-text);
}
.sari-ds-cost-card .sari-ds-cost-label { font-size: 19px; font-weight: 700; }
.sari-ds-cost-card .sari-ds-cost-range { font-size: 13.5px; color: var(--sari-text-dim); margin-top: 4px; }
.sari-ds-budget-note {
  margin-top: 10px; padding: 12px 16px; background: rgba(196,130,0,.08); border: 1px solid rgba(196,130,0,.28);
  border-radius: 10px; font-size: 13.5px; color: #a05a00;
}
.sari-ds-checklist { padding: 0; margin: 0; }
.sari-ds-checklist li {
  list-style: none; padding-left: 28px; position: relative; margin-bottom: 12px; font-size: 14.5px; color: var(--sari-text-dim);
}
.sari-ds-checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--sari-accent); font-weight: 700; }
.sari-ds-kpi-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sari-ds-kpi {
  background: rgba(63,93,70,.12); color: var(--sari-accent); padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.sari-risk-badge { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.sari-risk-low { background: rgba(52,150,89,.15); color: #2f7a48; }
.sari-risk-medium { background: rgba(196,130,0,.15); color: #a05a00; }
.sari-risk-high { background: rgba(196,90,53,.16); color: #a5461f; }
.sari-risk-critical { background: rgba(196,68,68,.15); color: #a52f2f; }
.sari-ds-disclaimer {
  font-size: 12.5px; color: var(--sari-text-dim); font-style: italic; margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--sari-border);
}
.sari-ds-suggestions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sari-ds-suggestion-btn {
  text-align: left; background: var(--sari-bg-2); border: 1px solid var(--sari-border); border-radius: 10px;
  padding: 14px 18px; cursor: pointer; color: var(--sari-text); font-family: inherit; font-size: 14.5px;
  transition: border-color .15s ease;
}
.sari-ds-suggestion-btn:hover { border-color: var(--sari-accent); }
.sari-ds-narrative {
  margin-top: 6px; padding: 20px; border-radius: 12px; background: rgba(193,122,84,.08);
  border: 1px solid rgba(193,122,84,.25); font-size: 15px; color: var(--sari-text); display: none; white-space: pre-line;
}
.sari-ds-narrative.sari-show { display: block; }

/* Print / "Save as PDF" — hide everything except the generated report */
@media print {
  .sari-header, .sari-footer, .sari-nav-toggle, .sari-ds-form-panel, .sari-ds-history-panel,
  .sari-privacy-note, .sari-app-btn-row, .sari-ds-print-hide { display: none !important; }
  body { background: #fff; color: #111; }
  .sari-ds-report, .sari-ds-report * , .sari-ds-narrative, .sari-ds-narrative * { color: #111 !important; }
  .sari-ds-report-section, .sari-ds-narrative { break-inside: avoid; }
  .sari-app-panel { border: 1px solid #ccc; background: #fff; box-shadow: none; }
  .sari-risk-low, .sari-risk-medium, .sari-risk-high, .sari-risk-critical { color: #111 !important; border: 1px solid #999; }
}

/* ============ TIMELINE (About / Vision) ============ */
.sari-avatar {
  width: 128px; height: 128px; border-radius: 50%; flex: 0 0 128px;
  background: var(--sari-accent);
  display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 700; color: var(--sari-on-accent);
}
.sari-hero-inner { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.sari-timeline { border-left: 2px solid var(--sari-border); padding-left: 28px; margin-top: 8px; }
.sari-tl-item { position: relative; padding-bottom: 32px; }
.sari-tl-item:last-child { padding-bottom: 0; }
.sari-tl-item::before {
  content: ""; position: absolute; left: -34px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sari-accent); box-shadow: 0 0 0 4px rgba(63,93,70,0.15);
}
.sari-tl-when { font-size: 13px; color: var(--sari-accent); font-weight: 600; margin-bottom: 4px; }
.sari-tl-item h3 { font-size: 18px; margin-bottom: 6px; }
.sari-tl-item p { margin-bottom: 0; font-size: 15px; }

.sari-disclosure {
  background: var(--sari-bg-2); border: 1px solid var(--sari-border);
  border-radius: 14px; padding: 28px 32px;
}
.sari-disclosure p { margin-bottom: 0; font-size: 15px; }
.sari-d-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sari-accent); margin-bottom: 10px; display: block; }

/* ============ VIDEO ROWS (Home philosophy sections) ============ */
.sari-video-row { display: flex; gap: 48px; align-items: center; padding: 56px 0; }
.sari-video-row.sari-reverse { flex-direction: row-reverse; }
.sari-video-col { flex: 1 1 46%; position: relative; border-radius: 16px; overflow: hidden; }
.sari-video-col video { width: 100%; border-radius: 16px; }
.sari-video-overlay { position: absolute; left: 20px; bottom: 20px; }
.sari-video-overlay p { font-size: 15px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6); margin-bottom: 2px; }
.sari-text-col { flex: 1 1 46%; }
.sari-attribution { font-size: 13px; color: var(--sari-accent); font-style: normal; }

/* ============ ORPHANED QUIZ STYLES (kept for safety, not linked from any live template) ============ */
.sari-quiz { max-width: 720px; margin: 0 auto; }
.sari-quiz-progress { height: 4px; background: var(--sari-border); border-radius: 4px; margin-bottom: 40px; overflow: hidden; }
.sari-quiz-progress-bar { height: 100%; background: var(--sari-accent); width: 0%; transition: width .3s ease; }
.sari-quiz-question { display: none; }
.sari-quiz-question.sari-active { display: block; }
.sari-quiz-question h3 { font-size: 22px; margin-bottom: 24px; }
.sari-quiz-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.sari-quiz-option {
  display: block; background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 10px;
  padding: 16px 20px; cursor: pointer; font-size: 16px; color: var(--sari-text); transition: border-color .15s ease, background .15s ease;
}
.sari-quiz-option:hover { border-color: var(--sari-accent); }
.sari-quiz-option.sari-selected { border-color: var(--sari-accent); background: rgba(63,93,70,0.08); }
.sari-quiz-result { display: none; text-align: center; }
.sari-quiz-result.sari-active { display: block; }
.sari-quiz-score { font-size: 56px; font-weight: 700; font-family: 'Newsreader', serif; color: var(--sari-accent); }
.sari-quiz-band { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.sari-quiz-nav { display: flex; justify-content: space-between; }
.sari-email-gate { max-width: 420px; margin: 24px auto 0; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sari-email-gate input[type="email"] {
  flex: 1 1 240px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--sari-border);
  background: #FFFFFF; color: var(--sari-text); font-size: 15px;
}

/* ============ APPS OVERVIEW CARDS ============ */
.sari-app-card { display: flex; gap: 24px; align-items: flex-start; background: var(--sari-card); border: 1px solid var(--sari-border); border-radius: 16px; padding: 32px; }
.sari-app-icon {
  flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
  background: var(--sari-bg-2); color: var(--sari-accent);
  display: flex; align-items: center; justify-content: center;
}
.sari-app-icon svg { width: 26px; height: 26px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .sari-primary-nav { display: none; }
  .sari-nav-toggle { display: block; }
  .sari-header.sari-nav-open .sari-primary-nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--sari-bg);
    border-bottom: 1px solid var(--sari-border); padding: 12px 24px;
  }
  .sari-header.sari-nav-open .sari-primary-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sari-header.sari-nav-open .sari-primary-nav a { display: block; padding: 12px 0; width: 100%; }
  .sari-header.sari-nav-open .sari-primary-nav a::after { display: none; }
  .sari-header.sari-nav-open .sari-primary-nav .sari-current > a,
  .sari-header.sari-nav-open .sari-primary-nav a.sari-current { color: var(--sari-accent); }
  .sari-header.sari-nav-open .sari-header-auth {
    border-left: none; border-top: 1px solid var(--sari-border);
    padding: 10px 0 0; margin-top: 6px; width: 100%; gap: 20px;
  }
  .sari-nav-toggle { transition: border-color .15s ease; }
  .sari-nav-toggle span { transition: transform .2s ease, opacity .2s ease; }
  .sari-nav-toggle::before, .sari-nav-toggle::after { transition: transform .2s ease, top .2s ease; }
  .sari-header.sari-nav-open .sari-nav-toggle span { opacity: 0; }
  .sari-header.sari-nav-open .sari-nav-toggle::before { top: 17px; transform: translateX(-50%) rotate(45deg); }
  .sari-header.sari-nav-open .sari-nav-toggle::after { top: 17px; transform: translateX(-50%) rotate(-45deg); }

  .sari-stats { grid-template-columns: repeat(2, 1fr); }
  .sari-focus-grid { grid-template-columns: 1fr; }
  .sari-post-grid { grid-template-columns: 1fr; }
  .sari-video-row, .sari-video-row.sari-reverse { flex-direction: column; }
  .sari-video-col, .sari-text-col { flex: 1 1 100%; width: 100%; }
  .sari-hero-inner { flex-direction: column; text-align: center; }
  .sari-app-card { flex-direction: column; }
  .sari-section { padding: 56px 0; }
}
@media (max-width: 480px) {
  .sari-wrap { padding: 0 18px; }
  .sari-btn { width: 100%; text-align: center; }
  .sari-cta-row { flex-direction: column; }
  .sari-quiz-score { font-size: 44px; }
}