:root {
  color-scheme: light;
  --bg: #f7f7fb;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-strong: #ffffff;
  --text: #111827;
  --muted: #667085;
  --line: rgba(15, 23, 42, 0.09);
  --blue: #168cff;
  --cyan: #22d3ee;
  --purple: #6d35f2;
  --violet: #8b5cf6;
  --pink: #e63b7a;
  --green: #31bd62;
  --orange: #f59e0b;
  --shadow: 0 30px 80px rgba(45, 49, 80, 0.14);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 5%, rgba(34, 211, 238, .08), transparent 30rem),
    radial-gradient(circle at 92% 14%, rgba(109, 53, 242, .08), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, #f6f7fb 45%, #fafaff 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

button, a { -webkit-tap-highlight-color: transparent; }

.page-glow {
  position: fixed;
  pointer-events: none;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .25;
  z-index: -1;
}

.page-glow-one {
  top: -10rem;
  right: -10rem;
  background: #7c4dff;
}

.page-glow-two {
  top: 42rem;
  left: -15rem;
  background: #21d4fd;
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: min(1120px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 10px 12px 10px 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 40px rgba(57, 63, 98, .09);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-radius: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  letter-spacing: -.02em;
  width: fit-content;
}

.brand-icon {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 0 5px 16px rgba(60, 50, 150, .13);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: #596273;
}

.nav-links a:hover { color: #111827; }

.site-header > .button {
  justify-self: end;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover { transform: translateY(-2px); }

.button-small {
  padding: 10px 16px;
  font-size: 14px;
}

.button-large {
  padding: 15px 21px;
  font-size: 16px;
}

.button-primary {
  color: white;
  background: linear-gradient(135deg, #128cff 0%, #3456e8 46%, #7936e8 100%);
  box-shadow: 0 10px 24px rgba(71, 72, 217, .24);
}

.button-primary:hover { box-shadow: 0 14px 32px rgba(71, 72, 217, .32); }

.button-secondary {
  color: #242b3b;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(30, 41, 59, .10);
  box-shadow: 0 8px 18px rgba(34, 43, 72, .06);
}

.hero {
  width: min(1120px, calc(100% - 40px));
  margin: 72px auto 26px;
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: 54px;
}

.eyebrow {
  color: #6c55d9;
  font-weight: 760;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero h1,
.section h2 {
  margin: 0;
  letter-spacing: -.055em;
  line-height: .98;
}

.hero h1 {
  font-size: clamp(54px, 6vw, 86px);
  max-width: 760px;
}

.hero h1 span {
  background: linear-gradient(100deg, #117df0 5%, #3d58e7 45%, #7b3bd4 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  max-width: 650px;
  margin: 26px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 19px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 18px;
  color: #7a8497;
  font-size: 13px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.dot { opacity: .5; }

.hero-visual {
  min-height: 540px;
  display: grid;
  place-items: center;
  position: relative;
}

.icon-halo {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(25, 199, 251, .35), transparent 50%),
    radial-gradient(circle at 65% 65%, rgba(115, 54, 239, .30), transparent 54%);
  filter: blur(42px);
}

.hero-icon {
  position: relative;
  width: min(490px, 94%);
  border-radius: 28%;
  filter: drop-shadow(0 30px 40px rgba(65, 54, 116, .18));
  transform: rotate(1.5deg);
}

.shortcut-strip {
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto 105px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 16px 50px rgba(38, 45, 76, .08);
  backdrop-filter: blur(20px);
  border-radius: 22px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.shortcut-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #596273;
  font-size: 14px;
}

.shortcut-key, kbd {
  background: linear-gradient(180deg, #fff, #f0f1f6);
  border: 1px solid rgba(20,30,50,.12);
  border-bottom-width: 2px;
  border-radius: 9px;
  padding: 6px 9px;
  color: #293144;
  font: inherit;
  font-weight: 760;
  box-shadow: 0 4px 10px rgba(28,35,58,.06);
}

.shortcut-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .07em;
  color: #536174;
}

.shortcut-actions i {
  width: 4px;
  height: 4px;
  background: #b4bcc8;
  border-radius: 50%;
}

.section {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 120px;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 42px;
}

.section-heading.compact { margin-bottom: 30px; }

.section h2 {
  font-size: clamp(42px, 5vw, 66px);
}

.section-heading p,
.quick-capture-copy > p,
.privacy-card p,
.download-copy > p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.feature-card {
  min-height: 265px;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 18px 45px rgba(45, 52, 81, .08);
  position: relative;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -80px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .08;
  filter: blur(4px);
}

.feature-card-wide {
  grid-column: 1 / -1;
  min-height: 220px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 11%, white);
  color: var(--accent);
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 28px;
}

.feature-card h3 {
  margin: 0 0 10px;
  font-size: 27px;
  letter-spacing: -.035em;
}

.feature-card p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  line-height: 1.62;
  font-size: 16px;
}

.feature-caption {
  position: absolute;
  right: 26px;
  bottom: 24px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--accent) 78%, #475467);
  font-weight: 790;
}

.accent-blue { --accent: #168cff; }
.accent-purple { --accent: #8051ef; }
.accent-pink { --accent: #e63b7a; }
.accent-green { --accent: #31bd62; }
.accent-orange { --accent: #f59e0b; }

.quick-capture-section {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 70px;
  align-items: center;
}

.quick-capture-copy h2 {
  font-size: clamp(42px, 4.5vw, 62px);
}

.example-list {
  margin-top: 28px;
  display: grid;
  gap: 10px;
}

.example-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 15px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(30, 41, 59, .07);
  color: #596273;
  font-size: 13px;
}

.example-row code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #2e3646;
}

.capture-mockup {
  border-radius: 30px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(30,35,48,.98), rgba(25,28,37,.94));
  color: white;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 36px 80px rgba(17, 24, 39, .28);
}

.capture-header {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px 17px;
  color: #f5f6f8;
}

.capture-input {
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 18px 4px;
  color: #9fa7b4;
  font-size: 15px;
}

.capture-result {
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  padding: 16px;
  border-radius: 18px;
}

.capture-result-type {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.capture-result-type small {
  color: #959eaa;
  display: block;
  margin-top: 4px;
}

.capture-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #b99aff;
  background: rgba(139, 92, 246, .12);
}

.valid {
  color: #66d988;
  font-size: 13px;
  font-weight: 700;
}

.capture-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.capture-buttons button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.10);
  color: #eef1f5;
  background: rgba(255,255,255,.06);
  padding: 11px 8px;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
}

.capture-footer {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  color: #8e97a4;
  font-size: 12px;
}

.philosophy-card,
.privacy-card,
.download-card {
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--shadow);
}

.philosophy-card {
  padding: 54px;
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 80px;
  align-items: end;
}

.philosophy-card h2 {
  font-size: clamp(40px,4.2vw,58px);
}

.philosophy-card p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 18px;
  margin: 0;
}

.privacy-card {
  padding: 50px;
  display: grid;
  grid-template-columns: auto 1.2fr .8fr;
  gap: 30px;
  align-items: center;
}

.privacy-lock {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #31bd62;
  background: rgba(49, 189, 98, .11);
  box-shadow: inset 0 0 0 1px rgba(49, 189, 98, .10);
}

.privacy-card h2 {
  font-size: clamp(38px,4vw,55px);
}

.privacy-points {
  display: grid;
  gap: 12px;
  color: #4d596b;
  font-size: 14px;
}

.download-card {
  padding: 36px 48px 36px 36px;
  display: grid;
  grid-template-columns: 340px 1fr;
  align-items: center;
  gap: 48px;
}

.download-art {
  border-radius: 30px;
  background:
    radial-gradient(circle at 30% 25%, rgba(34,211,238,.22), transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(124,58,237,.18), transparent 47%),
    #f7f8fd;
  display: grid;
  place-items: center;
  min-height: 360px;
}

.download-art img {
  width: 285px;
  max-width: 88%;
  border-radius: 26%;
  filter: drop-shadow(0 22px 30px rgba(57, 47, 112, .18));
}

.download-copy h2 {
  font-size: clamp(42px,4.5vw,60px);
}

.download-actions { margin: 26px 0 16px; }

.download-info {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #7b8494;
  font-size: 13px;
}

.download-note {
  margin-top: 18px !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4f5fa;
  color: #687286 !important;
  font-size: 12px !important;
}

.download-note code,
.faq-grid code {
  background: #eceef4;
  border-radius: 6px;
  padding: 2px 5px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}

.faq-grid details {
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 14px 35px rgba(43,51,79,.06);
  padding: 18px 20px;
}

.faq-grid summary {
  cursor: pointer;
  font-weight: 720;
}

.faq-grid p {
  color: var(--muted);
  line-height: 1.55;
  margin: 14px 0 2px;
}

.site-footer {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto 40px;
  padding: 28px 4px 12px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  color: #7b8494;
  font-size: 13px;
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a:hover { color: #2c3444; }

.copyright {
  grid-column: 1 / -1;
  font-size: 12px;
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav-links { display: none; }

  .hero,
  .quick-capture-section,
  .philosophy-card,
  .privacy-card,
  .download-card {
    grid-template-columns: 1fr;
  }

  .hero {
    margin-top: 50px;
    gap: 20px;
  }

  .hero-copy { text-align: center; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-meta { justify-content: center; }
  .hero-visual { min-height: 420px; }
  .hero-icon { max-width: 430px; }

  .shortcut-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card-wide { grid-column: auto; }
  .philosophy-card { gap: 25px; }
  .privacy-card { gap: 18px; }
  .download-card { padding: 28px; }
  .download-art { min-height: 320px; }
}

@media (max-width: 620px) {
  .site-header > .button { display: none; }

  .hero h1 { font-size: 50px; }
  .hero { min-height: auto; }
  .hero-visual { min-height: 340px; }
  .hero-icon { width: 330px; }

  .shortcut-actions {
    width: 100%;
    overflow-x: auto;
  }

  .section {
    margin-bottom: 86px;
  }

  .feature-card {
    min-height: 240px;
    padding: 25px;
  }

  .example-row {
    flex-direction: column;
    gap: 6px;
  }

  .capture-buttons {
    grid-template-columns: repeat(2,1fr);
  }

  .capture-footer {
    gap: 12px;
    flex-wrap: wrap;
  }

  .philosophy-card,
  .privacy-card {
    padding: 30px;
  }

  .faq-grid { grid-template-columns: 1fr; }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-links { flex-wrap: wrap; }
}




/* Contextual Quick Capture examples */
.capture-examples {
  display: grid;
  gap: 26px;
}

.capture-example {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 18px 48px rgba(40,48,75,.07);
}

.use-case-copy {
  padding: 8px 4px 8px 8px;
}

.use-case-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: #6d35f2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.use-case-copy h3 {
  margin: 0 0 10px;
  font-size: 23px;
  letter-spacing: -.03em;
}

.use-case-copy p {
  margin: 0;
  color: #667085;
  line-height: 1.58;
  font-size: 14px;
}

.soba-preview {
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(145deg, #262a34, #20232c);
  color: white;
  box-shadow: 0 24px 54px rgba(17,24,39,.24);
  border: 1px solid rgba(255,255,255,.08);
}

.soba-preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 17px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}

.close-mark { color: #d2d7df; }

.soba-preview-input {
  padding: 16px 4px;
  color: #aab1bd;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soba-preview-card {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

.preview-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.preview-symbol {
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}
.preview-symbol.purple { color: #c4a4ff; background: rgba(139,92,246,.16); }
.preview-symbol.blue { color: #6cb9ff; background: rgba(22,140,255,.15); }
.preview-symbol.red { color: #ff8d8d; background: rgba(239,68,68,.14); }
.preview-symbol.green { color: #79e69a; background: rgba(49,189,98,.14); }

.preview-title strong { display: block; font-size: 14px; }
.preview-title small { display: block; margin-top: 3px; color: #9da6b3; font-size: 11px; }

.preview-status {
  font-size: 11px;
  font-weight: 760;
}
.preview-status.valid { color: #61dc84; }
.preview-status.muted { color: #9aa3af; }

.preview-actions {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.preview-actions.four { grid-template-columns: repeat(4, 1fr); }
.preview-actions.three { grid-template-columns: repeat(3, 1fr); }
.preview-actions.two { grid-template-columns: repeat(2, 1fr); }

.preview-actions button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.11);
  color: #f3f5f7;
  background: rgba(255,255,255,.06);
  padding: 10px 8px;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
}

.preview-actions.secondary {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .capture-example {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .capture-example {
    padding: 14px;
  }
  .soba-preview {
    padding: 16px;
    border-radius: 20px;
  }
  .preview-actions.four {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Quick Capture: full-width intro + examples below */
.quick-capture-section {
  display: block;
}

.quick-capture-copy-wide {
  max-width: 900px;
  margin: 0 auto 38px;
  text-align: center;
}

.quick-capture-copy-wide > p {
  max-width: 740px;
  margin: 18px auto 0;
}

.example-list-horizontal {
  margin-top: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.example-list-horizontal .example-row {
  min-width: 0;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
}

.capture-examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.capture-examples-grid .capture-example {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 16px;
}

.capture-examples-grid .use-case-copy {
  min-height: 132px;
}

.capture-examples-grid .soba-preview {
  height: 100%;
}

@media (max-width: 900px) {
  .example-list-horizontal {
    grid-template-columns: 1fr;
  }

  .capture-examples-grid {
    grid-template-columns: 1fr;
  }

  .capture-examples-grid .use-case-copy {
    min-height: auto;
  }
}


/* Timestamp and command Quick Capture examples */
.preview-symbol.amber {
  color: #ffc562;
  background: rgba(245, 158, 11, .15);
}

.preview-symbol.teal {
  color: #69e3d0;
  background: rgba(20, 184, 166, .15);
}

.timestamp-values {
  display: grid;
  gap: 7px;
  margin-top: 15px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
}

.timestamp-values > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px;
  align-items: start;
}

.timestamp-values span {
  color: #8f98a5;
  font-size: 10px;
  font-weight: 700;
}

.timestamp-values strong {
  color: #e7eaf0;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 560;
}

.preview-actions.one {
  grid-template-columns: 1fr;
}

.preview-actions .disabled-action {
  color: #8d95a2;
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}

.preview-actions .disabled-action span {
  color: #6f7783;
  font-size: 10px;
  font-weight: 500;
}

.smart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.smart-card{padding:20px;border-radius:26px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 46px rgba(40,48,75,.08)}
.smart-copy{min-height:180px}.smart-copy h3{margin:0 0 10px;font-size:24px;letter-spacing:-.035em}.smart-copy p{margin:0;color:#667085;line-height:1.58;font-size:14px}
.smart-menu{min-height:470px;padding:16px;border-radius:22px;background:linear-gradient(145deg,#202326,#181a1d);color:#eef1f5;position:relative;overflow:hidden}
.smart-menu-head{display:flex;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.09)}
.smart-menu-item{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;margin-top:14px}.smart-menu-item b,.smart-menu-item small{display:block}.smart-menu-item small{margin-top:3px;color:#858e99;font-size:10px}
.kind{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:9px;font-weight:800}.kind.blue{color:#54adff;background:rgba(22,140,255,.15)}.kind.red{color:#ff8080;background:rgba(239,68,68,.15)}.kind.green{color:#68df88;background:rgba(49,189,98,.15)}
.smart-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:12px}.smart-buttons button,.smart-action-title{border:1px solid rgba(255,255,255,.09);color:#eef1f5;background:rgba(255,255,255,.06);border-radius:9px;padding:8px;font:inherit;font-size:11px}
.smart-action-title{margin-top:7px;text-align:center;font-weight:700}
.smart-popover{width:80%;margin:7px 0 0 auto;padding:8px 0;border-radius:14px;background:rgba(55,59,55,.98);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 38px rgba(0,0,0,.38)}
.smart-popover span{display:block;padding:5px 10px;font-size:11px}
.edge-feature{margin-top:34px;padding:42px;border-radius:34px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.96);box-shadow:var(--shadow);display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.edge-copy h2{font-size:clamp(40px,4vw,58px)}.edge-copy>p{color:#667085;font-size:17px;line-height:1.65}
.edge-steps{margin-top:24px;display:grid;gap:12px}.edge-steps>div{display:grid;grid-template-columns:32px 1fr;column-gap:10px;row-gap:3px}.edge-steps>div>span{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#5f45d8;background:rgba(109,53,242,.09);font-size:12px;font-weight:800}.edge-steps small{color:#7b8494}
.edge-visual{min-height:470px;padding:18px;border-radius:28px;background:linear-gradient(145deg,#16191c,#101214);display:grid;place-items:center}
.edge-pocket{width:92%;padding:16px;border-radius:18px;background:#181b1b;border:1px solid rgba(255,255,255,.12);color:#f3f4f5;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.intent-row{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.1)}.intent-row span{border-right:1px solid rgba(255,255,255,.1)}.intent-row span:last-child{border-right:0}.intent-row b{display:block;font-size:9px}.intent-row small{display:block;margin-top:4px;color:#8e969f;font-size:7px}
.quick-actions-block{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.quick-actions-block>small{color:#8d959f;font-size:7px;font-weight:800}.quick-actions-block div{display:flex;gap:6px;margin-top:7px}.quick-actions-block button{border:0;border-radius:7px;padding:5px 8px;color:#e7e9ec;background:#3b403b;font:inherit;font-size:8px}
.drop-list{padding-top:10px}.drop-head{display:flex;justify-content:space-between;color:#9da5ad;font-size:8px}.drop-head b span{color:#69726d;font-weight:500;margin-left:4px}.drop-row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;padding:8px;border-radius:7px}.drop-row.selected{background:rgba(21,79,139,.45)}.drop-row b,.drop-row small{display:block}.drop-row b{font-size:9px}.drop-row small{font-size:7px;color:#89919b;margin-top:2px}
.mini{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;font-size:7px;font-weight:800}.mini.image{background:linear-gradient(135deg,#1e6ca8,#132b3c);color:#7bc9ff}.mini.pdf{background:rgba(239,68,68,.16);color:#ff7777}.mini.text{background:rgba(255,255,255,.07);color:#bbb;font-size:10px}
@media(max-width:1000px){.smart-grid{grid-template-columns:1fr}.smart-card{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.smart-copy{min-height:auto}.edge-feature{grid-template-columns:1fr}}
@media(max-width:700px){.smart-card{grid-template-columns:1fr}.edge-feature{padding:26px}}

.legal-hero{width:min(980px,calc(100% - 40px));margin:86px auto 34px;text-align:center}.legal-hero h1{margin:0;font-size:clamp(48px,6vw,76px);letter-spacing:-.055em;line-height:1}.legal-hero p{max-width:700px;margin:20px auto 0;color:var(--muted);font-size:18px;line-height:1.6}
.content-page{width:min(980px,calc(100% - 40px));margin:0 auto 110px}.content-card{padding:42px;border-radius:30px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.96);box-shadow:var(--shadow)}.content-card h2{margin:0 0 18px;font-size:34px;letter-spacing:-.035em}.content-card h3{margin:30px 0 10px;font-size:20px}.content-card p,.content-card li{color:#667085;line-height:1.68;font-size:15px}.content-card a{color:#4e46d8;font-weight:700}.content-card code{background:#eef0f6;border-radius:7px;padding:2px 6px;color:#394150}.legal-note{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px!important}
.support-grid{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.support-grid article{padding:20px;border-radius:18px;background:#f7f8fc;border:1px solid #eef0f5}.support-grid article h3{margin-top:0}.support-contact{margin-top:28px;padding:22px;border-radius:18px;background:linear-gradient(135deg,rgba(22,140,255,.07),rgba(109,53,242,.08))}
.release-block{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}.release-block h3{margin-top:0}
@media(max-width:700px){.content-card{padding:26px}.support-grid{grid-template-columns:1fr}}


/* Refined experience features */
.refined-section {
  scroll-margin-top: 110px;
}

.refined-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.refined-card {
  position: relative;
  min-height: 265px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 18px 46px rgba(40,48,75,.08);
  overflow: hidden;
}

.refined-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22,140,255,.10), rgba(109,53,242,.12));
  color: #6046d8;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 22px;
}

.refined-card h3 {
  margin: 0 0 10px;
  font-size: 25px;
  letter-spacing: -.035em;
}

.refined-card p {
  margin: 0;
  max-width: 590px;
  color: #667085;
  line-height: 1.6;
  font-size: 15px;
}

.keyboard-demo {
  position: absolute;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 7px;
}

.keyboard-demo span {
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f2f3f7;
  border: 1px solid #e1e4eb;
  border-bottom-width: 2px;
  color: #424b5c;
  font-size: 12px;
  font-weight: 760;
}

.keyboard-demo .wide-key {
  min-width: 68px;
}

.tour-dots {
  position: absolute;
  right: 26px;
  bottom: 27px;
  display: flex;
  gap: 7px;
}

.tour-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9dce5;
}

.tour-dots .active {
  width: 24px;
  border-radius: 6px;
  background: #6d35f2;
}

.undo-toast,
.focus-pill,
.search-demo,
.sync-line {
  margin-top: 24px;
  border-radius: 14px;
  background: #f5f6fa;
  border: 1px solid #e9ebf1;
}

.undo-toast {
  padding: 12px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #566174;
  font-size: 13px;
}

.undo-toast button {
  border: 0;
  background: transparent;
  color: #5d43d5;
  font: inherit;
  font-weight: 800;
}

.sync-line {
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #596273;
  font-size: 12px;
  font-weight: 730;
}

.sync-line i {
  width: 30px;
  height: 1px;
  background: #cfd4df;
}

.focus-pill {
  display: inline-flex;
  padding: 10px 13px;
  color: #596273;
  font-size: 12px;
  font-weight: 720;
}

.search-demo {
  padding: 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}

.search-demo code {
  color: #343c4c;
  font-size: 13px;
}

.search-demo small {
  grid-column: 2;
  color: #7a8495;
}

@media (max-width: 800px) {
  .refined-grid {
    grid-template-columns: 1fr;
  }
}

.qr-card{padding:44px;border-radius:34px;background:rgba(255,255,255,.80);border:1px solid rgba(255,255,255,.96);box-shadow:var(--shadow);display:grid;grid-template-columns:.95fr 1.05fr;gap:44px;align-items:center}
.qr-copy h2{font-size:clamp(42px,4.3vw,60px)}.qr-copy>p{color:#667085;font-size:17px;line-height:1.68}.qr-flow{margin-top:25px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#596273;font-size:12px;font-weight:740}.qr-flow span{padding:9px 11px;border-radius:11px;background:#f4f5f9;border:1px solid #e7e9ef}.qr-flow i{color:#8b92a0;font-style:normal}.qr-benefits{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;color:#4f5b6e;font-size:13px}
.qr-demo{padding:18px;border-radius:28px;background:linear-gradient(145deg,#171a1f,#111317)}.qr-soba-window{padding:22px;border-radius:22px;color:#eef1f5;background:linear-gradient(145deg,#292d36,#20232b);border:1px solid rgba(255,255,255,.09)}.qr-window-top{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.10)}.qr-input{padding:17px 2px;color:#aab2be;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.qr-actions{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.qr-actions button{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:#eef1f5;padding:10px 8px;border-radius:10px;font:inherit;font-size:12px}.qr-actions .qr-highlight{color:#d9c9ff;border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.14)}
.qr-result{margin-top:18px;padding:16px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:18px}.fake-qr{width:138px;height:138px;padding:10px;border-radius:16px;background:white}.qr-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:2px}.qr-grid span{background:white}.qr-grid .b{background:#111827}.qr-result-copy strong,.qr-result-copy small{display:block}.qr-result-copy small{margin-top:5px;color:#9aa3af;font-size:12px}
@media(max-width:900px){.qr-card{grid-template-columns:1fr}}@media(max-width:620px){.qr-card{padding:28px}.qr-benefits{grid-template-columns:1fr}.qr-actions{grid-template-columns:repeat(2,1fr)}}

.theme-toggle{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6)}
.theme-toggle button{border:0;background:transparent;color:var(--muted);width:34px;height:30px;border-radius:999px;cursor:pointer;font-size:15px}
.theme-toggle button.active{background:var(--card);color:var(--text);box-shadow:0 2px 9px rgba(30,38,60,.1)}
html[data-theme="dark"]{color-scheme:dark;--bg:#101217;--card:#1a1d24;--text:#f2f4f7;--muted:#a5adbb;--line:#2c3039;--shadow:0 22px 65px rgba(0,0,0,.3)}
html[data-theme="dark"] body{background:radial-gradient(circle at 8% 5%,rgba(34,211,238,.08),transparent 28%),radial-gradient(circle at 92% 8%,rgba(109,53,242,.11),transparent 30%),#101217;color:var(--text)}
html[data-theme="dark"] .site-header{background:rgba(16,18,23,.8);border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .theme-toggle button.active{background:#292d36;box-shadow:none}
html[data-theme="dark"] .content-card,html[data-theme="dark"] .refined-card,html[data-theme="dark"] .qr-card{background:rgba(26,29,36,.9);border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .support-grid article,html[data-theme="dark"] .undo-toast,html[data-theme="dark"] .focus-pill,html[data-theme="dark"] .search-demo,html[data-theme="dark"] .sync-line,html[data-theme="dark"] .qr-flow span{background:#20242c;border-color:#303540}
html[data-theme="dark"] .refined-card p,html[data-theme="dark"] .content-card p,html[data-theme="dark"] .content-card li,html[data-theme="dark"] .qr-copy>p{color:#aab2bf}
html[data-theme="dark"] .nav-links a,html[data-theme="dark"] .footer-links a{color:#b5bdca}


/* Dark mode contrast fixes across all public pages */
html[data-theme="dark"] {
  --bg: #0f1116;
  --surface: rgba(24, 27, 34, .92);
  --surface-strong: #1a1d24;
  --text: #f5f7fb;
  --muted: #aeb6c4;
  --line: rgba(255,255,255,.11);
}

/* FAQ / details */
html[data-theme="dark"] .faq-grid details {
  background: #1b1e25 !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .faq-grid summary {
  color: #f5f7fb !important;
}

html[data-theme="dark"] .faq-grid p {
  color: #b4bdca !important;
}

html[data-theme="dark"] .faq-grid code {
  color: #e7eaf0 !important;
  background: #2a2e37 !important;
}

/* Generic card surfaces used throughout the site */
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .philosophy-card,
html[data-theme="dark"] .privacy-card,
html[data-theme="dark"] .download-card,
html[data-theme="dark"] .capture-example,
html[data-theme="dark"] .refined-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .support-grid article,
html[data-theme="dark"] .qr-card {
  background: #191c23 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f5f7fb !important;
}

/* Headings and body copy */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] summary {
  color: #f5f7fb !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .quick-capture-copy > p,
html[data-theme="dark"] .privacy-card p,
html[data-theme="dark"] .download-copy > p,
html[data-theme="dark"] .content-card p,
html[data-theme="dark"] .content-card li,
html[data-theme="dark"] .refined-card p,
html[data-theme="dark"] .qr-copy > p,
html[data-theme="dark"] .use-case-copy p,
html[data-theme="dark"] .context-copy p,
html[data-theme="dark"] .edge-drop-copy > p {
  color: #aeb6c4 !important;
}

/* Small helper text */
html[data-theme="dark"] small,
html[data-theme="dark"] .download-info,
html[data-theme="dark"] .hero-meta,
html[data-theme="dark"] .feature-caption,
html[data-theme="dark"] .legal-note,
html[data-theme="dark"] .release-date {
  color: #97a1b0 !important;
}

/* White/light utility strips */
html[data-theme="dark"] .shortcut-strip,
html[data-theme="dark"] .example-row,
html[data-theme="dark"] .undo-toast,
html[data-theme="dark"] .focus-pill,
html[data-theme="dark"] .search-demo,
html[data-theme="dark"] .sync-line,
html[data-theme="dark"] .qr-flow span,
html[data-theme="dark"] .support-contact {
  background: #20242c !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e8ebf0 !important;
}

/* Inputs / code blocks */
html[data-theme="dark"] code,
html[data-theme="dark"] .content-card code,
html[data-theme="dark"] .download-note code {
  background: #292e38 !important;
  color: #e8ecf2 !important;
}

html[data-theme="dark"] .download-note {
  background: #20242c !important;
  color: #aeb6c4 !important;
}

/* Footer + navigation */
html[data-theme="dark"] .site-footer {
  color: #aeb6c4 !important;
  border-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .nav-links,
html[data-theme="dark"] .nav-links a,
html[data-theme="dark"] .footer-links,
html[data-theme="dark"] .footer-links a {
  color: #c4cad4 !important;
}

html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .footer-links a:hover {
  color: #ffffff !important;
}

/* Light mode: force readable FAQ/card colors too */
html[data-theme="light"] .faq-grid details {
  background: rgba(255,255,255,.82) !important;
  color: #111827 !important;
}

html[data-theme="light"] .faq-grid summary {
  color: #111827 !important;
}

html[data-theme="light"] .faq-grid p {
  color: #667085 !important;
}

html[data-theme="light"] .faq-grid code {
  background: #eceef4 !important;
  color: #3d4656 !important;
}


/* Smart Actions dark mode contrast fix */
html[data-theme="dark"] .smart-card {
  background: #191c23 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f5f7fb !important;
}

html[data-theme="dark"] .smart-copy h3 {
  color: #f5f7fb !important;
}

html[data-theme="dark"] .smart-copy p {
  color: #aeb6c4 !important;
}

html[data-theme="dark"] .smart-copy .use-case-kicker {
  color: #9b7cff !important;
}

html[data-theme="dark"] .edge-feature {
  background: #191c23 !important;
  border-color: rgba(255,255,255,.09) !important;
  color: #f5f7fb !important;
}

html[data-theme="dark"] .edge-copy h2 {
  color: #f5f7fb !important;
}

html[data-theme="dark"] .edge-copy > p,
html[data-theme="dark"] .edge-steps small {
  color: #aeb6c4 !important;
}

html[data-theme="dark"] .edge-copy .eyebrow {
  color: #9b7cff !important;
}

html[data-theme="dark"] .edge-steps b {
  color: #f2f4f7 !important;
}

html[data-theme="dark"] .edge-steps > div > span {
  color: #c7b5ff !important;
  background: rgba(139,92,246,.18) !important;
}

html[data-theme="light"] .smart-card,
html[data-theme="light"] .edge-feature {
  background: rgba(255,255,255,.78) !important;
  color: #111827 !important;
}

html[data-theme="light"] .smart-copy h3,
html[data-theme="light"] .edge-copy h2,
html[data-theme="light"] .edge-steps b {
  color: #111827 !important;
}

html[data-theme="light"] .smart-copy p,
html[data-theme="light"] .edge-copy > p,
html[data-theme="light"] .edge-steps small {
  color: #667085 !important;
}


/* Actual SOBA product screenshots */
.actual-screen-wrap {
  margin-top: 18px;
  padding: 10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(117, 77, 255, .16), transparent 36%),
    linear-gradient(145deg, #22262f, #15181e);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 46px rgba(0,0,0,.20);
  overflow: hidden;
}

.actual-soba-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  filter: saturate(1.03) contrast(1.025);
}

html[data-theme="light"] .actual-screen-wrap {
  background:
    radial-gradient(circle at 18% 0%, rgba(117,77,255,.10), transparent 38%),
    linear-gradient(145deg, #eef0f6, #e2e5ed);
  border-color: rgba(26,31,44,.08);
  box-shadow: 0 18px 42px rgba(34,42,67,.13);
}

html[data-theme="dark"] .actual-screen-wrap {
  background:
    radial-gradient(circle at 18% 0%, rgba(117,77,255,.17), transparent 38%),
    linear-gradient(145deg, #22262f, #13161b);
  border-color: rgba(255,255,255,.09);
}

.capture-example .actual-screen-wrap {
  margin-top: auto;
}


/* ===== Header requested layout ===== */
.site-header{
  min-height:72px;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:28px!important;
  padding:8px 18px!important;
}
.brand-rich{display:flex!important;align-items:center!important;gap:10px!important;min-width:210px}
.brand-rich .brand-icon{width:46px!important;height:46px!important;border-radius:12px!important}
.brand-stack{display:flex;flex-direction:column;line-height:1.05}
.brand-stack strong{font-size:19px;color:var(--text)}
.brand-stack small{margin-top:4px;color:#7c3aed;font-size:11px;font-weight:750}
.nav-links{justify-self:center!important}
.theme-toggle-labeled{justify-self:end;display:flex;gap:2px;padding:3px!important}
.theme-toggle-labeled button{
  width:auto!important;height:34px!important;padding:0 12px!important;
  display:flex;align-items:center;gap:5px;font-size:14px!important
}
.theme-toggle-labeled button.active{
  background:linear-gradient(135deg,#6d35f2,#7c3aed)!important;
  color:#fff!important;box-shadow:0 5px 16px rgba(109,53,242,.28)!important
}
html[data-theme="dark"] .brand-stack strong{color:#f7f8fc}
html[data-theme="dark"] .brand-stack small{color:#a78bfa}

/* ===== Polished reconstructed SOBA UI (not raw screenshots) ===== */
.polished-mockup{
  margin-top:18px;
  padding:18px;
  border-radius:30px;
  background:linear-gradient(145deg,#252a35,#1e222c);
  color:#f5f7fa;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 50px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  overflow:hidden;
}
.pm-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 4px 15px;border-bottom:1px solid rgba(255,255,255,.10)
}
.pm-top strong{font-size:14px;letter-spacing:.01em}
.pm-top span{color:#aab2bf;font-size:12px}
.pm-top em{font-style:normal;margin-right:10px}
.pm-input{
  min-height:54px;display:flex;align-items:center;gap:10px;
  color:#f0f2f5;font-size:12px;border-bottom:1px solid rgba(255,255,255,.10);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.pm-handle{color:#8992a1;font-size:12px}
.pm-card{
  margin-top:13px;padding:14px;border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11)
}
.pm-kind-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center
}
.pm-kind-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:11px;font-weight:850
}
.pm-purple{color:#d385ff}.pm-kind-icon.pm-purple{background:rgba(179,61,255,.18)}
.pm-blue{color:#55b6ff}.pm-kind-icon.pm-blue{background:rgba(33,150,243,.18)}
.pm-red{color:#ff7070}.pm-kind-icon.pm-red{background:rgba(239,68,68,.18)}
.pm-green{color:#4ee07b}.pm-kind-icon.pm-green{background:rgba(49,189,98,.18)}
.pm-orange{color:#ffb13b}.pm-kind-icon.pm-orange{background:rgba(245,158,11,.18)}
.pm-teal{color:#45dcc8}.pm-kind-icon.pm-teal{background:rgba(20,184,166,.18)}
.pm-kind-copy strong,.pm-kind-copy small{display:block}
.pm-kind-copy strong{font-size:12px;color:#f8f9fb}
.pm-kind-copy small{margin-top:2px;color:#9aa3b1;font-size:10px}
.pm-status{font-size:10px;text-align:right}
.pm-details{margin:12px 0 4px;display:grid;gap:4px}
.pm-details div{display:grid;grid-template-columns:58px 1fr;gap:8px}
.pm-details span{color:#8992a0;font-size:9px;font-weight:700}
.pm-details strong{color:#f0f2f5;font-size:9px;line-height:1.35}
.pm-buttons{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:7px;margin-top:12px
}
.pm-buttons-secondary{margin-top:7px}
.pm-buttons button,.pm-disabled{
  min-height:35px;padding:7px 6px;border-radius:9px;
  border:1px solid rgba(255,255,255,.09);
  color:#f2f4f7;background:rgba(255,255,255,.07);
  font:inherit;font-size:10px;font-weight:700
}
.pm-disabled{
  width:100%;margin-top:8px;color:#777f8b;background:rgba(255,255,255,.035)
}
.pm-footer{
  margin-top:14px;padding:11px 4px 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.pm-footer span{color:#a5adba;font-size:10px}
.pm-footer button{
  border:0;border-radius:8px;padding:7px 13px;background:#35d65c;color:#0a2511;
  font:inherit;font-size:10px;font-weight:800
}

/* Light mode keeps the polished app itself dark, just like native SOBA. */
html[data-theme="light"] .capture-example{
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(17,24,39,.08)!important
}
html[data-theme="dark"] .capture-example{
  background:#171a21!important;
  border-color:rgba(255,255,255,.08)!important
}
.capture-examples-grid .capture-example{
  padding:20px!important;border-radius:24px!important
}

/* Responsive navbar */
@media(max-width:1050px){
  .nav-links{gap:16px!important;font-size:12px!important}
  .brand-rich{min-width:175px}
}
@media(max-width:880px){
  .nav-links{display:none!important}
  .site-header{grid-template-columns:auto 1fr!important}
  .theme-toggle-labeled{grid-column:2;grid-row:1}
}
@media(max-width:520px){
  .brand-stack small{display:none}
  .brand-rich{min-width:0}
  .theme-toggle-labeled button{padding:0 9px!important;font-size:12px!important}
}

/* Drag-to-SOBA visual: use supplied marketing image while preserving existing copy */
.edge-visual-image{
  padding:0!important;
  overflow:hidden;
  border-radius:24px;
  background:#090b12!important;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.edge-visual-image img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:24px;
}
html[data-theme="dark"] .edge-visual-image{
  box-shadow:0 22px 55px rgba(0,0,0,.34);
}

/* SOBA 1.3.1 — compact smart clipboard section */
.clipboard-section { scroll-margin-top: 110px; }
.clipboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.clipboard-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  min-height: 150px;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.96);
  box-shadow: 0 16px 38px rgba(40,48,75,.07);
}
.clipboard-card-accent {
  background: linear-gradient(135deg, rgba(22,140,255,.08), rgba(109,53,242,.08)), rgba(255,255,255,.82);
}
.clipboard-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(22,140,255,.11), rgba(109,53,242,.13));
  color: #6046d8;
  font-size: 20px;
  font-weight: 800;
}
.clipboard-card h3 { margin: 1px 0 7px; font-size: 21px; letter-spacing: -.025em; }
.clipboard-card p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.quiet-features {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.quiet-features span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
html[data-theme="dark"] .clipboard-card {
  background: rgba(26,29,36,.9);
  border-color: rgba(255,255,255,.07);
}
html[data-theme="dark"] .clipboard-card-accent {
  background: linear-gradient(135deg, rgba(22,140,255,.08), rgba(109,53,242,.12)), rgba(26,29,36,.92);
}
html[data-theme="dark"] .quiet-features span { background: rgba(255,255,255,.04); }
@media (max-width: 760px) { .clipboard-grid { grid-template-columns: 1fr; } }
\n\n/* SOBA 1.3.1 — collection, workspaces, and source context */\n.evolution-section { scroll-margin-top: 110px; }\n.evolution-shell {\n  display:grid;\n  grid-template-columns:.92fr 1.08fr;\n  gap:42px;\n  align-items:center;\n  padding:42px;\n  border-radius:34px;\n  background:rgba(255,255,255,.78);\n  border:1px solid rgba(255,255,255,.96);\n  box-shadow:var(--shadow);\n}\n.evolution-copy h2 { margin:8px 0 14px; max-width:620px; }\n.evolution-intro { margin:0 0 26px; color:var(--muted); line-height:1.65; max-width:620px; }\n.evolution-points { display:grid; gap:5px; }\n.evolution-points article {\n  display:grid;\n  grid-template-columns:42px 1fr;\n  gap:14px;\n  padding:17px 0;\n  border-top:1px solid var(--line);\n}\n.evolution-points article:first-child { border-top:0; }\n.evolution-points article > span {\n  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;\n  background:linear-gradient(135deg,rgba(22,140,255,.11),rgba(109,53,242,.12));\n  color:#6046d8; font-size:11px; font-weight:800;\n}\n.evolution-points h3 { margin:0 0 5px; font-size:19px; letter-spacing:-.02em; }\n.evolution-points p { margin:0; color:var(--muted); line-height:1.55; font-size:14px; }\n.workspace-showcase {\n  overflow:hidden;\n  border-radius:26px;\n  background:#1d1d1f;\n  border:1px solid rgba(255,255,255,.08);\n  box-shadow:0 24px 55px rgba(0,0,0,.18);\n}\n.workspace-showcase img { display:block; width:100%; height:auto; }\n.workspace-caption { padding:14px 18px 16px; color:rgba(255,255,255,.66); font-size:13px; line-height:1.45; }\n.workspace-caption strong { color:white; }\n.quiet-features-centered { justify-content:center; margin-top:20px; }\nhtml[data-theme="dark"] .evolution-shell { background:rgba(26,29,36,.9); border-color:rgba(255,255,255,.07); }\nhtml[data-theme="dark"] .evolution-points article > span { color:#a89bff; }\n@media(max-width:1000px){ .evolution-shell{grid-template-columns:1fr}.workspace-showcase{max-width:700px} }\n@media(max-width:700px){ .evolution-shell{padding:25px;border-radius:26px;gap:28px}.evolution-points article{grid-template-columns:36px 1fr} }\n
/* 1.3.1 simplified capture story */
.capture-story{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:38px}
.story-shot{background:var(--card-bg,rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.story-shot img{display:block;max-width:100%;height:auto;border-radius:16px;margin:auto}
.story-shot-edge img{max-height:390px;width:auto}
.story-shot-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(280px,1.2fr);align-items:center}
.story-shot-action{max-height:390px;width:auto}
.capture-breadth{text-align:center;opacity:.68;margin:26px auto 0;font-size:.95rem}
@media(max-width:760px){.capture-story{grid-template-columns:1fr}.story-shot-wide{grid-column:auto;display:flex}.story-shot-action,.story-shot-edge img{max-height:none}}

/* SOBA 1.4 — polished Collect / Workspaces / Back to Source showcase */
.evolution-section{
  padding-top:72px;
  padding-bottom:72px;
}
.evolution-showcase-card{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:54px;
  align-items:center;
  padding:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:32px;
  background:
    radial-gradient(circle at 92% 8%, rgba(124,86,255,.10), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  box-shadow:0 20px 70px rgba(0,0,0,.20);
}
.evolution-showcase-copy .eyebrow{
  margin-bottom:18px;
}
.evolution-showcase-copy h2{
  max-width:620px;
  margin:0 0 20px;
  font-size:clamp(2.45rem,4.7vw,4.9rem);
  line-height:.98;
  letter-spacing:-.055em;
}
.evolution-showcase-copy .evolution-intro{
  max-width:620px;
  margin:0 0 30px;
  font-size:1.06rem;
  line-height:1.7;
  color:var(--muted, #aeb4c0);
}
.evolution-steps{
  display:grid;
  gap:18px;
}
.evolution-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  align-items:start;
}
.evolution-step>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(126,87,255,.20);
  border:1px solid rgba(149,112,255,.18);
  font-weight:800;
  color:#c8b7ff;
}
.evolution-step strong{
  display:block;
  margin:1px 0 4px;
  font-size:1.03rem;
}
.evolution-step small{
  display:block;
  color:var(--muted, #aeb4c0);
  font-size:.93rem;
  line-height:1.48;
}
.evolution-showcase-visual{
  min-width:0;
  padding:26px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 15%, rgba(112,79,255,.14), transparent 36%),
    rgba(8,10,17,.62);
  border:1px solid rgba(255,255,255,.055);
}
.workspace-window-frame{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 55px rgba(0,0,0,.35);
}
.workspace-window-frame img{
  display:block;
  width:100%;
  height:auto;
}
.workspace-caption{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-top:17px;
  padding:0 2px;
  font-size:.88rem;
}
.workspace-caption strong{
  color:#f4f5f8;
}
.workspace-caption span{
  color:var(--muted, #949aa7);
}
@media(max-width:900px){
  .evolution-showcase-card{
    grid-template-columns:1fr;
    gap:34px;
    padding:30px;
  }
}
@media(max-width:560px){
  .evolution-showcase-card{
    padding:22px;
    border-radius:24px;
  }
  .evolution-showcase-visual{
    padding:14px;
  }
  .workspace-caption{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
}

/* Permanent Screen Edge showcase */
.screen-edge-feature{padding-top:72px;padding-bottom:72px}
.screen-edge-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center;padding:42px;border:1px solid rgba(255,255,255,.11);border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));box-shadow:0 20px 70px rgba(0,0,0,.20)}
.screen-edge-copy h2{margin:0 0 20px;font-size:clamp(2.6rem,4.8vw,5rem);line-height:.98;letter-spacing:-.055em}
.screen-edge-copy>p{max-width:600px;margin:0 0 30px;color:var(--muted,#aeb4c0);font-size:1.05rem;line-height:1.7}
.screen-edge-copy>p strong{color:#f4f5f8}
.screen-edge-steps{display:grid;gap:15px}
.screen-edge-steps>div{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.screen-edge-steps span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:rgba(126,87,255,.20);border:1px solid rgba(149,112,255,.18);font-weight:800;color:#c8b7ff}
.screen-edge-steps p{margin:0}
.screen-edge-steps strong{display:block;margin:1px 0 3px}
.screen-edge-steps small{display:block;color:var(--muted,#aeb4c0);font-size:.9rem;line-height:1.45}
.screen-edge-visual{padding:20px;border-radius:26px;background:rgba(8,10,17,.65);border:1px solid rgba(255,255,255,.055)}
.screen-edge-visual img{display:block;width:100%;height:auto;border-radius:18px}
@media(max-width:900px){.screen-edge-card{grid-template-columns:1fr;gap:32px;padding:30px}}
@media(max-width:560px){.screen-edge-card{padding:22px;border-radius:24px}.screen-edge-visual{padding:10px}}

/* 1.4 spacing refinement */
.capture-story{
  gap:32px !important;
  row-gap:34px !important;
}
.story-shot{
  padding:28px !important;
}
.capture-breadth{
  margin-top:22px !important;
}

/* Keep the rest of the homepage visually connected after the capture story */
.screen-edge-feature{
  padding-top:44px !important;
  padding-bottom:44px !important;
}
.evolution-section{
  padding-top:44px !important;
  padding-bottom:44px !important;
}
.download-section + .quick-capture-section,
.quick-capture-section{
  padding-bottom:48px !important;
}
.mini-faq{
  padding-top:44px !important;
}
@media(max-width:760px){
  .capture-story{gap:22px !important;row-gap:22px !important}
  .screen-edge-feature,.evolution-section{padding-top:32px !important;padding-bottom:32px !important}
}

/* SOBA 1.4 uniform polished showcase */
.screen-edge-feature{
  padding:34px 0 20px !important;
}
.screen-edge-card{
  display:grid !important;
  grid-template-columns:minmax(360px,.86fr) minmax(520px,1.14fr) !important;
  gap:52px !important;
  align-items:center !important;
  padding:42px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:34px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018)) !important;
  box-shadow:0 20px 70px rgba(0,0,0,.20) !important;
}
.screen-edge-copy h2{
  margin:0 0 20px !important;
  font-size:clamp(3rem,5vw,5.25rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
}
.screen-edge-copy>p{
  margin:0 0 28px !important;
  color:var(--muted,#aeb4c0) !important;
  font-size:1.06rem !important;
  line-height:1.68 !important;
}
.screen-edge-copy>p strong{color:#f4f5f8 !important}

.flow-showcase{
  display:grid !important;
  gap:26px !important;
  padding-top:18px !important;
  padding-bottom:38px !important;
}
.flow-panel{
  min-height:300px !important;
  display:grid !important;
  grid-template-columns:minmax(300px,.88fr) minmax(520px,1.12fr) !important;
  gap:48px !important;
  align-items:center !important;
  padding:34px 40px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 86% 8%,rgba(126,87,255,.055),transparent 30%),
    rgba(255,255,255,.022) !important;
}
.flow-copy{max-width:560px !important}
.flow-copy .eyebrow{margin-bottom:12px !important}
.flow-copy h3{
  margin:0 0 10px !important;
  font-size:clamp(1.7rem,2.5vw,2.4rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}
.flow-copy p{
  margin:0 !important;
  color:var(--muted,#aeb4c0) !important;
  line-height:1.62 !important;
  font-size:1rem !important;
}

/* Every showcase visual uses exactly the same frame size. */
.feature-image-frame{
  width:100% !important;
  height:360px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
  overflow:hidden !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 50% 18%,rgba(112,79,255,.11),transparent 36%),
    rgba(8,10,17,.68) !important;
  border:1px solid rgba(255,255,255,.06) !important;
}
.feature-image-frame img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:14px !important;
}

/* Back-to-Source demo gets the same outer dimensions. */
.source-demo{padding:34px !important}
.source-card{
  width:100% !important;
  max-width:560px !important;
  padding:24px !important;
  border-radius:18px !important;
  background:#1e2128 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.28) !important;
}
.source-file{display:flex !important;align-items:center !important;gap:12px !important}
.source-file>span{font-size:1.6rem !important}
.source-file strong,.source-file small{display:block !important}
.source-file small,.source-card>small{color:#9ca3af !important}
.source-divider{height:1px !important;background:rgba(255,255,255,.09) !important;margin:18px 0 !important}
.source-card code{display:block !important;margin:6px 0 18px !important;color:#c4c9d2 !important;font-size:.9rem !important}
.source-card button{border:1px solid rgba(255,255,255,.08) !important;background:#30343c !important;color:#fff !important;border-radius:8px !important;padding:9px 13px !important}

@media(max-width:980px){
  .screen-edge-card,.flow-panel{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .feature-image-frame{height:330px !important}
}
@media(max-width:620px){
  .screen-edge-card,.flow-panel{padding:22px !important;border-radius:24px !important}
  .feature-image-frame{height:270px !important;padding:14px !important}
}

/* FINAL 1.4 layout correction */

/* Screen Edge is the hero feature: much larger visual, matching reference proportions. */
.screen-edge-feature{
  padding:28px 0 24px !important;
}
.screen-edge-card{
  display:grid !important;
  grid-template-columns:minmax(390px,.82fr) minmax(650px,1.18fr) !important;
  gap:54px !important;
  align-items:center !important;
  padding:42px 42px 42px 46px !important;
  border-radius:32px !important;
  min-height:540px !important;
}
.screen-edge-copy h2{
  font-size:clamp(3.2rem,5.15vw,5.45rem) !important;
  line-height:.97 !important;
  max-width:560px !important;
}
.screen-edge-copy>p{
  max-width:590px !important;
  font-size:1.04rem !important;
  line-height:1.68 !important;
}
.screen-edge-hero-visual{
  width:100% !important;
  min-width:0 !important;
  height:470px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
  border-radius:26px !important;
  background:#090b12 !important;
  border:1px solid rgba(255,255,255,.055) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.30) !important;
}
.screen-edge-hero-visual img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:26px !important;
}

/* The feature panels below should feel like one compact family. */
.flow-showcase{
  gap:18px !important;
  padding-top:12px !important;
  padding-bottom:28px !important;
}
.flow-panel{
  min-height:270px !important;
  grid-template-columns:minmax(300px,.86fr) minmax(520px,1.14fr) !important;
  gap:38px !important;
  padding:28px 34px !important;
  border-radius:26px !important;
}

/* Keep every normal feature screenshot exactly the same size. */
.flow-panel .feature-image-frame{
  width:100% !important;
  height:300px !important;
  padding:18px !important;
  border-radius:22px !important;
}
.flow-panel .feature-image-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* Reduce vertical whitespace between the remaining major sections. */
.flow-showcase + .mini-faq{
  margin-top:0 !important;
}
.mini-faq{
  padding-top:30px !important;
}
@media(max-width:1100px){
  .screen-edge-card{
    grid-template-columns:1fr !important;
  }
  .screen-edge-hero-visual{
    height:430px !important;
  }
}
@media(max-width:700px){
  .screen-edge-card{
    min-height:0 !important;
    padding:24px !important;
  }
  .screen-edge-hero-visual{
    height:300px !important;
  }
  .flow-panel{
    grid-template-columns:1fr !important;
  }
  .flow-panel .feature-image-frame{
    height:270px !important;
  }
}

/* SOBA 1.4 — constructed product visuals, no raw app screenshots */
.screen-edge-feature{padding:30px 0 18px!important}
.flow-showcase{display:grid!important;gap:20px!important;padding:10px 0 34px!important}

.showcase-panel{
  display:grid!important;
  grid-template-columns:minmax(300px,.84fr) minmax(520px,1.16fr)!important;
  gap:44px!important;
  align-items:center!important;
  padding:34px 38px!important;
  min-height:320px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 88% 10%,rgba(123,82,255,.07),transparent 31%),
    rgba(255,255,255,.022)!important;
}
.showcase-panel-hero{
  grid-template-columns:minmax(390px,.82fr) minmax(650px,1.18fr)!important;
  padding:44px!important;
  min-height:560px!important;
}
.showcase-copy{max-width:590px!important}
.showcase-copy h2{
  margin:0 0 20px!important;
  font-size:clamp(3.1rem,5.2vw,5.4rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
.showcase-copy h3{
  margin:0 0 12px!important;
  font-size:clamp(1.9rem,2.8vw,2.7rem)!important;
  line-height:1.05!important;
  letter-spacing:-.04em!important;
}
.showcase-copy>p{
  margin:0!important;
  color:var(--muted,#aeb4c0)!important;
  font-size:1.02rem!important;
  line-height:1.68!important;
}
.showcase-copy>p strong{color:#f3f4f8!important}

.showcase-steps{display:grid!important;gap:16px!important;margin-top:28px!important}
.showcase-steps>div{display:grid!important;grid-template-columns:32px 1fr!important;gap:13px!important}
.showcase-steps>div>span{
  width:29px!important;height:29px!important;display:grid!important;place-items:center!important;
  border-radius:9px!important;background:rgba(126,87,255,.19)!important;color:#c9b9ff!important;
  border:1px solid rgba(153,120,255,.18)!important;font-weight:800!important
}
.showcase-steps p{margin:0!important}
.showcase-steps strong,.showcase-steps small{display:block!important}
.showcase-steps small{color:#9ca3af!important;margin-top:3px!important}

.visual-frame{
  width:100%!important;
  height:330px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
  border-radius:25px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 8%,rgba(116,76,255,.12),transparent 38%),
    #090b12!important;
  border:1px solid rgba(255,255,255,.055)!important;
}
.showcase-panel-hero .visual-frame{height:465px!important;padding:20px!important}

/* Screen-edge constructed visual */
.edge-desktop-mock{
  position:relative!important;
  width:100%!important;height:100%!important;
  display:grid!important;
  grid-template-columns:1fr 42px 180px!important;
  align-items:center!important;
  gap:14px!important;
  padding:18px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#171a22,#0d0f15)!important;
}
.finder-mock{
  position:relative!important;height:330px!important;overflow:hidden!important;border-radius:15px!important;
  background:#f5f6f8!important;box-shadow:0 20px 45px rgba(0,0,0,.36)!important;
}
.finder-titlebar{
  height:38px!important;display:flex!important;align-items:center!important;gap:7px!important;padding:0 12px!important;
  color:#474c55!important;background:#e8e9ed!important;font-size:12px!important
}
.traffic{width:9px!important;height:9px!important;border-radius:50%!important;display:inline-block!important}
.traffic.red{background:#ff6058!important}.traffic.yellow{background:#ffbd2e!important}.traffic.green{background:#28c940!important}
.finder-titlebar strong{margin-left:8px!important}
.finder-sidebar{
  position:absolute!important;left:0!important;top:38px!important;bottom:0!important;width:95px!important;
  display:flex!important;flex-direction:column!important;gap:8px!important;padding:14px 10px!important;
  background:#e9ebef!important;color:#626873!important;font-size:10px!important
}
.finder-sidebar span{padding:5px 6px!important;border-radius:5px!important}
.finder-sidebar .active{background:#d9dce3!important;color:#2f3339!important}
.finder-files{
  margin-left:95px!important;height:292px!important;display:flex!important;gap:18px!important;align-items:flex-start!important;padding:34px 28px!important
}
.finder-file{display:flex!important;flex-direction:column!important;align-items:center!important;gap:7px!important;color:#474c55!important;font-size:10px!important}
.file-icon{
  width:42px!important;height:52px!important;display:grid!important;place-items:center!important;border-radius:7px!important;
  color:#fff!important;background:#7586a8!important;font-size:12px!important;font-weight:800!important
}
.file-icon.pdf{background:#ef5350!important}.file-icon.folder{background:#6677ff!important}
.drag-ghost{
  position:absolute!important;right:7px!important;top:145px!important;display:flex!important;align-items:center!important;gap:8px!important;
  padding:7px 10px!important;border-radius:9px!important;background:rgba(255,255,255,.93)!important;
  box-shadow:0 11px 25px rgba(0,0,0,.22)!important;color:#3c4149!important;font-size:10px!important
}
.drag-ghost .file-icon{width:28px!important;height:34px!important;font-size:8px!important}
.edge-arrow{font-size:32px!important;color:#8f70ff!important;text-shadow:0 0 18px rgba(142,103,255,.6)!important}
.edge-soba{
  height:310px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:12px!important;
  padding:15px!important;border-radius:17px!important;background:#171a21!important;
  box-shadow:0 20px 45px rgba(0,0,0,.38)!important;border:1px solid rgba(255,255,255,.08)!important
}
.edge-soba-brand{font-weight:900!important;letter-spacing:.06em!important;font-size:12px!important}
.edge-drop-zone{
  flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border:1px dashed rgba(155,126,255,.42)!important;border-radius:13px!important;background:rgba(127,87,255,.08)!important
}
.edge-file{width:39px!important;height:48px!important;display:grid!important;place-items:center!important;border-radius:7px!important;background:#ef5350!important;font-size:10px!important;font-weight:800!important}
.edge-drop-zone strong{font-size:12px!important}.edge-drop-zone small{color:#9ba1ad!important;font-size:9px!important}
.edge-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.edge-actions button,.action-buttons button,.source-actions button,.workspace-head button,.quick-footer button{
  border:1px solid rgba(255,255,255,.09)!important;background:#292d36!important;color:#f4f5f8!important;border-radius:8px!important;padding:7px 9px!important
}
.edge-hint{
  position:absolute!important;right:6px!important;top:12px!important;font-size:8px!important;letter-spacing:.12em!important;color:#b7a8ff!important;
  writing-mode:vertical-rl!important
}

/* Quick Capture */
.quick-mock{
  width:82%!important;min-height:210px!important;padding:17px!important;border-radius:19px!important;background:#1b1e25!important;
  border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 48px rgba(0,0,0,.36)!important
}
.quick-brand{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:16px!important}
.mini-soba{width:25px!important;height:25px!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:linear-gradient(145deg,#7a5cff,#b148ff)!important;font-weight:900!important}
.quick-field{
  height:55px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:0 14px!important;border-radius:12px!important;
  background:#232730!important;border:1px solid rgba(255,255,255,.08)!important;color:#c5cad2!important
}
.plus{font-size:22px!important;color:#9080ff!important}
.quick-hint{text-align:center!important;color:#858c99!important;font-size:11px!important;padding:21px 0!important}
.quick-footer{display:flex!important;justify-content:space-between!important;align-items:center!important;color:#8f96a3!important;font-size:11px!important}

/* Context action */
.action-mock{
  width:82%!important;border-radius:18px!important;background:#1c1f26!important;border:1px solid rgba(255,255,255,.10)!important;
  overflow:hidden!important;box-shadow:0 22px 48px rgba(0,0,0,.36)!important
}
.action-top,.action-footer{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:12px 14px!important;font-size:11px!important}
.action-top span,.action-footer span{color:#8f96a3!important}
.action-input{margin:0 12px 10px!important;padding:10px 11px!important;border-radius:10px!important;background:#252932!important;font-size:11px!important}
.action-input span{margin-right:8px!important;color:#8f96a3!important}
.action-card{margin:0 12px 10px!important;padding:13px!important;border-radius:13px!important;background:#23272f!important}
.action-kind{display:grid!important;grid-template-columns:42px 1fr auto!important;gap:10px!important;align-items:center!important;margin-bottom:12px!important}
.kind-badge{width:38px!important;height:44px!important;display:grid!important;place-items:center!important;border-radius:7px!important;font-weight:800!important;font-size:10px!important}
.kind-badge.pdf{background:#e65056!important;color:#fff!important}
.action-kind strong,.action-kind small{display:block!important}.action-kind small{color:#9198a4!important;font-size:9px!important;margin-top:3px!important}
.action-kind>b{font-size:10px!important;color:#a6f0b1!important}
.action-buttons{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;margin-top:7px!important}
.action-buttons.secondary{grid-template-columns:1fr 90px!important}.workspace-btn{border-color:rgba(143,112,255,.28)!important}
.action-footer button{background:#7562e9!important}

/* Workspaces */
.workspace-mock{
  width:92%!important;height:250px!important;display:grid!important;grid-template-columns:128px 1fr!important;overflow:hidden!important;
  border-radius:18px!important;background:#171a21!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 48px rgba(0,0,0,.36)!important
}
.workspace-sidebar{padding:14px 11px!important;background:#111319!important;border-right:1px solid rgba(255,255,255,.07)!important}
.workspace-brand{display:flex!important;align-items:center!important;gap:7px!important;margin-bottom:17px!important;font-size:11px!important}
.workspace-nav{padding:7px 8px!important;border-radius:7px!important;color:#959ca8!important;font-size:10px!important;margin-bottom:5px!important}
.workspace-nav.active{background:#242832!important;color:#f3f4f8!important}
.workspace-main{padding:15px!important}
.workspace-head{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:14px!important}
.workspace-head strong,.workspace-head small{display:block!important}.workspace-head small{color:#8f96a3!important;font-size:9px!important;margin-top:2px!important}
.workspace-head button{font-size:9px!important;background:#6e5bd7!important}
.workspace-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px!important}
.workspace-card{padding:12px!important;border-radius:12px!important;background:#22262e!important;border:1px solid rgba(255,255,255,.07)!important}
.workspace-folder{font-size:21px!important;color:#7b69e9!important}.workspace-card strong,.workspace-card small{display:block!important}
.workspace-card strong{font-size:10px!important;margin:7px 0 3px!important}.workspace-card small{font-size:8px!important;color:#8f96a3!important}
.workspace-tags{display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin-top:10px!important}
.workspace-tags span{padding:3px 5px!important;border-radius:5px!important;background:#2d313b!important;font-size:7px!important;color:#b7bdc8!important}

/* Back to Source */
.source-mock{
  width:78%!important;padding:20px!important;border-radius:17px!important;background:#1c1f26!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.36)!important
}
.source-item{display:flex!important;align-items:center!important;gap:11px!important}.source-item strong,.source-item small{display:block!important}
.source-item small{color:#9097a3!important;font-size:9px!important;margin-top:3px!important}
.source-rule{height:1px!important;background:rgba(255,255,255,.08)!important;margin:17px 0!important}
.source-label{font-size:9px!important;color:#8f96a3!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.source-path{margin:7px 0 16px!important;padding:9px 10px!important;border-radius:8px!important;background:#242830!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:9px!important;color:#c7ccd5!important}
.source-actions{display:flex!important;gap:8px!important}.source-actions button:first-child{background:#6f5ee0!important}

/* Equal size for all non-hero visuals */
.flow-showcase .visual-frame{height:330px!important}

@media(max-width:1050px){
  .showcase-panel,.showcase-panel-hero{grid-template-columns:1fr!important}
  .showcase-panel-hero .visual-frame{height:420px!important}
}
@media(max-width:650px){
  .showcase-panel,.showcase-panel-hero{padding:22px!important;border-radius:24px!important}
  .visual-frame,.flow-showcase .visual-frame{height:280px!important;padding:12px!important}
  .showcase-panel-hero .visual-frame{height:320px!important}
  .edge-desktop-mock{grid-template-columns:1fr 26px 120px!important}
  .finder-mock{height:240px!important}.finder-sidebar{width:74px!important}.finder-files{margin-left:74px!important}
  .edge-soba{height:225px!important}.workspace-mock{width:100%!important;grid-template-columns:90px 1fr!important}
}

/* 1.4 refreshed constructed UI based on current SOBA screens */
.quick-mock-v2{width:82%!important;min-height:220px!important;padding:18px!important;border-radius:18px!important;background:#1f2228!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:0 20px 45px rgba(0,0,0,.34)!important}
.quick-v2-top{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:18px!important;color:#9ca3af!important}
.quick-v2-field{padding:14px 16px!important;border-radius:10px!important;background:#292d34!important;border:1px solid #7c3aed!important;box-shadow:inset 0 0 0 1px rgba(124,58,237,.28)!important;color:#9fa5b0!important;font-size:13px!important}
.quick-v2-tools{display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;padding:14px 0!important;color:#b0b5bf!important;font-size:10px!important}
.quick-v2-tools i{width:1px!important;height:12px!important;background:rgba(255,255,255,.10)!important}
.quick-v2-hint{width:max-content!important;max-width:92%!important;margin:5px auto 0!important;padding:8px 14px!important;border-radius:999px!important;background:#2b2f36!important;color:#969ca7!important;font-size:10px!important}

.workspace-window-v2{width:96%!important;height:270px!important;border-radius:16px!important;overflow:hidden!important;background:#1c1f24!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 48px rgba(0,0,0,.35)!important}
.workspace-v2-top{height:50px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 14px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;background:#202329!important}
.workspace-v2-brand{display:flex!important;align-items:center!important;gap:5px!important}.workspace-v2-brand strong{margin-left:9px!important}
.workspace-v2-brand .dot{width:8px!important;height:8px!important;border-radius:50%!important;display:inline-block!important}
.workspace-v2-brand .red{background:#ff5f57!important}.workspace-v2-brand .yellow{background:#febc2e!important}.workspace-v2-brand .green{background:#28c840!important}
.workspace-search{width:245px!important;padding:8px 14px!important;border-radius:18px!important;background:#3a3c3f!important;color:#aeb4bd!important;font-size:10px!important}
.workspace-tabs{height:45px!important;display:flex!important;align-items:center!important;gap:13px!important;padding:0 14px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;color:#8f96a2!important;font-size:9px!important;white-space:nowrap!important}
.workspace-tabs .active{padding:8px 11px!important;border-radius:8px!important;background:#2e3150!important;color:#fff!important}
.workspace-collecting{padding:12px 14px!important}.collecting-head{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:10px!important;font-size:10px!important}
.collecting-head>div{display:flex!important;align-items:center!important;gap:8px!important}.collecting-head small{color:#9aa1ac!important}.collecting-head button{padding:6px 11px!important;border:0!important;border-radius:6px!important;background:#35393f!important;color:#fff!important;font-size:9px!important}
.green-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:#29e547!important}
.collecting-table-head{padding:7px 10px!important;background:#262a2f!important;color:#9ba2ad!important;font-size:9px!important;font-weight:700!important}
.collecting-row{display:grid!important;grid-template-columns:28px 1fr 52px!important;gap:8px!important;align-items:center!important;padding:7px 10px!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
.collecting-row strong,.collecting-row small{display:block!important}.collecting-row strong{font-size:9px!important}.collecting-row small{font-size:8px!important;color:#9198a3!important}.collecting-row time{font-size:8px!important;color:#8f96a2!important;text-align:right!important}
.doc-icon{width:22px!important;height:27px!important;display:grid!important;place-items:center!important;border-radius:4px!important;background:#e95159!important;color:#fff!important;font-size:7px!important;font-weight:800!important}.doc-icon.neutral{background:#6f7682!important}.doc-icon.dark{background:#30343a!important}

.smart-pair{width:94%!important;display:grid!important;grid-template-columns:1.25fr .75fr!important;gap:16px!important;align-items:center!important}
.smart-item-window{border-radius:16px!important;background:#1c1f24!important;border:1px solid rgba(255,255,255,.10)!important;overflow:hidden!important;box-shadow:0 18px 42px rgba(0,0,0,.30)!important}
.kind-badge.tracking{background:#5b4637!important;color:#d9b28b!important}
.carrier-picker{padding:18px!important;border-radius:20px!important;background:#1f1f1f!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 18px 42px rgba(0,0,0,.32)!important}
.carrier-icon{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:11px!important;background:linear-gradient(145deg,#6a5cff,#bd51ff)!important;font-weight:900!important;margin-bottom:14px!important}
.carrier-picker strong{display:block!important;font-size:14px!important}.carrier-picker p{margin:8px 0 13px!important;color:#c3c6cc!important;font-size:10px!important;line-height:1.4!important}
.carrier-picker button{width:100%!important;margin-top:7px!important;padding:8px!important;border:0!important;border-radius:10px!important;background:#343434!important;color:#fff!important}.carrier-picker button.primary{background:#1486ff!important}

.action-three{width:96%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.mini-action-card{min-height:190px!important;padding:14px!important;border-radius:15px!important;background:#1d2025!important;border:1px solid rgba(255,255,255,.09)!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important}
.mini-action-head{display:grid!important;grid-template-columns:40px 1fr!important;gap:10px!important;align-items:center!important}
.mini-action-head strong,.mini-action-head small{display:block!important}.mini-action-head strong{font-size:9px!important}.mini-action-head small{font-size:8px!important;color:#9299a4!important;margin-top:3px!important}
.kind-badge.location{background:#214d34!important;color:#42df7c!important}.kind-badge.phone{background:#214c34!important;color:#42df7c!important}.kind-badge.json{background:#4f2058!important;color:#e05bf2!important}
.mini-action-menu{display:grid!important;gap:6px!important;margin-top:18px!important}.mini-action-menu span{padding:7px 9px!important;border-radius:7px!important;background:#35313e!important;color:#f1f2f4!important;font-size:9px!important}
.mini-action-card:first-child .mini-action-menu span:first-child,.mini-action-card:nth-child(2) .mini-action-menu span:last-child,.mini-action-card:nth-child(3) .mini-action-menu span:first-child{background:#6332b6!important}

@media(max-width:900px){.smart-pair,.action-three{grid-template-columns:1fr!important}.workspace-window-v2{width:100%!important}}

/* Exact blocks copied from index(3).html — minimal supporting styles */
.second-edge-showcase {
  padding-top: 18px !important;
  padding-bottom: 22px !important;
}
.second-edge-showcase .edge-feature {
  margin-top: 0 !important;
}

.edge-visual-css .drop-panel{
  width:100%;
  max-width:520px;
  margin:auto;
  background:#1d1f22;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.drop-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drop-action{
  text-align:center;
  padding:14px 8px 12px;
  border-right:1px solid rgba(255,255,255,.07);
}
.drop-action:last-child{border-right:0}
.drop-action .da-icon{
  width:26px;height:26px;display:grid;place-items:center;margin:0 auto 6px;
  border-radius:7px;font-size:12px;font-weight:800;
}
.da-drop{background:#17354a;color:#3eaef2}
.da-later{background:#45214f;color:#d960ea}
.da-pin{background:#4c3421;color:#d79d46}
.da-share{background:#1f4930;color:#4bd67a}
.drop-action strong,.drop-action small{display:block}
.drop-action strong{font-size:10px;color:#c8cbd1}
.drop-action small{font-size:8px;color:#757b84;margin-top:3px}

.drop-zone-label{
  text-align:center;
  font-size:10px;
  font-weight:700;
  color:#b7bbc3;
  padding-top:14px;
}
.drop-zone-hint{
  text-align:center;
  font-size:8px;
  color:#666d76;
  padding:5px 0 12px;
}
.drop-target{
  min-height:275px;
  margin:0 8px 8px;
  border:2px dashed #29d64c;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.drop-file{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
}
.drop-file-name{
  background:#1677ff;
  color:#fff;
  padding:1px 4px;
  border-radius:2px;
}
.drop-collect{text-align:center}
.drop-collect-icon{display:block;font-size:22px;margin-bottom:8px}
.drop-collect strong,.drop-collect small{display:block}
.drop-collect strong{font-size:12px}
.drop-collect small{font-size:9px;color:#858b93;margin-top:3px}

.workspace-demo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:32px;
}
.ws-panel{
  background:#1d1f22;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.20);
}
.ws-tabs{
  display:flex;
  gap:14px;
  align-items:center;
  padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:9px;
  color:#8d939c;
}
.ws-tab-active{
  padding:8px 10px;
  background:#303354;
  color:#fff;
  border-radius:8px;
}
.ws-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px 12px;
}
.ws-new{
  background:#1486ff;
  color:#fff;
  border:0;
  border-radius:7px;
  padding:7px 12px;
}
.ws-list{padding:0 20px 18px}
.ws-item{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:10px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ws-item:last-child{border-bottom:0}
.ws-item b,.ws-item small{display:block}
.ws-item small{color:#8d939c;font-size:9px;margin-top:3px}
.ws-dot{width:8px;height:8px;border-radius:50%;display:block}
.ws-dot-green{background:#2bea49}
.ws-dot-blue{background:#1fa7ee}
.ws-btn{
  border:0;
  border-radius:6px;
  background:#34383e;
  color:#fff;
  padding:6px 11px;
}
.ws-btn-ghost{background:#2e3237}

.ws-panel-collect{padding:0}
.ws-collect-bar{
  display:grid;
  grid-template-columns:10px 1fr auto auto;
  gap:10px;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ws-count{font-size:9px;color:#8d939c}
.ws-recent-label{
  margin:12px 18px 0;
  padding:8px 10px;
  background:#26292e;
  color:#9da3ad;
  font-size:9px;
  font-weight:700;
}
.ws-recent{padding:0 18px 16px}
.ws-recent-item{
  padding:9px 8px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:10px;
}
.ws-recent-item small{
  display:block;
  margin-left:24px;
  margin-top:2px;
  color:#8d939c;
  font-size:8px;
}

@media(max-width:900px){
  .workspace-demo{grid-template-columns:1fr}
  .ws-tabs{overflow-x:auto}
}

/* SOBA 1.4 — one Screen Edge feature, two clear behaviors */
.drag-modes-section{padding:34px 0 24px!important}
.drag-modes-shell{
  padding:42px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:32px!important;
  background:radial-gradient(circle at 86% 0,rgba(126,87,255,.07),transparent 28%),rgba(255,255,255,.022)!important
}
.drag-modes-heading{max-width:820px!important;margin-bottom:30px!important}
.drag-modes-heading h2{font-size:clamp(2.9rem,5vw,5rem)!important;line-height:.98!important;letter-spacing:-.055em!important;margin:0 0 17px!important}
.drag-modes-heading p{max-width:720px!important;color:#aeb4c0!important;font-size:1.05rem!important;line-height:1.65!important;margin:0!important}
.drag-mode-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important}
.drag-mode-card{overflow:hidden!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;background:#14171d!important}
.drag-mode-copy{padding:25px 27px 20px!important}
.drag-mode-label{display:inline-flex!important;padding:6px 9px!important;border-radius:999px!important;background:#292d35!important;color:#aeb1bc!important;font-size:.69rem!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.09em!important}
.workspace-label{background:rgba(37,220,75,.10)!important;color:#65e77f!important}
.drag-mode-copy h3{font-size:1.85rem!important;letter-spacing:-.035em!important;margin:12px 0 7px!important}
.drag-mode-copy p{min-height:50px!important;margin:0!important;color:#aeb4c0!important;line-height:1.55!important;font-size:.92rem!important}
.drag-mode-status{margin-top:15px!important;color:#dfe2e8!important;font-size:.82rem!important;font-weight:700!important}
.drag-mode-status i{display:inline-block!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#2bea49!important;margin-right:7px!important}
.drag-mode-options{margin-top:15px!important;color:#9f91ff!important;font-size:.82rem!important;font-weight:800!important}
.drag-mode-visual{height:390px!important;padding:18px!important;background:#090b11!important;border-top:1px solid rgba(255,255,255,.06)!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* Workspace collecting visual */
.soba-edge-panel{width:100%!important;max-width:480px!important;height:350px!important;border-radius:15px!important;overflow:hidden!important;background:#1c1e20!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 18px 45px rgba(0,0,0,.36)!important}
.edge-actions-row{height:75px!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.edge-actions-row span{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border-right:1px solid rgba(255,255,255,.07)!important}
.edge-actions-row span:last-child{border-right:0!important}.edge-actions-row b{font-size:14px!important;color:#49b5f3!important}.edge-actions-row span:nth-child(2) b{color:#d95be8!important}.edge-actions-row span:nth-child(3) b{color:#d29a4b!important}.edge-actions-row span:nth-child(4) b{color:#4bdd77!important}
.edge-actions-row strong{font-size:9px!important;margin-top:4px!important}.edge-actions-row small{font-size:7px!important;color:#747b84!important;margin-top:2px!important}
.edge-quick{text-align:center!important;padding:11px 0 9px!important;font-size:9px!important;font-weight:800!important}.edge-quick small{display:block!important;margin-top:4px!important;font-size:7px!important;font-weight:400!important;color:#686f78!important}
.edge-collect-zone{height:237px!important;margin:0 8px 8px!important;border:2px dashed #29df4f!important;border-radius:7px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
.edge-file-name{font-size:9px!important;margin-bottom:28px!important}.edge-file-name mark{background:#177bff!important;color:#fff!important;padding:1px 3px!important}
.edge-drop-icon{font-size:24px!important;margin-bottom:9px!important}.edge-collect-zone strong{font-size:12px!important}.edge-collect-zone small{font-size:8px!important;color:#8d939b!important;margin-top:3px!important}

/* Normal edge visual */
.normal-scene{position:relative!important;width:100%!important;max-width:480px!important;height:350px!important;overflow:hidden!important;border-radius:16px!important;background:radial-gradient(circle at 52% 42%,#18142b 0,#0b0d15 52%,#080a10 100%)!important}
.normal-title{position:absolute!important;top:28px!important;left:0!important;right:0!important;text-align:center!important;z-index:3!important}
.normal-title strong,.normal-title b,.normal-title small{display:block!important}.normal-title strong{font-size:20px!important}.normal-title b{font-size:22px!important;color:#a969ff!important}.normal-title small{font-size:8px!important;color:#bec2ca!important;margin-top:7px!important}
.finder-mini{position:absolute!important;left:40px!important;bottom:31px!important;width:285px!important;height:190px!important;border-radius:10px!important;overflow:hidden!important;background:#171a1e!important;border:1px solid rgba(255,255,255,.12)!important}
.finder-mini-top{height:30px!important;display:flex!important;align-items:center!important;gap:5px!important;padding:0 9px!important;background:#25282c!important;font-size:8px!important}.finder-mini-top i{width:7px!important;height:7px!important;border-radius:50%!important;background:#ff5f57!important}.finder-mini-top i:nth-child(2){background:#febc2e!important}.finder-mini-top i:nth-child(3){background:#28c840!important}.finder-mini-top span{margin-left:48px!important}
.finder-mini-body{display:grid!important;grid-template-columns:82px 1fr!important;height:160px!important}.finder-mini-side{padding:12px 10px!important;background:#202328!important;color:#8e959e!important;font-size:7px!important;line-height:2.05!important}.finder-mini-side b{color:#fff!important;background:#353940!important;padding:2px 4px!important;border-radius:3px!important}
.finder-mini-files{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px!important;align-content:start!important;padding:25px 13px!important}.finder-mini-files span{display:flex!important;flex-direction:column!important;align-items:center!important;font-size:25px!important;padding:4px!important;border-radius:5px!important}.finder-mini-files small{font-size:7px!important;margin-top:4px!important}.finder-mini-files .selected{outline:2px solid #8857ff!important;background:rgba(136,87,255,.12)!important}
.edge-target{position:absolute!important;right:37px!important;bottom:25px!important;width:68px!important;height:180px!important;border:2px dashed #a65cff!important;border-radius:15px!important;box-shadow:0 0 28px rgba(139,77,255,.18)!important}
.floating-photo{position:absolute!important;right:68px!important;bottom:94px!important;font-size:44px!important;transform:rotate(9deg)!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))!important}
.mouse-pointer{position:absolute!important;right:49px!important;bottom:73px!important;font-size:23px!important;transform:rotate(-35deg)!important;color:#fff!important}

@media(max-width:950px){.drag-mode-grid{grid-template-columns:1fr!important}.drag-mode-copy p{min-height:0!important}}
@media(max-width:600px){.drag-modes-shell{padding:24px!important}.drag-mode-visual{height:320px!important}.soba-edge-panel,.normal-scene{height:285px!important}.finder-mini{transform:scale(.82)!important;transform-origin:left bottom!important}}

/* SOBA 1.4 presentation fixes
   - preserve existing constructed visuals
   - prevent Workspace Collecting clipping
   - make light mode intentional
*/

/* 1) Prevent the Workspace Collecting visual from clipping at the bottom. */
.drag-mode-card{
  overflow:visible !important;
}
.drag-mode-visual{
  height:auto !important;
  min-height:420px !important;
  overflow:visible !important;
}
.collect-visual{
  padding-top:22px !important;
  padding-bottom:22px !important;
}
.soba-edge-panel{
  height:360px !important;
  min-height:360px !important;
  overflow:hidden !important;
}
.edge-collect-zone{
  height:246px !important;
  min-height:246px !important;
  box-sizing:border-box !important;
}
.normal-visual{
  min-height:420px !important;
}
.normal-scene{
  height:360px !important;
  min-height:360px !important;
}

/* Make the Workspaces flow mockup breathe slightly more as well. */
.workspace-window-v2{
  height:286px !important;
  min-height:286px !important;
}
.workspace-collecting{
  padding-bottom:16px !important;
}

/* 2) Light mode: keep SOBA app mockups dark, but make their surrounding website cards
   and typography fit the light page instead of looking pasted on. */
html[data-theme="light"] .drag-modes-shell,
html[data-theme="light"] .showcase-panel,
html[data-theme="light"] .flow-showcase .showcase-panel{
  background:#ffffff !important;
  border-color:#dfe3ea !important;
  box-shadow:0 14px 38px rgba(20,28,45,.07) !important;
}

html[data-theme="light"] .drag-mode-card{
  background:#f7f8fb !important;
  border-color:#d9dee7 !important;
  box-shadow:0 10px 28px rgba(20,28,45,.06) !important;
}

html[data-theme="light"] .drag-mode-copy h3,
html[data-theme="light"] .drag-modes-heading h2,
html[data-theme="light"] .showcase-copy h3{
  color:#161b26 !important;
}

html[data-theme="light"] .drag-mode-copy p,
html[data-theme="light"] .drag-modes-heading p,
html[data-theme="light"] .showcase-copy p{
  color:#606978 !important;
}

html[data-theme="light"] .drag-mode-label{
  background:#eceff4 !important;
  color:#5f6672 !important;
}

html[data-theme="light"] .workspace-label{
  background:#e9f9ee !important;
  color:#17953b !important;
}

html[data-theme="light"] .drag-mode-status{
  color:#303744 !important;
}

html[data-theme="light"] .drag-mode-options{
  color:#6e4fd5 !important;
}

/* Keep the app/UI demonstrations themselves in SOBA's native dark appearance. */
html[data-theme="light"] .drag-mode-visual,
html[data-theme="light"] .visual-frame{
  background:#eef1f6 !important;
  border-color:#dfe3ea !important;
}

html[data-theme="light"] .soba-edge-panel,
html[data-theme="light"] .normal-scene,
html[data-theme="light"] .quick-mock-v2,
html[data-theme="light"] .workspace-window-v2,
html[data-theme="light"] .smart-item-window,
html[data-theme="light"] .carrier-picker,
html[data-theme="light"] .mini-action-card{
  box-shadow:0 16px 34px rgba(18,24,38,.18) !important;
}

/* Light mode Workspaces / Smart Recognition section framing. */
html[data-theme="light"] .workspace-demo .ws-panel{
  background:#ffffff !important;
  border-color:#dce1e8 !important;
  box-shadow:0 12px 30px rgba(20,28,45,.08) !important;
}

html[data-theme="light"] .workspace-demo .ws-tabs,
html[data-theme="light"] .workspace-demo .ws-header,
html[data-theme="light"] .workspace-demo .ws-list,
html[data-theme="light"] .workspace-demo .ws-panel-collect{
  color:#2b313c !important;
}

html[data-theme="light"] .workspace-demo .ws-tabs{
  border-color:#e3e7ed !important;
}

html[data-theme="light"] .workspace-demo .ws-item{
  border-color:#e6e9ef !important;
}

html[data-theme="light"] .workspace-demo .ws-item small,
html[data-theme="light"] .workspace-demo .ws-count,
html[data-theme="light"] .workspace-demo .ws-recent-item small{
  color:#747d8b !important;
}

html[data-theme="light"] .workspace-demo .ws-recent-label{
  background:#f1f3f6 !important;
  color:#68717e !important;
}

html[data-theme="light"] .workspace-demo .ws-recent-item{
  border-color:#e6e9ef !important;
}

html[data-theme="light"] .workspace-demo .ws-btn,
html[data-theme="light"] .workspace-demo .ws-btn-ghost{
  background:#eceff3 !important;
  color:#303744 !important;
}

/* The SOBA-like mockups intentionally remain dark inside light mode. */
html[data-theme="light"] .workspace-window-v2,
html[data-theme="light"] .smart-item-window,
html[data-theme="light"] .carrier-picker,
html[data-theme="light"] .quick-mock-v2,
html[data-theme="light"] .soba-edge-panel,
html[data-theme="light"] .normal-scene{
  color:#f4f5f8 !important;
}

/* Responsive: preserve extra room on smaller layouts without stretching visuals. */
@media(max-width:950px){
  .drag-mode-visual{
    min-height:390px !important;
  }
}
@media(max-width:600px){
  .drag-mode-visual{
    min-height:330px !important;
  }
  .soba-edge-panel,
  .normal-scene{
    height:290px !important;
    min-height:290px !important;
  }
  .edge-collect-zone{
    height:190px !important;
    min-height:190px !important;
  }
}

/* Final fix: Workspace Collecting card must expand naturally and never crop the drop zone. */

.drag-mode-grid{
  align-items:start !important;
}

.drag-mode-card{
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.drag-mode-card .drag-mode-copy{
  min-height:0 !important;
}

.drag-mode-card .drag-mode-visual{
  height:auto !important;
  min-height:0 !important;
  padding:28px 18px 32px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

.drag-mode-card .collect-visual{
  min-height:455px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.drag-mode-card .soba-edge-panel{
  width:100% !important;
  max-width:500px !important;
  height:auto !important;
  min-height:390px !important;
  overflow:visible !important;
  flex:none !important;
}

.drag-mode-card .edge-actions-row{
  height:76px !important;
}

.drag-mode-card .edge-quick{
  min-height:46px !important;
  box-sizing:border-box !important;
}

.drag-mode-card .edge-collect-zone{
  height:270px !important;
  min-height:270px !important;
  margin:0 8px 8px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Keep the normal Everyday Drag card visually balanced with the collecting card. */
.drag-mode-card .normal-visual{
  min-height:455px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:28px !important;
  padding-bottom:32px !important;
}

.drag-mode-card .normal-scene{
  height:390px !important;
  min-height:390px !important;
}

/* Prevent any parent section from clipping these cards. */
.drag-modes-shell,
.drag-modes-section{
  overflow:visible !important;
}

/* Light mode should preserve the same sizing. */
html[data-theme="light"] .drag-mode-card .collect-visual,
html[data-theme="light"] .drag-mode-card .normal-visual{
  min-height:455px !important;
}

/* Responsive sizing: still roomy enough not to crop. */
@media(max-width:950px){
  .drag-mode-card .collect-visual,
  .drag-mode-card .normal-visual{
    min-height:430px !important;
  }
  .drag-mode-card .soba-edge-panel{
    min-height:380px !important;
  }
  .drag-mode-card .edge-collect-zone{
    height:260px !important;
    min-height:260px !important;
  }
}

@media(max-width:600px){
  .drag-mode-card .drag-mode-visual{
    padding:18px 12px 24px !important;
  }
  .drag-mode-card .collect-visual,
  .drag-mode-card .normal-visual{
    min-height:365px !important;
  }
  .drag-mode-card .soba-edge-panel{
    min-height:325px !important;
  }
  .drag-mode-card .edge-actions-row{
    height:68px !important;
  }
  .drag-mode-card .edge-quick{
    min-height:42px !important;
  }
  .drag-mode-card .edge-collect-zone{
    height:210px !important;
    min-height:210px !important;
  }
  .drag-mode-card .normal-scene{
    height:325px !important;
    min-height:325px !important;
  }
}

/* SOBA 1.4 — hero wording replacement only */
.hero .hero-quick-title{
  font-size:clamp(3.9rem,6.5vw,6.8rem) !important;
  line-height:.93 !important;
  letter-spacing:-.065em !important;
  max-width:900px !important;
}
.hero .hero-quick-title span{
  color:inherit !important;
}
.hero .hero-quick-title kbd{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.06em .17em .09em !important;
  border:1px solid rgba(20,25,38,.15) !important;
  border-radius:.18em !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:0 5px 16px rgba(20,28,45,.07) !important;
  font:inherit !important;
  color:inherit !important;
  letter-spacing:-.04em !important;
}
html[data-theme="dark"] .hero .hero-quick-title kbd{
  background:#20232a !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.24) !important;
}
@media(max-width:700px){
  .hero .hero-quick-title{
    font-size:clamp(3rem,12vw,5rem) !important;
  }
}

/* SOBA 1.4 — More / daily-use details */
.more-section{padding-top:72px!important;padding-bottom:72px!important}
.more-intro{max-width:760px!important;margin-bottom:34px!important}
.more-intro h2{font-size:clamp(3rem,5.2vw,5.4rem)!important;line-height:.96!important;letter-spacing:-.06em!important;margin:12px 0 16px!important}
.more-intro p{font-size:1rem!important;line-height:1.7!important;color:var(--muted)!important}
.more-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.more-card{position:relative!important;min-height:250px!important;padding:28px!important;border:1px solid var(--line)!important;border-radius:22px!important;background:var(--panel)!important}
.more-card .more-icon{width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:rgba(113,73,255,.12)!important;color:#7954ff!important;margin-bottom:22px!important;font-size:15px!important}
.more-card .eyebrow{font-size:.68rem!important;margin-bottom:9px!important}
.more-card h3{font-size:1.35rem!important;line-height:1.15!important;letter-spacing:-.035em!important;margin:0 0 10px!important}
.more-card p{max-width:95%!important;color:var(--muted)!important;font-size:.9rem!important;line-height:1.6!important;margin:0!important}
.key-demo{position:absolute!important;right:20px!important;bottom:18px!important;display:flex!important;gap:7px!important}
.key-demo kbd{padding:8px 11px!important;border-radius:7px!important;background:var(--text)!important;color:var(--bg)!important;font-size:.72rem!important;border:0!important}
.tour-dots{position:absolute!important;right:22px!important;bottom:21px!important;display:flex!important;align-items:center!important;gap:6px!important}.tour-dots b{width:18px!important;height:5px!important;border-radius:999px!important;background:#7549ff!important}.tour-dots i{width:6px!important;height:6px!important;border-radius:50%!important;background:var(--muted)!important}
.undo-demo,.cloud-demo,.search-demo{margin-top:20px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:rgba(127,127,127,.035)!important}
.undo-demo{display:flex!important;justify-content:space-between!important;padding:12px 14px!important;font-size:.75rem!important}.undo-demo strong{color:#7954ff!important}
.cloud-demo{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:13px!important;font-size:.7rem!important}.cloud-demo i{width:24px!important;height:1px!important;background:var(--muted)!important}.cloud-demo b{font-weight:800!important}
.focus-demo{display:inline-block!important;margin-top:20px!important;padding:9px 12px!important;border:1px solid var(--line)!important;border-radius:9px!important;font-size:.72rem!important;font-weight:700!important}
.search-demo{padding:8px 10px!important}.search-demo span,.search-demo small{display:block!important}.search-demo span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:.72rem!important;background:rgba(127,127,127,.07)!important;padding:3px 5px!important}.search-demo small{color:var(--muted)!important;padding:5px!important;font-size:.7rem!important}
@media(max-width:760px){.more-grid{grid-template-columns:1fr!important}.more-card{min-height:230px!important}}

/* 1.4 navigation + Quick Capture statement */
.shortcut-statement{
  padding:64px 24px 54px !important;
  text-align:center !important;
}
.shortcut-statement .eyebrow{
  margin-bottom:14px !important;
}
.shortcut-statement h2{
  max-width:1100px !important;
  margin:0 auto !important;
  font-size:clamp(3.8rem,7vw,7rem) !important;
  line-height:.93 !important;
  letter-spacing:-.065em !important;
  font-weight:800 !important;
}
.shortcut-statement h2 kbd{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:.06em .17em .09em !important;
  border:1px solid rgba(20,25,38,.14) !important;
  border-radius:.18em !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:0 5px 16px rgba(20,28,45,.06) !important;
  font:inherit !important;
  color:inherit !important;
}
html[data-theme="dark"] .shortcut-statement h2 kbd{
  background:#20232a !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
}

.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  flex-wrap:wrap !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
}
.nav-anchor-alias{
  display:block !important;
  height:0 !important;
  scroll-margin-top:96px !important;
}
#features,
#quick-capture,
#smart-actions,
#whats-new,
#more{
  scroll-margin-top:96px !important;
}

@media(max-width:900px){
  .site-header .nav-links{
    gap:15px !important;
  }
}
@media(max-width:700px){
  .shortcut-statement{
    padding:48px 18px 40px !important;
  }
  .shortcut-statement h2{
    font-size:clamp(3rem,12vw,5rem) !important;
  }
}

/* Final navigation mapping and hero presentation */
.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:26px !important;
  flex-wrap:wrap !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
}

#features,
#quick-capture,
#smart-actions,
#whats-new,
#more,
#download{
  scroll-margin-top:104px !important;
}

.hero{
  align-items:center !important;
}
.hero-copy .eyebrow{
  margin-bottom:20px !important;
}
.hero h1{
  font-size:clamp(4rem,6.8vw,7.2rem) !important;
  line-height:.98 !important;
  letter-spacing:-.065em !important;
}
.hero h1 span{
  background:linear-gradient(90deg,#1687ff,#8544ee) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
.hero-subtitle{
  max-width:720px !important;
  font-size:1.12rem !important;
  line-height:1.75 !important;
}
.hero-icon{
  width:min(100%,520px) !important;
  height:auto !important;
}

@media(max-width:1000px){
  .site-header .nav-links{gap:16px !important}
}

html,body,button,input,textarea,select,h1,h2,h3,h4{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif!important;}

.privacy-workspaces{max-width:980px;margin:28px auto 72px;padding:30px 32px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.privacy-workspaces h2{margin:8px 0 10px;letter-spacing:-.035em}
.privacy-workspaces p{max-width:780px;margin:0;color:var(--muted);line-height:1.65}

/* Hero proportions matched to the preferred reference */
.hero h1{
  font-size:clamp(3.75rem,5.65vw,5.9rem) !important;
  line-height:.94 !important;
  letter-spacing:-.06em !important;
  max-width:650px !important;
}
.hero-copy{
  max-width:650px !important;
}
.hero-subtitle{
  max-width:610px !important;
  font-size:1.02rem !important;
  line-height:1.65 !important;
}
.hero-icon{
  width:min(100%,480px) !important;
}
@media(max-width:900px){
  .hero h1{
    font-size:clamp(3.3rem,9vw,5rem) !important;
  }
}

/* Small product-positioning statement */
.why-soba{
  max-width:980px;
  margin:6px auto 54px;
  padding:0 24px;
  text-align:center;
}
.why-soba .eyebrow{
  margin-bottom:10px;
}
.why-soba p{
  max-width:820px;
  margin:0 auto;
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  line-height:1.45;
  letter-spacing:-.025em;
  font-weight:650;
  color:var(--text);
}

/* Compact trust treatment before Download */
.download-trust{
  max-width:980px;
  margin:28px auto 18px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:11px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
.download-trust i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  opacity:.5;
}

@media(max-width:700px){
  .why-soba{margin-bottom:40px}
  .download-trust{gap:8px 10px}
}

/* Keep all desktop navigation links, including Release Notes, on one row. */
.site-header{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:24px !important;
}
.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}
.site-header .theme-toggle{
  justify-self:end !important;
}
@media(max-width:1080px){
  .site-header{
    grid-template-columns:auto 1fr !important;
    row-gap:14px !important;
  }
  .site-header .nav-links{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
  }
  .site-header .theme-toggle{
    grid-column:2 !important;
    grid-row:1 !important;
  }
}

/* SOBA 1.4 — Back to Source */
.source-section{
  padding-top:34px !important;
  padding-bottom:34px !important;
}
.source-feature-card{
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(480px,1.1fr);
  gap:46px;
  align-items:center;
  padding:38px 40px;
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--panel);
}
.source-feature-copy h2{
  margin:10px 0 14px;
  font-size:clamp(2.5rem,4vw,4.1rem);
  line-height:1;
  letter-spacing:-.05em;
}
.source-feature-copy>p{
  max-width:610px;
  margin:0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.68;
}
.source-points{
  display:grid;
  gap:15px;
  margin-top:26px;
}
.source-points>div{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:12px;
  align-items:start;
}
.source-points>div>span{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(124,87,255,.14);
  color:#8464ff;
  font-size:.8rem;
  font-weight:800;
}
.source-points p{
  margin:0;
}
.source-points strong,
.source-points small{
  display:block;
}
.source-points small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.45;
}

.source-feature-visual{
  min-height:330px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 10%,rgba(114,78,255,.10),transparent 38%),
    rgba(10,12,18,.92);
}
.source-window{
  width:min(100%,560px);
  padding:18px;
  border-radius:18px;
  background:#1d2026;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 54px rgba(0,0,0,.34);
  color:#f4f5f8;
}
.source-window-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#9da4b0;
  font-size:.78rem;
}
.source-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#f5f6f8;
}
.source-logo{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:linear-gradient(145deg,#665cff,#b04cff);
  color:#fff;
  font-weight:900;
}
.source-item-row{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:center;
  padding:18px 0;
}
.source-file-icon{
  width:40px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#e74e55;
  color:#fff;
  font-size:.68rem;
  font-weight:800;
}
.source-item-row strong,
.source-item-row small{
  display:block;
}
.source-item-row small{
  margin-top:3px;
  color:#9198a4;
  font-size:.74rem;
}
.source-status{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(52,211,95,.12);
  color:#5ce77a;
  font-size:.68rem;
  font-weight:800;
}
.source-context{
  padding:14px;
  border-radius:12px;
  background:#252931;
}
.source-context>small{
  color:#858d99;
  font-size:.65rem;
  letter-spacing:.08em;
  font-weight:800;
}
.source-path{
  margin-top:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#cbd0d8;
  font-size:.77rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.source-actions-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.source-actions-row button{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:#30343c;
  color:#f5f6f8;
  font-weight:700;
}
.source-actions-row .source-primary{
  background:#6d54db;
  border-color:#7b61e8;
}

html[data-theme="light"] .source-feature-visual{
  background:#eef1f6;
}
html[data-theme="light"] .source-window{
  box-shadow:0 18px 38px rgba(20,28,45,.16);
}

@media(max-width:900px){
  .source-feature-card{
    grid-template-columns:1fr;
    gap:28px;
  }
}
@media(max-width:600px){
  .source-feature-card{
    padding:24px;
    border-radius:24px;
  }
  .source-feature-visual{
    padding:14px;
    min-height:290px;
  }
  .source-actions-row{
    grid-template-columns:1fr;
  }
}

/* Back to Source nav — keep desktop navigation on one line */
.site-header{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  column-gap:18px !important;
}
.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
  flex:0 0 auto !important;
  font-size:.94rem !important;
}

/* Only stack navigation on genuinely smaller screens. */
@media(max-width:1040px){
  .site-header{
    grid-template-columns:auto 1fr !important;
    row-gap:12px !important;
  }
  .site-header .nav-links{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:13px 18px !important;
  }
  .site-header .theme-toggle{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }
}

#back-to-source{
  scroll-margin-top:104px !important;
}

/* Simplified primary navigation */
.site-header .nav-links{
  gap:24px !important;
  flex-wrap:nowrap !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
}
@media(max-width:900px){
  .site-header .nav-links{
    gap:16px !important;
  }
}

/* Minimal primary navigation: product story only */
.site-header .nav-links{
  gap:28px !important;
  flex-wrap:nowrap !important;
}
.site-header .nav-links a{
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* What's New / Workspaces anchor landing fix */
#workspaces{
  scroll-margin-top:150px !important;
}

/* Slightly smaller offset on narrower screens where the header is shorter. */
@media(max-width:900px){
  #workspaces{
    scroll-margin-top:125px !important;
  }
}

/* Quick-capture strip above the Native macOS trust row */
.capture-command-strip{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto 18px;
  min-height:68px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--panel);
  box-shadow:0 12px 30px rgba(20,24,40,.05);
}
.capture-command-left,
.capture-command-actions{
  display:flex;
  align-items:center;
}
.capture-command-left{
  gap:14px;
  color:var(--muted);
}
.capture-key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:50px;
  height:34px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--text);
  font-weight:800;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}
.capture-command-actions{
  gap:11px;
  color:var(--muted);
  font-size:.77rem;
  letter-spacing:.08em;
}
.capture-command-actions strong{
  font-weight:800;
}
.capture-command-actions i{
  opacity:.55;
  font-style:normal;
}

/* Primary navigation CTA */
.site-header .nav-links .nav-get-soba{
  padding:9px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#178cff,#7b36ef) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 7px 18px rgba(101,67,235,.22);
}
.site-header .nav-links .nav-get-soba:hover{
  transform:translateY(-1px);
}

/* Download target should land below sticky navigation. */
#download{
  scroll-margin-top:120px !important;
}

@media(max-width:850px){
  .capture-command-strip{
    align-items:flex-start;
    flex-direction:column;
    padding:18px 20px;
  }
  .capture-command-actions{
    flex-wrap:wrap;
  }
}

/* Place the quick-capture hint directly below the hero trust row */
.hero .capture-command-strip{
  width:100% !important;
  max-width:760px !important;
  margin:18px 0 0 !important;
  min-height:64px !important;
  padding:0 20px !important;
  border-radius:18px !important;
}
.hero .capture-command-left{
  white-space:nowrap;
}
.hero .capture-command-actions{
  margin-left:auto;
}
@media(max-width:760px){
  .hero .capture-command-strip{
    max-width:100% !important;
    align-items:flex-start !important;
  }
  .hero .capture-command-left{
    white-space:normal;
  }
}

/* Final compact placement for the quick-capture hint */
.hero .capture-command-strip{
  width:auto !important;
  max-width:none !important;
  min-height:0 !important;
  margin:10px 0 0 !important;
  padding:7px 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  border-radius:12px !important;
  box-shadow:none !important;
  background:rgba(127,127,127,.035) !important;
}

.hero .capture-command-left{
  gap:8px !important;
  white-space:nowrap !important;
  font-size:.72rem !important;
}

.hero .capture-key{
  min-width:auto !important;
  height:26px !important;
  padding:0 8px !important;
  border-radius:7px !important;
  font-size:.72rem !important;
}

.hero .capture-command-actions{
  gap:7px !important;
  margin-left:0 !important;
  font-size:.62rem !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

.hero .capture-command-actions i{
  font-size:.55rem !important;
}

@media(max-width:760px){
  .hero .capture-command-strip{
    display:flex !important;
    width:100% !important;
    flex-wrap:wrap !important;
  }
  .hero .capture-command-actions{
    flex-wrap:wrap !important;
  }
}


/* Homepage vertical rhythm polish — balanced spacing between feature panels */
main > .section{
  padding-top:52px !important;
  padding-bottom:52px !important;
}

/* Keep adjacent feature panels visually connected, without crowding them. */
main > .section + .section{
  margin-top:0 !important;
}

/* The hero needs a little more breathing room than ordinary panels. */
main > .hero{
  padding-bottom:64px !important;
}

/* Large showcase areas still get a touch more separation. */
#features,
#workspaces,
#back-to-source{
  padding-top:58px !important;
  padding-bottom:58px !important;
}

/* Bottom CTA should feel attached to the end of the story. */
#download{
  padding-top:54px !important;
  padding-bottom:54px !important;
}

/* Mobile: slightly tighter but never cramped. */
@media(max-width:760px){
  main > .section{
    padding-top:38px !important;
    padding-bottom:38px !important;
  }
  #features,
  #workspaces,
  #back-to-source,
  #download{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }
}


/* Final homepage rhythm correction:
   remove oversized dead space BETWEEN panels, not the padding inside them. */
main{
  display:block !important;
}

main > section,
main > .section{
  min-height:auto !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Balanced gap between consecutive homepage sections/panels. */
main > section + section,
main > .section + .section{
  margin-top:38px !important;
}

/* Avoid older rules creating large viewport-sized gaps. */
#features,
#quick-capture,
#smart-actions,
#workspaces,
#back-to-source,
#more,
#download{
  min-height:auto !important;
}

/* Keep normal internal breathing room without producing giant blank bands. */
main > .section{
  padding-top:32px !important;
  padding-bottom:32px !important;
}
#features,
#workspaces,
#back-to-source,
#download{
  padding-top:36px !important;
  padding-bottom:36px !important;
}

/* Quick-capture command strip should align with the same content width as panels. */
.quick-strip,
.quick-capture-strip,
.capture-strip,
.capture-command-strip,
.shortcut-strip{
  width:calc(100% - 40px) !important;
  max-width:1120px !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* If the strip is a direct child of a constrained section/container,
   let it consume that container's full panel width. */
.section .quick-strip,
.section .quick-capture-strip,
.section .capture-strip,
.section .capture-command-strip,
.section .shortcut-strip{
  width:100% !important;
  max-width:none !important;
}

@media(max-width:760px){
  main > section + section,
  main > .section + .section{
    margin-top:26px !important;
  }
  main > .section{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }
}

/* Exact uploaded-site strip width */
.shortcut-copy{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
}

/* Shortcut strip: directly above Quick Capture and aligned to panel width */
.quick-capture-shortcut-anchor{
  width:min(1120px,calc(100% - 40px));
  margin:38px auto 14px;
  scroll-margin-top:118px;
}
.quick-capture-shortcut-anchor .shortcut-strip{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.site-header .nav-links{
  gap:20px !important;
  flex-wrap:nowrap !important;
}
.site-header .nav-links a{white-space:nowrap !important;}
@media(max-width:760px){
 .quick-capture-shortcut-anchor{width:calc(100% - 28px);margin-top:26px;}
}

/* Single compact appearance toggle */
.site-header .theme-icon-toggle{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid var(--line) !important;
  border-radius:50% !important;
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  cursor:pointer !important;
}
.site-header .theme-icon-toggle:hover{
  transform:translateY(-1px);
}
.theme-icon-toggle .theme-icon::before{
  content:"☾";
  font-size:1.05rem;
  line-height:1;
}
html[data-theme="dark"] .theme-icon-toggle .theme-icon::before{
  content:"☀";
}
.site-header .nav-links{
  flex-wrap:nowrap !important;
}

/* Header balance: nudge the navigation group slightly left */
@media(min-width:1081px){
  .site-header .nav-links{
    transform:translateX(-26px) !important;
  }
}

/* More breathing room in desktop header */
@media(min-width:1081px){
  /* Move the navigation group farther left. */
  .site-header .nav-links{
    transform:translateX(-52px) !important;
  }

  /* Give the primary CTA a deliberate separation from "More". */
  .site-header .nav-links .nav-get-soba{
    margin-left:14px !important;
  }
}

/* Reference-matched spacing between navigation and hero */
@media(min-width:761px){
  main > .hero{
    padding-top:108px !important;
  }
}
@media(max-width:760px){
  main > .hero{
    padding-top:64px !important;
  }
}

/* Updated Workspace collecting visual — image only */
.workspace-collecting-image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
}

/* What's New / Workspaces — let the supplied image fully occupy the available width */
#workspaces .workspace-demo{
  display:block !important;
  width:100% !important;
}
#workspaces .workspace-demo .workspace-collecting-image{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  object-fit:contain !important;
}


/* Click-to-enlarge screenshots */
main img.lightbox-enabled{
  cursor:zoom-in;
}

.image-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(5,7,12,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
}

.image-lightbox.open{
  opacity:1;
  visibility:visible;
}

.image-lightbox-img{
  display:block;
  max-width:min(94vw,1600px);
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  transform:scale(.985);
  transition:transform .18s ease;
}

.image-lightbox.open .image-lightbox-img{
  transform:scale(1);
}

.image-lightbox-close{
  position:fixed;
  top:22px;
  right:24px;
  z-index:10001;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(28,31,38,.9);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
}

body.lightbox-open{
  overflow:hidden;
}

@media(max-width:700px){
  .image-lightbox{
    padding:18px;
  }
  .image-lightbox-img{
    max-width:96vw;
    max-height:86vh;
    border-radius:12px;
  }
}

/* Product Hunt review — intentionally separate from screenshot lightbox */
.review-section{
  padding-top:18px !important;
  padding-bottom:34px !important;
}
.review-card{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:30px 36px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:24px;
  background:transparent;
}
.review-card h2{margin:8px 0}
.review-card p{
  margin:0 auto 20px;
  max-width:600px;
  color:var(--muted);
}
.product-hunt-review-link{
  display:inline-block;
  line-height:0;
  cursor:pointer !important;
}
.product-hunt-review-link *,
.product-hunt-review-badge,
.product-hunt-review-badge.no-lightbox{
  cursor:pointer !important;
}
.product-hunt-review-badge{
  display:block;
  width:250px;
  height:54px;
  max-width:100%;
}


/* =========================================================
   Timeline — website feature presentation
   ========================================================= */
.timeline-web-section{
  scroll-margin-top:110px;
}

.timeline-web-heading{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.timeline-web-heading p{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.timeline-web-visual{
  width:min(1180px,calc(100% - 40px));
  margin:28px auto 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:26px;
  background:var(--panel);
  overflow:hidden;
}

.timeline-feature-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
}

.timeline-web-points{
  width:min(1120px,calc(100% - 40px));
  margin:22px auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.timeline-web-points article{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
}

.timeline-point-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(139,92,246,.13);
  color:#9b70ff;
  font-weight:800;
}

.timeline-web-points strong{
  display:block;
  margin:1px 0 5px;
}

.timeline-web-points p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.timeline-web-note{
  width:min(580px,calc(100% - 40px));
  margin:18px auto 0;
  display:flex;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
  padding:13px 18px;
  border-radius:14px;
  border:1px solid rgba(139,92,246,.28);
  background:rgba(139,92,246,.07);
  color:var(--muted);
  text-align:center;
}

.timeline-web-note strong{
  color:#9b70ff;
}

@media(max-width:900px){
  .timeline-web-points{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .timeline-web-visual,
  .timeline-web-points{
    width:calc(100% - 24px);
  }
  .timeline-web-points{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Header brand alignment fix
   Keep tagline contained so it never crowds "Drag to SOBA".
   ========================================================= */
.site-header{
  grid-template-columns:auto minmax(0,1fr) auto !important;
  column-gap:24px !important;
}

.brand-rich{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

.brand-rich .brand-icon{
  flex:0 0 auto !important;
}

.brand-stack{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  line-height:1.05 !important;
}

.brand-stack strong{
  display:block !important;
  white-space:nowrap !important;
}

.brand-stack small{
  display:block !important;
  white-space:nowrap !important;
  font-size:11px !important;
  line-height:1.15 !important;
  margin-top:3px !important;
  letter-spacing:-0.01em !important;
}

/* Give navigation its own space instead of letting it overlap the brand. */
.nav-links{
  min-width:0 !important;
  justify-self:end !important;
  margin-left:10px !important;
}

/* Slightly tighten the first nav item only, preserving the rest of the nav. */
.nav-links > a:first-child{
  margin-left:4px !important;
}

@media (max-width:1180px){
  .site-header{
    column-gap:18px !important;
  }

  .brand-rich{
    gap:8px !important;
  }

  .brand-stack small{
    font-size:10px !important;
  }

  .nav-links{
    margin-left:4px !important;
  }
}


/* =========================================================
   FINAL HEADER OVERLAP FIX
   Reserve real space for the SOBA brand and stop the nav from
   being translated back over the tagline.
   ========================================================= */

.site-header{
  display:grid !important;
  grid-template-columns: 165px minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:28px !important;
}

/* Brand block gets its own fixed column. */
.site-header .brand-rich{
  width:165px !important;
  min-width:165px !important;
  max-width:165px !important;
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  overflow:visible !important;
}

.site-header .brand-rich .brand-icon{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}

.site-header .brand-stack{
  width:112px !important;
  min-width:112px !important;
  max-width:112px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  overflow:visible !important;
}

.site-header .brand-stack strong{
  white-space:nowrap !important;
  line-height:1 !important;
}

.site-header .brand-stack small{
  white-space:nowrap !important;
  font-size:10px !important;
  line-height:1.1 !important;
  margin-top:4px !important;
}

/* Critical: cancel the older left-shift rules that were causing overlap. */
.site-header .nav-links{
  transform:none !important;
  translate:none !important;
  margin-left:0 !important;
  padding-left:0 !important;
  justify-self:start !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
}

/* Ensure the first nav item starts after the reserved brand column. */
.site-header .nav-links > a:first-child{
  margin-left:0 !important;
}

/* Keep everything on one line on normal desktop widths. */
.site-header .nav-links{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  gap:18px !important;
}

/* Slightly tighter nav spacing only on smaller desktop widths. */
@media (max-width:1250px){
  .site-header{
    grid-template-columns:160px minmax(0,1fr) auto !important;
    column-gap:22px !important;
  }

  .site-header .brand-rich{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
  }

  .site-header .nav-links{
    gap:14px !important;
  }

  .site-header .nav-links a{
    font-size:14px !important;
  }
}

@media (max-width:1100px){
  .site-header .nav-links{
    gap:11px !important;
  }

  .site-header .nav-links a{
    font-size:13px !important;
  }
}


/* Real paired Light/Dark feature artwork — never filter or invert these images. */
img[data-dark-src][data-light-src]{
  filter:none !important;
}
html[data-theme="light"] img[data-dark-src][data-light-src],
html[data-theme="dark"] img[data-dark-src][data-light-src]{
  filter:none !important;
}


/* ============================================================
   Smart Actions constructed mockups — true Light Mode
   Dark mode remains unchanged.
   ============================================================ */
html[data-theme="light"] #smart-actions .visual-frame,
html[data-theme="light"] #smart-actions + .showcase-panel .visual-frame,
html[data-theme="light"] .showcase-panel:has(.quick-mock-v2) .visual-frame{
  background:
    radial-gradient(circle at 50% 8%, rgba(124,58,237,.08), transparent 42%),
    #eef1f6 !important;
  border-color:#dfe3ea !important;
}

/* QUICK CAPTURE */
html[data-theme="light"] .quick-mock-v2{
  background:#ffffff !important;
  border-color:#d8dde7 !important;
  color:#171b26 !important;
  box-shadow:0 18px 42px rgba(24,32,48,.14) !important;
}
html[data-theme="light"] .quick-v2-top{
  color:#697386 !important;
}
html[data-theme="light"] .quick-brand strong{
  color:#262b36 !important;
}
html[data-theme="light"] .quick-v2-field{
  background:#f7f8fb !important;
  border-color:#7c3aed !important;
  color:#697386 !important;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.12) !important;
}
html[data-theme="light"] .quick-v2-tools{
  color:#6f7787 !important;
}
html[data-theme="light"] .quick-v2-tools i{
  background:#d9dee7 !important;
}
html[data-theme="light"] .quick-v2-hint{
  background:#f1f3f7 !important;
  color:#747d8f !important;
}

/* SMART RECOGNITION */
html[data-theme="light"] .smart-item-window{
  background:#ffffff !important;
  border-color:#d9dee7 !important;
  color:#171b26 !important;
  box-shadow:0 18px 42px rgba(24,32,48,.14) !important;
}
html[data-theme="light"] .action-top{
  color:#1d2330 !important;
}
html[data-theme="light"] .action-top span,
html[data-theme="light"] .action-footer span{
  color:#737c8e !important;
}
html[data-theme="light"] .action-input{
  background:#f2f4f8 !important;
  color:#222936 !important;
}
html[data-theme="light"] .action-card{
  background:#f5f6f9 !important;
  color:#171b26 !important;
}
html[data-theme="light"] .action-kind small{
  color:#778194 !important;
}
html[data-theme="light"] .action-kind>b{
  color:#218a4a !important;
}
html[data-theme="light"] .edge-actions button,
html[data-theme="light"] .action-buttons button,
html[data-theme="light"] .source-actions button,
html[data-theme="light"] .workspace-head button,
html[data-theme="light"] .quick-footer button{
  background:#ffffff !important;
  border-color:#d8dde7 !important;
  color:#242a35 !important;
}
html[data-theme="light"] .carrier-picker{
  background:#ffffff !important;
  border-color:#d9dee7 !important;
  color:#171b26 !important;
  box-shadow:0 18px 42px rgba(24,32,48,.14) !important;
}
html[data-theme="light"] .carrier-picker p{
  color:#636d80 !important;
}
html[data-theme="light"] .carrier-picker button{
  background:#eef1f5 !important;
  color:#252b37 !important;
}
html[data-theme="light"] .carrier-picker button.primary{
  background:#1486ff !important;
  color:#ffffff !important;
}

/* USEFUL NEXT ACTIONS */
html[data-theme="light"] .mini-action-card{
  background:#ffffff !important;
  border-color:#d9dee7 !important;
  color:#171b26 !important;
  box-shadow:0 16px 34px rgba(18,24,38,.12) !important;
}
html[data-theme="light"] .mini-action-head strong{
  color:#252b37 !important;
}
html[data-theme="light"] .mini-action-head small{
  color:#788294 !important;
}
html[data-theme="light"] .mini-action-menu span{
  background:#eef1f5 !important;
  color:#252b37 !important;
}
html[data-theme="light"] .mini-action-card:first-child .mini-action-menu span:first-child,
html[data-theme="light"] .mini-action-card:nth-child(2) .mini-action-menu span:last-child,
html[data-theme="light"] .mini-action-card:nth-child(3) .mini-action-menu span:first-child{
  background:#6f35cf !important;
  color:#ffffff !important;
}


/* SOBA nav spacing correction — preserve order */
.site-header .nav-links{
  gap:3px;
  white-space:nowrap;
}
.site-header .nav-links > a:not(.nav-get-soba){
  gap:5px;
  padding-left:6px;
  padding-right:6px;
  flex-shrink:0;
}
.site-header .nav-links .nav-icon{
  width:14px;
  height:14px;
}
.site-header .nav-get-soba{
  flex-shrink:0;
  margin-left:9px;
}
.site-header .theme-toggle{
  flex-shrink:0;
  margin-left:8px;
}
@media (max-width:1240px) and (min-width:901px){
  .site-header .nav-links{ gap:1px; }
  .site-header .nav-links > a:not(.nav-get-soba){
    padding-left:4px;
    padding-right:4px;
    gap:4px;
    font-size:14px;
  }
  .site-header .nav-links .nav-icon{
    width:13px;
    height:13px;
  }
}


/* SOBA definitive header-end + purple-hover fix */

/* Navigation links: strong SOBA-purple hover without moving anything. */
.site-header .nav-links > a:not(.nav-get-soba):hover{
  color:#7c3aed !important;
  background:rgba(124,58,237,.12) !important;
  border-radius:10px;
  text-shadow:0 0 16px rgba(124,58,237,.18);
}
.site-header .nav-links > a:not(.nav-get-soba):hover .nav-icon{
  color:#7c3aed !important;
  stroke:#7c3aed !important;
  opacity:1;
}
html[data-theme="dark"] .site-header .nav-links > a:not(.nav-get-soba):hover{
  color:#d8b4fe !important;
  background:rgba(168,85,247,.18) !important;
}
html[data-theme="dark"] .site-header .nav-links > a:not(.nav-get-soba):hover .nav-icon{
  color:#d8b4fe !important;
  stroke:#d8b4fe !important;
}

/* The last two controls must be normal-flow siblings, never layered. */
.site-header .nav-get-soba{
  position:static !important;
  inset:auto !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  flex:0 0 auto !important;
  margin-left:10px !important;
  margin-right:0 !important;
  z-index:auto !important;
}

.site-header .theme-toggle{
  position:static !important;
  inset:auto !important;
  right:auto !important;
  left:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
  margin-left:14px !important;
  margin-right:0 !important;
  z-index:auto !important;
}

/* If both controls are inside the nav, keep them separated there. */
.site-header .nav-links .nav-get-soba + .theme-toggle{
  margin-left:14px !important;
}


/* SOBA nav icon restore — retain spacing/hover fix */
.site-header .nav-links .nav-icon{
  width:14px !important;
  height:14px !important;
  flex:0 0 auto !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.75 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:.9 !important;
}
.site-header .nav-links .nav-icon-more{
  width:15px !important;
  height:15px !important;
}
.site-header .nav-links > a:not(.nav-get-soba){
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
}
.site-header .nav-links > a:not(.nav-get-soba):hover .nav-icon{
  stroke:#7c3aed !important;
  color:#7c3aed !important;
  opacity:1 !important;
}
html[data-theme="dark"] .site-header .nav-links > a:not(.nav-get-soba):hover .nav-icon{
  stroke:#d8b4fe !important;
  color:#d8b4fe !important;
}


/* SOBA definitive three-region header layout */
.site-header{
  display:grid !important;
  grid-template-columns:165px minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:22px !important;
}

/* Center/middle navigation owns only section links. */
.site-header .nav-links{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  gap:3px !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  position:static !important;
}

/* Dedicated right-side controls: impossible to overlap. */
.site-header .header-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  white-space:nowrap !important;
}

.site-header .header-actions .nav-get-soba{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
  flex:0 0 auto !important;
  padding:9px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#178cff,#7b36ef) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 7px 18px rgba(101,67,235,.22) !important;
  text-decoration:none !important;
}

.site-header .header-actions .nav-get-soba:hover{
  transform:translateY(-1px) !important;
}

.site-header .header-actions .theme-toggle{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  margin:0 !important;
  flex:0 0 40px !important;
  width:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  height:40px !important;
  justify-self:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

/* Keep icons compact and preserve the purple hover treatment. */
.site-header .nav-links > a{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding-left:5px !important;
  padding-right:5px !important;
  flex:0 0 auto !important;
}

.site-header .nav-links .nav-icon{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
}

/* Fit gracefully on narrower desktop widths without touching actions. */
@media (max-width:1240px) and (min-width:901px){
  .site-header{
    grid-template-columns:155px minmax(0,1fr) auto !important;
    column-gap:14px !important;
  }
  .site-header .nav-links{
    gap:1px !important;
  }
  .site-header .nav-links > a{
    gap:4px !important;
    padding-left:3px !important;
    padding-right:3px !important;
    font-size:13px !important;
  }
  .site-header .nav-links .nav-icon{
    width:13px !important;
    height:13px !important;
    flex-basis:13px !important;
  }
  .site-header .header-actions{
    gap:10px !important;
  }
  .site-header .header-actions .nav-get-soba{
    padding:8px 14px !important;
  }
}


/* SOBA colorful evenly spaced nav */
.site-header{
  grid-template-columns:165px minmax(0,1fr) auto !important;
  column-gap:20px !important;
}

.site-header .nav-links{
  display:grid !important;
  grid-template-columns:repeat(7, max-content) !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-width:0 !important;
  gap:0 !important;
  white-space:nowrap !important;
  margin:0 !important;
  padding:0 !important;
}

.site-header .nav-links > a{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:8px 7px !important;
  border-radius:11px !important;
  flex:0 0 auto !important;
  font-weight:620 !important;
  text-decoration:none !important;
}

.site-header .nav-links .nav-icon{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;
  fill:none !important;
  stroke:var(--nav-accent, currentColor) !important;
  color:var(--nav-accent, currentColor) !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  opacity:1 !important;
}

.site-header .nav-links > a:hover{
  color:var(--nav-accent, #7c3aed) !important;
  background:color-mix(in srgb, var(--nav-accent, #7c3aed) 10%, transparent) !important;
  text-shadow:none !important;
}

.site-header .nav-links > a.active,
.site-header .nav-links > a[aria-current="page"],
.site-header .nav-links > a[aria-current="true"]{
  color:var(--nav-accent, #7c3aed) !important;
  background:color-mix(in srgb, var(--nav-accent, #7c3aed) 12%, transparent) !important;
  box-shadow:none !important;
}

/* Per-link accent colors */
.site-header .nav-links > a:nth-child(1){ --nav-accent:#7c3aed; }
.site-header .nav-links > a:nth-child(2){ --nav-accent:#2f80ed; }
.site-header .nav-links > a:nth-child(3){ --nav-accent:#d946ef; }
.site-header .nav-links > a:nth-child(4){ --nav-accent:#22c98b; }
.site-header .nav-links > a:nth-child(5){ --nav-accent:#f59e0b; }
.site-header .nav-links > a:nth-child(6){ --nav-accent:#3b82f6; }
.site-header .nav-links > a:nth-child(7){ --nav-accent:#8b5cf6; }

/* Move More a touch right without changing order. */
.site-header .nav-links > a:nth-child(7){
  margin-left:10px !important;
}

/* Dedicated right-side action group remains separate and non-overlapping. */
.site-header .header-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:max-content !important;
  white-space:nowrap !important;
}

.site-header .header-actions .nav-get-soba,
.site-header .header-actions .theme-toggle{
  position:static !important;
  transform:none !important;
  margin:0 !important;
  flex-shrink:0 !important;
}

/* Dark mode keeps the same icon colors, with slightly brighter text. */
html[data-theme="dark"] .site-header .nav-links > a{
  color:rgba(239,242,255,.86) !important;
}
html[data-theme="dark"] .site-header .nav-links > a:hover,
html[data-theme="dark"] .site-header .nav-links > a.active{
  color:var(--nav-accent) !important;
}

/* Graceful desktop tightening without collapsing the action group. */
@media (max-width:1240px) and (min-width:901px){
  .site-header{
    grid-template-columns:155px minmax(0,1fr) auto !important;
    column-gap:14px !important;
  }
  .site-header .nav-links > a{
    gap:5px !important;
    padding-left:4px !important;
    padding-right:4px !important;
    font-size:13px !important;
  }
  .site-header .nav-links .nav-icon{
    width:14px !important;
    height:14px !important;
    flex-basis:14px !important;
  }
  .site-header .nav-links > a:nth-child(7){
    margin-left:6px !important;
  }
}


/* SOBA logo-only header spacing */
.site-header{
  grid-template-columns:54px minmax(0,1fr) auto !important;
  column-gap:18px !important;
}

.site-header .brand.brand-rich{
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
}

.site-header .brand.brand-rich img{
  margin:0 !important;
}

/* Use the reclaimed brand space to distribute links cleanly. */
.site-header .nav-links{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(7, max-content) !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:0 !important;
}

/* More gets a little extra separation, as requested. */
.site-header .nav-links > a:nth-child(7){
  margin-left:14px !important;
}

/* Keep the action group completely separate. */
.site-header .header-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:max-content !important;
}

@media (max-width:1240px) and (min-width:901px){
  .site-header{
    grid-template-columns:48px minmax(0,1fr) auto !important;
    column-gap:12px !important;
  }
  .site-header .brand.brand-rich{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
  }
  .site-header .nav-links > a:nth-child(7){
    margin-left:8px !important;
  }
}


/* SOBA mobile navigation dropdown */
.mobile-menu-toggle{
  display:none;
}

/* Desktop remains exactly as currently styled. */
@media (max-width:900px){
  .site-header{
    position:relative !important;
    display:grid !important;
    grid-template-columns:auto auto 1fr auto !important;
    align-items:center !important;
    column-gap:10px !important;
    padding:10px 12px !important;
  }

  .mobile-menu-toggle{
    display:inline-flex !important;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid rgba(120,128,150,.18);
    border-radius:12px;
    background:rgba(255,255,255,.72);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(30,36,50,.07);
    z-index:1002;
  }

  .mobile-menu-toggle span{
    display:block;
    width:17px;
    height:2px;
    border-radius:999px;
    background:#586174;
    transition:transform .18s ease, opacity .18s ease;
  }

  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  html[data-theme="dark"] .mobile-menu-toggle{
    background:rgba(19,24,36,.88);
    border-color:rgba(255,255,255,.10);
  }
  html[data-theme="dark"] .mobile-menu-toggle span{
    background:#edf1fb;
  }

  /* Brand is icon-only and stays next to hamburger. */
  .site-header .brand.brand-rich{
    grid-column:2 !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .site-header .brand.brand-rich .brand-stack,
  .site-header .brand.brand-rich .brand-copy{
    display:none !important;
  }

  /* Right controls stay visible. */
  .site-header .header-actions{
    grid-column:4 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:max-content !important;
    z-index:1001;
  }

  .site-header .header-actions .nav-get-soba{
    padding:8px 12px !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .site-header .header-actions .theme-toggle{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }

  /* Navigation becomes a dropdown panel anchored below the header. */
  .site-header .nav-links{
    display:none !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    margin:0 !important;
    padding:10px !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(120,128,150,.16) !important;
    border-radius:16px !important;
    box-shadow:0 18px 40px rgba(28,35,50,.16) !important;
    z-index:1000 !important;
    transform:none !important;
  }

  .site-header .nav-links.mobile-open{
    display:grid !important;
  }

  .site-header .nav-links > a{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:12px 12px !important;
    margin:0 !important;
    border-radius:11px !important;
    font-size:15px !important;
  }

  .site-header .nav-links .nav-icon{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }

  html[data-theme="dark"] .site-header .nav-links{
    background:rgba(15,20,31,.98) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.36) !important;
  }
}

@media (max-width:520px){
  .site-header{
    grid-template-columns:auto auto 1fr auto !important;
    column-gap:7px !important;
    padding:9px 9px !important;
  }

  .mobile-menu-toggle{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  .site-header .brand.brand-rich{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
  }

  .site-header .brand.brand-rich .brand-icon{
    width:36px !important;
    height:36px !important;
  }

  .site-header .header-actions{
    gap:6px !important;
  }

  .site-header .header-actions .nav-get-soba{
    padding:7px 10px !important;
    font-size:12px !important;
  }

  .site-header .header-actions .theme-toggle{
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
  }

  .site-header .nav-links{
    left:9px !important;
    right:9px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .mobile-menu-toggle span{
    transition:none !important;
  }
}