/* Site controls and editorial pages. Product logos retain their own identities. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 84px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  font-size: 0.76rem;
  white-space: nowrap;
  padding: 8px 12px;
  flex-shrink: 0;
}
.js .theme-toggle {
  display: inline-flex;
}
.theme-toggle:hover {
  border-color: var(--muted);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}
.theme-toggle:active {
  transform: translateY(1px);
}
[data-theme="dark"] .theme-moon,
[data-theme="light"] .theme-sun {
  display: none;
}
.nav-wrap {
  gap: 20px;
}
.site-nav {
  gap: 24px;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px 35px;
  margin-bottom: 100px;
}
.blog-art {
  min-height: 270px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 45px;
  background: var(--product-color, var(--soft));
  border-radius: 14px;
  margin-bottom: 25px;
}
.blog-art .product-logo {
  width: 120px;
  height: 120px;
  transform: rotate(-8deg);
  border-radius: 28px;
}
.blog-art > span {
  align-self: end;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.blog-card h2 {
  font-size: 2.1rem;
  line-height: 1.12;
  max-width: 530px;
}
.blog-card > p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 530px;
}
.blog-article .article-layout {
  padding-top: 60px;
}
.blog-article .article-copy p {
  font-size: 1.12rem;
  line-height: 1.9;
  max-width: 70ch;
}
.article-tool > .product-logo {
  width: 70px;
  height: 70px;
}
.article-header h1 {
  overflow-wrap: break-word;
}
.mini-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cocoa .guide-art,
.guide-art.cocoa {
  background: #ead4aa;
}
.citrus .guide-art,
.guide-art.citrus {
  background: #e8efb1;
}
.hero-desk[data-current="cookiekiller"],
.playground-desk[data-current="cookiekiller"] {
  background: #ede0c9;
}
.hero-desk[data-current="popupdestroyer"],
.playground-desk[data-current="popupdestroyer"] {
  background: #e6ecc8;
}
.sample-consent h3 {
  margin-top: 15px;
}
.sample-consent h2{font:28px/1.2 Georgia;margin:18px 0;color:#433124;letter-spacing:normal}
.sample-overlay article h2{font:31px/1.2 Georgia;margin:15px 0;letter-spacing:normal}
[data-theme=dark] .sample-consent h2{color:inherit}
.demo-tabs {
  flex-wrap: wrap;
  overflow: visible;
  gap: 8px;
}
.demo-tabs button {
  flex: 1 1 28%;
  min-width: 0;
  padding: 11px 13px;
  font-size: 0.74rem;
}
.demo-tabs button .product-logo {
  width: 23px;
  height: 23px;
  min-width: 23px;
}
.window-address .product-logo {
  border-radius: 3px;
}
.under-page {
  color: #202622;
}
.consent-slip small {
  font-family: var(--body);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121616;
  --ink: #eef1ec;
  --muted: #a6b1ad;
  --line: #2c3534;
  --red: #f39a83;
  --soft: #191f1f;
  --white: #1c2322;
  --green: #1c2b24;
  --blue: #1b2a2d;
  --yellow: #2d2a20;
  --pink: #302523;
}
[data-theme="dark"] .cocoa {
  --product-color: #4b3d2d;
}
[data-theme="dark"] .citrus {
  --product-color: #39452c;
}
[data-theme="dark"]
  :is(
    .button.primary,
    .small-button.filled,
    .filter-group button[aria-pressed="true"],
    .skip-link
  ) {
  color: var(--bg);
}
[data-theme="dark"] .button.primary:hover {
  color: #181b19;
}
[data-theme="dark"]
  :is(.button.secondary, .small-button, .search-field, .ocr-controls select) {
  border-color: var(--line);
}
[data-theme="dark"]
  :is(
    .small-button,
    .search-field,
    .archive-item,
    .mini-product,
    .comparison-table
  ) {
  background: var(--white);
}
/* One neutral stage; each product is identified by a thin accent rail. */
[data-theme="dark"] :is(.hero-desk, .playground-desk) {
  background: #191f1f;
  border: 1px solid #2f3938;
  box-shadow: inset 0 2px 0 0 var(--stage-accent, #46514f);
}
[data-theme="dark"] :is(.hero-desk, .playground-desk)[data-current="aegis"] {
  --stage-accent: #6fae74;
}
[data-theme="dark"] :is(.hero-desk, .playground-desk)[data-current="webvault"] {
  --stage-accent: #5aa88f;
}
[data-theme="dark"]
  :is(.hero-desk, .playground-desk)[data-current="tablesnap"] {
  --stage-accent: #5793ba;
}
[data-theme="dark"] :is(.hero-desk, .playground-desk)[data-current="textlens"] {
  --stage-accent: #c9a84e;
}
[data-theme="dark"]
  :is(.hero-desk, .playground-desk)[data-current="cookiekiller"] {
  --stage-accent: #cc8452;
}
[data-theme="dark"]
  :is(.hero-desk, .playground-desk)[data-current="popupdestroyer"] {
  --stage-accent: #8cb258;
}
[data-theme="dark"] .demo-tabs button {
  background: var(--white);
  border-color: var(--line);
}
[data-theme="dark"] .demo-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="dark"] .demo-window {
  background: #202727;
  border-color: #37413f;
  box-shadow: 0 18px 40px #0006;
}
[data-theme="dark"] .window-bar {
  background: #252d2c;
  border-color: #37413f;
}
[data-theme="dark"] .demo-status {
  border-color: var(--line);
}
[data-theme="dark"] .story-lines i {
  background: var(--line);
}
[data-theme="dark"] .archive-item {
  border-color: var(--line);
}
[data-theme="dark"] .archive-item:hover {
  background: var(--soft);
}
[data-theme="dark"] .archive-icon {
  background: #243029;
}
[data-theme="dark"] .working-table th {
  background: #293740;
  color: #b7c5cc;
}
[data-theme="dark"] .working-table :is(td, th) {
  border-color: #3a4b54;
}
[data-theme="dark"] .working-table tr[data-duplicate] {
  background: #3d3726;
}
[data-theme="dark"] .ocr-controls select {
  background: var(--bg);
}
[data-theme="dark"] .ocr-output {
  border-color: var(--line);
}
[data-theme="dark"] .ocr-image {
  color: #d7d9cb;
  background: #2b3130;
}
[data-theme="dark"] .ocr-image .ocr-sample {
  color: #eef0e5;
}
[data-theme="dark"] .sample-ads > div {
  color: #e7e9dc;
  background: #2b3130;
  border-color: #414b47;
}
[data-theme="dark"] .sample-ads > div:last-child {
  background: #2d3231;
  color: #e7e9dc;
  border-color: #4a5450;
}
/* Art panels share one neutral surface; the product hue becomes a 3px edge. */
[data-theme="dark"]
  :is(
    .product-card .product-card-visual,
    .product-hero-art,
    .product-cta,
    .guide-art,
    .article-cover,
    .blog-art
  ) {
  background: #1d2524;
  box-shadow: inset 0 3px 0 #46514f;
}
[data-theme="dark"]
  :is(
    .product-card.red .product-card-visual,
    .red .product-hero-art,
    .product-cta.red,
    .guide-art.red,
    .article-cover.red,
    .blog-art.red
  ) {
  box-shadow: inset 0 3px 0 #a8503c;
}
[data-theme="dark"]
  :is(
    .product-card.green .product-card-visual,
    .green .product-hero-art,
    .product-cta.green,
    .guide-art.green,
    .article-cover.green,
    .blog-art.green
  ) {
  box-shadow: inset 0 3px 0 #4f8f5c;
}
[data-theme="dark"]
  :is(
    .product-card.blue .product-card-visual,
    .blue .product-hero-art,
    .product-cta.blue,
    .guide-art.blue,
    .article-cover.blue,
    .blog-art.blue
  ) {
  box-shadow: inset 0 3px 0 #4b83a8;
}
[data-theme="dark"]
  :is(
    .product-card.yellow .product-card-visual,
    .yellow .product-hero-art,
    .product-cta.yellow,
    .guide-art.yellow,
    .article-cover.yellow,
    .blog-art.yellow
  ) {
  box-shadow: inset 0 3px 0 #b29240;
}
[data-theme="dark"]
  :is(.guide-art.cocoa, .article-cover.cocoa, .blog-art.cocoa) {
  background: #1d2524;
  box-shadow: inset 0 3px 0 #a07c4e;
}
[data-theme="dark"]
  :is(.guide-art.citrus, .article-cover.citrus, .blog-art.citrus) {
  background: #1d2524;
  box-shadow: inset 0 3px 0 #7f9b3b;
}
[data-theme="dark"] :is(.consent-slip, .file-sheet.sheet-front, .under-page) {
  background: #d4d1bb;
}
[data-theme="dark"] .table-sheet {
  background: #d5dfe1;
  color: #243840;
}
[data-theme="dark"] .table-sheet :is(th, small, span),
[data-theme="dark"] .table-sheet > div:first-child {
  color: #3b4c53;
}
[data-theme="dark"] .visual-lens :is(.lens-image, .lens-result) {
  background: #ddd2ae;
  color: #3f3620;
}
[data-theme="dark"] .visual-lens :is(small, span) {
  color: #4a4227;
}
[data-theme="dark"] .sample-consent {
  background: #242928;
  color: #eceeea;
}
[data-theme="dark"] .sample-consent :is(h3, p) {
  color: inherit;
}
[data-theme="dark"] .sample-consent .mini-label {
  color: #a9b3ae;
}
[data-theme="dark"] .sample-overlay {
  background: #293128;
  color: #eceee2;
}
[data-theme="dark"] .article-tip {
  background: #293728;
  border-color: #82976e;
}
[data-theme="dark"] .compare-prompt,
[data-theme="dark"] .mini-product,
[data-theme="dark"] .feature-item {
  border-color: var(--line);
}
[data-theme="dark"] .mini-product:hover {
  background: var(--soft);
}
[data-theme="dark"] .product-card-visual .round-arrow {
  background: #1f2625;
  border-color: #46514f;
}
[data-theme="dark"] .free-label {
  background: var(--soft);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] .site-footer {
  border-top: 1px solid var(--line);
  background: #121613;
}
/* ---- contrast fixes ---- */
[data-theme="dark"] .small-button.filled {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="dark"] .small-button.filled:hover {
  background: var(--red);
  border-color: var(--red);
  color: #1a1512;
}
[data-theme="dark"] .error-number {
  color: #2f3a37;
}
[data-theme="dark"] .export-stamp {
  background: #dfe3cd;
  color: #2a2a1f;
}
[data-theme="dark"] .file-stamp {
  background: #e4dc9e;
  color: #2a2a1f;
}
[data-theme="dark"] .file-sheet small {
  color: #46503a;
}
/* sticky notes stay paper-bright in dark mode */
[data-theme="dark"] .desk-sticker {
  border-color: #221f16;
}
[data-theme="dark"] .sticker-one {
  background: #e7d493;
  color: #221f14;
}
[data-theme="dark"] .sticker-two {
  background: #eabfa9;
  color: #2b1a13;
}
/* the sample popup is dark in both themes, so its copy must not inherit --muted */
.sample-overlay :is(p, small) {
  color: inherit;
}
@media (max-width: 1100px) {
  .site-nav {
    gap: 18px;
  }
  .nav-wrap {
    gap: 18px;
  }
  .theme-toggle {
    min-width: 75px;
  }
  .header-cta {
    display: none;
  }
}
@media (max-width: 800px) {
  .theme-toggle {
    margin-left: auto;
    margin-right: 14px;
    min-width: 70px;
  }
  .menu-toggle {
    order: 1;
    margin-left: 0;
  }
  .site-nav {
    order: 3;
  }
  .nav-wrap {
    gap: 0;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .blog-art {
    min-height: 220px;
  }
  .blog-card h2 {
    font-size: 1.8rem;
  }
  .blog-article .article-layout {
    padding-top: 30px;
  }
  .mini-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .demo-tabs button {
    flex-basis: 30%;
    flex-direction: column;
    gap: 5px;
    font-size: 0.65rem;
  }
}
@media (max-width: 400px) {
  .brand {
    font-size: 21px;
    gap: 9px;
  }
  .brand > svg {
    width: 23px;
    height: 23px;
  }
  .theme-toggle {
    min-width: 44px;
    padding: 10px;
    margin-right: 10px;
  }
  .theme-toggle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .mini-product-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mini-product strong {
    font-size: 1rem;
  }
}