/* CreatStrat SaaS marketing site.
   This layer extends the violet/lime brand foundation with the current
   product story and conversion system. */

.saas-concept .hero-inner {
  padding-top: clamp(28px, 5vh, 72px);
  padding-bottom: 44px;
}

.saas-concept .hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .8fr);
  gap: clamp(42px, 5vw, 82px);
}

.saas-concept .home .hero-copy h1,
.saas-concept .hero-copy h1 {
  font-size: clamp(62px, 6.8vw, 112px);
  max-width: 10.5ch;
}

.saas-concept .hero-sub {
  max-width: 680px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-url-form {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto;
  gap: 8px;
  width: min(650px, 100%);
}
.hero-url-form input {
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  color: var(--ink);
  background: rgba(250, 250, 252, .82);
  border: 1px solid rgba(10, 10, 18, .2);
  border-radius: var(--product-radius-sm);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-url-form input::placeholder { color: rgba(61, 61, 82, .58); }
.hero-url-form input:focus { background: var(--paper); border-color: var(--violet); box-shadow: 0 0 0 3px rgba(91, 43, 255, .12); }
.hero-url-form.invalid input { border-color: #D7473F; box-shadow: 0 0 0 3px rgba(215, 71, 63, .1); }
.hero-url-error {
  display: none;
  grid-column: 1 / -1;
  color: #B9342D;
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hero-url-form.invalid .hero-url-error { display: block; }
.hero-cta-note { margin: 10px 0 0; color: var(--fog); font: 700 9px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* Product preview in the hero */
.strategy-console {
  min-width: 0;
  color: var(--paper);
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 40px 40px;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 18px 18px 0 var(--violet), 28px 28px 0 rgba(200,255,61,.4);
  padding: clamp(18px, 2vw, 28px);
}

.console-topbar,
.console-head,
.console-footer,
.console-brand {
  display: flex;
  align-items: center;
}

.console-topbar,
.console-footer {
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(250,250,252,.52);
}

.console-topbar {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.console-brand { gap: 10px; color: var(--paper); font-weight: 700; }
.console-preview { color: var(--lime); }

.console-head {
  justify-content: space-between;
  gap: 22px;
  padding: 25px 0 20px;
}

.console-kicker,
.priority-label,
.priority-rank,
.priority-signal {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.console-kicker { color: var(--violet-bright); }
.console-head h2 {
  margin: 7px 0 0;
  max-width: 14ch;
  color: var(--paper);
  font-size: clamp(25px, 2.4vw, 36px);
  letter-spacing: -.035em;
}

.weekly-drop {
  display: grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: end;
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.weekly-drop strong {
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1;
}

.weekly-drop span {
  color: rgba(250,250,252,.48);
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 1.4;
  letter-spacing: .1em;
}

.priority-list { border-top: 1px solid rgba(255,255,255,.1); }
.priority-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.priority-item.active { margin: 0 -13px; padding: 17px 13px; background: rgba(91,43,255,.12); }
.priority-rank { color: rgba(250,250,252,.32); padding-top: 2px; }
.priority-label { margin: 0 0 5px; color: var(--violet-bright); }
.priority-item h3 { margin: 0; color: var(--paper); font-size: 14px; line-height: 1.3; }
.priority-item p:last-child { margin: 5px 0 0; color: rgba(250,250,252,.54); font-size: 11px; line-height: 1.4; }
.priority-signal { color: var(--lime); padding-top: 2px; }
.console-footer { padding-top: 17px; }

/* Dark product showcase */
.product-stage {
  color: var(--paper);
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.product-stage .label-gutter,
.product-stage .intel-lead { color: rgba(250,250,252,.57); }
.product-stage .h2 { color: var(--paper); }
.product-stage .violet-word { color: var(--violet-bright); }
.product-stage .lime-dot { color: var(--lime); }

.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.12);
  border-left: 1px solid rgba(255,255,255,.12);
}

.saas-concept-card {
  min-width: 0;
  padding: 14px;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--ink-2);
}
.saas-concept-card.featured { box-shadow: inset 0 4px 0 var(--violet-bright); }
.concept-image { aspect-ratio: 3 / 2; overflow: hidden; background: #11111a; }
.concept-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.04); }
.saas-concept-card:hover .concept-image img { transform: scale(1.025); }
.concept-image img { transition: transform .55s var(--ease-out); }

.concept-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--violet-bright);
}
.concept-status { color: var(--lime); }
.saas-concept-card h3 { margin: 12px 0 0; color: var(--paper); font-size: 23px; }
.saas-concept-card > p { min-height: 70px; margin: 10px 0 18px; color: rgba(250,250,252,.62); font-size: 13px; line-height: 1.55; }
.saas-concept-card dl { border-top: 1px solid rgba(255,255,255,.1); }
.saas-concept-card dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.saas-concept-card dt,
.saas-concept-card dd { margin: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; }
.saas-concept-card dt { color: rgba(250,250,252,.35); text-transform: uppercase; }
.saas-concept-card dd { color: rgba(250,250,252,.78); }
.product-disclosure { margin: 18px 0 0; color: rgba(250,250,252,.42); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* Diverse ad-output carousel */
.output-showcase {
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.output-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: end;
  margin-bottom: 44px;
}
.output-showcase .label-gutter,
.output-showcase .intel-lead { color: rgba(250, 250, 252, .58); }
.output-showcase .h2 { color: var(--paper); }
.output-showcase .violet-word { color: var(--violet-bright); }
.output-showcase .lime-dot { color: var(--lime); }
.output-controls { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; }
.output-count { min-width: 58px; margin-right: 5px; color: rgba(250, 250, 252, .52); font: 700 10px var(--font-mono); letter-spacing: .1em; }
.output-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--paper);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--product-radius-sm);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.output-arrow:hover:not(:disabled) { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.output-arrow:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.output-arrow:disabled { opacity: .28; cursor: default; }
.output-carousel { overflow: hidden; }
.output-track {
  display: flex;
  gap: 14px;
  padding: 0 max(40px, calc((100vw - 1360px) / 2 + 40px)) 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: max(40px, calc((100vw - 1360px) / 2 + 40px));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.output-track::-webkit-scrollbar { display: none; }
.output-track:focus-visible { outline: 2px solid var(--violet-bright); outline-offset: -2px; }
.output-card {
  position: relative;
  flex: 0 0 clamp(270px, 25vw, 360px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--product-radius);
  scroll-snap-align: start;
}
.output-card::after {
  position: absolute;
  inset: 30% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(10, 10, 18, .94) 78%);
  content: "";
}
.output-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); }
.output-card:hover img { transform: scale(1.025); }
.output-card-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 26px 22px 22px; }
.output-card-copy > span { color: var(--lime); font: 700 9px var(--font-mono); letter-spacing: .12em; }
.output-card-copy h3 { max-width: 13ch; margin: 10px 0 8px; color: var(--paper); font-size: clamp(24px, 2.2vw, 32px); line-height: .98; letter-spacing: -.035em; }
.output-card-copy p { max-width: 31ch; margin: 0; color: rgba(250, 250, 252, .68); font-size: 12px; line-height: 1.5; }
.output-hydration { border-color: rgba(77, 170, 255, .42); }
.output-hydration .output-card-copy > span { color: #8FD5FF; }
.output-pet { border-color: rgba(255, 117, 90, .42); }
.output-pet .output-card-copy > span { color: #FF927A; }
.output-outdoor { border-color: rgba(180, 197, 150, .38); }
.output-outdoor .output-card-copy > span { color: #D5E3B8; }
.output-skincare .output-card-copy h3 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; }
.output-skincare .output-card-copy > span { color: #DFC8B8; }
.output-founder .output-card-copy > span { color: var(--violet-bright); }
.output-disclosure { margin-top: 20px; color: rgba(250, 250, 252, .42); font: 700 9px var(--font-mono); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }

/* Weekly loop */
.saas-concept .loop { position: relative; }
.saas-concept .loop-card { padding-top: 34px; min-height: 330px; }
.loop-num { font-family: var(--font-mono); font-size: 12px; color: var(--violet); }
.loop-label { margin-top: 34px !important; color: var(--fog) !important; font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: .14em; }
.saas-concept .loop-card h3 { margin-top: 10px; }
.loop-data { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.loop-data span { padding: 6px 8px; color: var(--violet); background: var(--violet-soft); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; }
.loop-card.cycle { box-shadow: inset 0 0 0 2px var(--violet); z-index: 1; }

/* Brief preview */
.saas-brief-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(340px, .72fr); gap: clamp(32px, 5vw, 70px); align-items: start; }
.saas-brief { box-shadow: 12px 12px 0 var(--violet); }
.saas-brief .brief-preview-body { padding: clamp(24px, 3vw, 38px); }
.brief-includes { border-top: 4px solid var(--violet); padding-top: 28px; }
.brief-includes .eyebrow { color: var(--violet); margin-bottom: 18px; }

/* Retention section */
.memory-section { background: var(--violet-soft); border-top: 1px solid rgba(91,43,255,.18); border-bottom: 1px solid rgba(91,43,255,.18); }
.memory-statement { max-width: 980px; }
.memory-statement > p:last-child { margin: 0; font-size: clamp(36px, 5.3vw, 74px); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid rgba(91,43,255,.25); border-left: 1px solid rgba(91,43,255,.25); }
.memory-grid article { padding: 30px; border-right: 1px solid rgba(91,43,255,.25); border-bottom: 1px solid rgba(91,43,255,.25); }
.memory-grid article > span { font-family: var(--font-mono); font-size: 11px; color: var(--violet); }
.memory-grid h3 { margin: 32px 0 12px; font-size: 22px; }
.memory-grid p { margin: 0; color: var(--slate); font-size: 14px; }

.pricing-note { max-width: 820px; margin: 26px auto 0; text-align: center; color: var(--fog); font-size: 12px; line-height: 1.6; }
.faq-section { border-top: 1px solid var(--line); }
.faq-section .faq { max-width: 820px; }
.faq-section .faq-item { border-bottom-color: var(--line); }
.faq-section .faq-q { color: var(--ink); }
.faq-section .faq-q .faq-icon { color: var(--violet); }
.faq-section .faq-a p { color: var(--slate); }

/* Analysis form */
.analysis-layout { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1fr); gap: clamp(42px, 6vw, 90px); align-items: start; }
.analysis-preview { border: 1px solid rgba(255,255,255,.14); border-top: 4px solid var(--violet-bright); }
.analysis-kicker { margin: 0; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--violet-bright); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }
.analysis-preview > div { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.analysis-preview strong { color: var(--lime); font-family: var(--font-mono); font-size: 28px; }
.analysis-preview span { color: rgba(250,250,252,.72); font-size: 13px; }
.analysis-fine { margin: 0; padding: 18px 20px; color: rgba(250,250,252,.42); font-family: var(--font-mono); font-size: 9px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.saas-concept .apply-head { margin-bottom: 58px; }
.saas-concept .apply-head .eyebrow { color: var(--violet-bright); }

@media (max-width: 1080px) {
  .saas-concept .hero-grid { grid-template-columns: 1fr; }
  .strategy-console { width: min(760px, calc(100% - 28px)); }
  .concept-grid { grid-template-columns: 1fr 1fr; }
  .saas-concept-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(240px, .7fr) 1fr; column-gap: 22px; }
  .saas-concept-card:last-child .concept-image { grid-row: 1 / 6; }
}

@media (max-width: 900px) {
  .saas-brief-grid,
  .analysis-layout { grid-template-columns: 1fr; }
  .analysis-preview { max-width: 560px; }
}

@media (max-width: 760px) {
  .saas-concept .hero-copy h1 { font-size: clamp(50px, 15.6vw, 78px); }
  .strategy-console { width: calc(100% - 16px); padding: 15px; box-shadow: 9px 9px 0 var(--violet), 16px 16px 0 rgba(200,255,61,.36); }
  .console-head { align-items: flex-start; }
  .weekly-drop { grid-template-columns: 1fr; text-align: right; }
  .priority-item { grid-template-columns: 24px 1fr; }
  .priority-signal { grid-column: 2; }
  .concept-grid { grid-template-columns: 1fr; }
  .saas-concept-card:last-child { grid-column: auto; display: block; }
  .saas-concept-card > p { min-height: 0; }
  .memory-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .console-head { display: block; }
  .weekly-drop { display: flex; margin-top: 18px; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); text-align: left; }
  .console-preview { display: none; }
  .console-footer { display: grid; gap: 7px; }
  .saas-concept-card dl > div { grid-template-columns: 78px 1fr; }
  .analysis-preview > div { grid-template-columns: 52px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .concept-image img { transition: none; }
}

/* Keep the archived dark FAQ defaults from leaking into this light section. */
body.saas-concept .faq-section button.faq-q {
  color: #0A0A12 !important;
}

body.saas-concept .faq-section .faq-q .faq-icon {
  color: #5B2BFF !important;
}

body.saas-concept .faq-section .faq-a p {
  color: #3D3D52 !important;
}

/* ============================================================
   SaaS brand pass — the old brand becomes a product system.
   Violet = action, lime = live/ready, ink = workspace, paper = marketing.
   ============================================================ */
.saas-concept {
  --product-radius: 8px;
  --product-radius-sm: 5px;
  --product-line: rgba(91, 43, 255, .18);
  --product-shadow: 0 18px 50px rgba(10, 10, 18, .10);
}

.saas-concept .nav {
  background: rgba(250, 250, 252, .90);
  border-bottom-color: rgba(10, 10, 18, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.saas-concept .nav-brand { gap: 10px; }
.nav-app-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--product-radius-sm);
  background: var(--ink);
}
.nav-app-mark img { width: 21px; height: 21px; }
.nav-product-badge {
  margin-left: 2px;
  padding: 5px 7px;
  color: var(--violet);
  background: var(--violet-soft);
  border: 1px solid rgba(91, 43, 255, .14);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}

.saas-concept .nav-cta,
.saas-concept .btn,
.saas-concept .field input,
.saas-concept .field select { border-radius: var(--product-radius-sm); }

.saas-concept .hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(500px, .9fr);
  align-items: center;
}
.saas-concept .home .hero-copy h1,
.saas-concept .hero-copy h1 { font-size: clamp(58px, 6.1vw, 96px); }
.saas-concept .section .h2 { max-width: 15ch; font-size: clamp(40px, 5vw, 70px); }

/* Application shell */
.strategy-console {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border-radius: var(--product-radius);
  box-shadow: 14px 14px 0 var(--violet), 22px 22px 0 rgba(200, 255, 61, .34), var(--product-shadow);
}
.console-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 15px 10px;
  background: rgba(255, 255, 255, .035);
  border-right: 1px solid rgba(255, 255, 255, .09);
}
.console-rail > img { margin-bottom: 5px; }
.rail-item {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-content: center;
  border: 1px solid transparent;
  border-radius: var(--product-radius-sm);
  opacity: .48;
}
.rail-item.active { background: rgba(138, 102, 255, .14); border-color: rgba(138, 102, 255, .22); opacity: 1; }
.rail-item.active { grid-template-columns: repeat(2, 4px); gap: 3px; }
.rail-item.active i { width: 4px; height: 4px; border: 1px solid var(--violet-bright); }
.rail-item b { display: block; width: 15px; height: 2px; margin: 2px 0; background: rgba(250, 250, 252, .7); }
.rail-item em { width: 15px; height: 15px; border: 1px solid rgba(250, 250, 252, .7); border-radius: 50%; }
.rail-spacer { flex: 1; }
.rail-avatar { display: grid; width: 26px; height: 26px; place-items: center; color: var(--ink); background: var(--lime); border-radius: 50%; font: 700 9px var(--font-mono); }
.console-workspace { min-width: 0; padding: 0 clamp(16px, 2vw, 24px) 18px; }
.console-topbar { min-height: 58px; padding: 0; }
.console-brand { gap: 8px; font-size: 9px; letter-spacing: .12em; }
.console-brand small { padding: 4px 6px; color: var(--lime); border: 1px solid rgba(200, 255, 61, .22); border-radius: 999px; font: 700 7px var(--font-mono); letter-spacing: .08em; }
.console-tabs { display: flex; gap: 13px; align-self: stretch; align-items: center; color: rgba(250, 250, 252, .36); font: 700 7px var(--font-mono); letter-spacing: .11em; }
.console-tabs span { position: relative; }
.console-tabs .active { color: var(--paper); }
.console-tabs .active::after { position: absolute; right: 0; bottom: -21px; left: 0; height: 2px; background: var(--violet-bright); content: ""; }
.console-source-row { display: flex; gap: 6px; padding: 11px 0; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.console-source-row > span {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
  color: rgba(250, 250, 252, .55);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  font: 700 7px var(--font-mono);
  letter-spacing: .08em;
}
.source-state { display: inline-block; width: 5px; height: 5px; border: 1px solid rgba(250, 250, 252, .35); border-radius: 50%; }
.source-state.live { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 8px rgba(200, 255, 61, .45); }
.console-head { padding: 20px 0 15px; }
.console-head h2 { font-size: clamp(23px, 2.15vw, 31px); }
.priority-list { display: grid; gap: 6px; border-top: 0; }
.priority-item { padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--product-radius-sm); background: rgba(255, 255, 255, .018); }
.priority-item.active { margin: 0; padding: 12px; background: linear-gradient(90deg, rgba(91, 43, 255, .19), rgba(91, 43, 255, .06)); border-color: rgba(138, 102, 255, .28); box-shadow: inset 3px 0 0 var(--violet-bright); }
.priority-signal { padding: 4px 6px; background: rgba(200, 255, 61, .08); border: 1px solid rgba(200, 255, 61, .16); border-radius: 999px; font-size: 7px; }
.console-footer { align-items: center; }
.console-footer > span:first-child { display: flex; gap: 6px; align-items: center; color: var(--lime); }

/* Opportunity cards now read as actionable product objects. */
.concept-grid { gap: 12px; border: 0; }
.saas-concept-card {
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--product-radius);
  box-shadow: 0 16px 35px rgba(0, 0, 0, .14);
  transition: transform .3s var(--ease-out), border-color .3s ease;
}
.saas-concept-card:hover { transform: translateY(-4px); border-color: rgba(138, 102, 255, .42); }
.saas-concept-card.featured { border-color: rgba(138, 102, 255, .40); box-shadow: inset 0 3px 0 var(--violet-bright), 0 16px 35px rgba(0, 0, 0, .18); }
.concept-image { border-radius: var(--product-radius-sm); }
.concept-action {
  display: flex;
  justify-content: space-between;
  margin: 12px -12px -12px;
  padding: 13px 12px;
  color: rgba(250, 250, 252, .68);
  background: rgba(255, 255, 255, .025);
  border-top: 1px solid rgba(255, 255, 255, .09);
  font: 700 9px var(--font-mono);
  letter-spacing: .11em;
  text-decoration: none;
}
.concept-action:hover { color: var(--lime); background: rgba(200, 255, 61, .045); }

/* Branded signal path */
.signal-system {
  position: relative;
  display: grid;
  grid-template-columns: minmax(135px, 1fr) 42px minmax(135px, 1fr) 42px minmax(135px, 1fr) 42px minmax(135px, 1fr);
  align-items: center;
  margin-bottom: 22px;
  padding: 16px;
  background: var(--ink);
  border: 1px solid rgba(91, 43, 255, .22);
  border-radius: var(--product-radius);
  box-shadow: 0 14px 35px rgba(10, 10, 18, .08);
}
.signal-node { display: flex; gap: 11px; align-items: center; min-width: 0; padding: 11px; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--product-radius-sm); background: rgba(255, 255, 255, .035); }
.signal-icon { display: grid; flex: 0 0 28px; height: 28px; place-items: center; color: var(--violet-bright); background: rgba(138, 102, 255, .12); border: 1px solid rgba(138, 102, 255, .22); border-radius: 50%; font: 700 8px var(--font-mono); }
.signal-node small, .signal-node strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signal-node small { margin-bottom: 4px; color: rgba(250, 250, 252, .38); font: 700 7px var(--font-mono); letter-spacing: .12em; }
.signal-node strong { color: var(--paper); font-size: 11px; }
.signal-memory { border-color: rgba(200, 255, 61, .20); }
.signal-memory .signal-icon { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.signal-connector { position: relative; height: 1px; overflow: hidden; background: rgba(138, 102, 255, .25); }
.signal-connector::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; background: var(--violet-bright); border-radius: 50%; content: ""; }
.signal-connector i { position: absolute; top: -1px; left: -8px; width: 8px; height: 3px; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: signal-travel 2.7s linear infinite; }
.signal-connector:nth-of-type(4) i { animation-delay: .45s; }
.signal-connector:nth-of-type(6) i { animation-delay: .9s; }
@keyframes signal-travel { to { transform: translateX(54px); } }

.saas-concept .loop-steps { gap: 12px; }
.saas-concept .loop-card { border: 1px solid var(--line); border-radius: var(--product-radius); background: var(--paper); }
.saas-concept .loop-card:last-child { border-right: 1px solid var(--line); }
.loop-card.cycle { border-color: rgba(91, 43, 255, .38); box-shadow: inset 0 0 0 1px var(--violet), 0 14px 34px rgba(91, 43, 255, .08); }

.saas-brief { overflow: hidden; border-radius: var(--product-radius); box-shadow: 10px 10px 0 var(--violet), var(--product-shadow); }
.memory-grid { gap: 12px; border: 0; }
.memory-grid article { border: 1px solid rgba(91, 43, 255, .23); border-radius: var(--product-radius); background: rgba(250, 250, 252, .45); }
.saas-concept .price-card { border-radius: var(--product-radius); box-shadow: 0 14px 40px rgba(10, 10, 18, .07); }
.saas-concept .price-card-recommended { border-top-color: var(--violet); box-shadow: 0 18px 48px rgba(91, 43, 255, .12); }
.analysis-preview { overflow: hidden; border-radius: var(--product-radius); }

/* Audience fit */
.audience-section { border-top: 1px solid var(--line); }
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.audience-card {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--violet);
  border-radius: var(--product-radius);
  box-shadow: var(--product-shadow);
}
.audience-card-strategist { border-top-color: var(--lime-deep); }
.audience-card-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.audience-index { color: rgba(91, 43, 255, .45); font: 700 12px var(--font-mono); }
.audience-role { padding: 6px 8px; color: var(--violet); background: var(--violet-soft); border-radius: 999px; font: 700 9px var(--font-mono); letter-spacing: .1em; }
.audience-card-strategist .audience-role { color: var(--ink); background: rgba(200, 255, 61, .38); }
.audience-card h3 { max-width: 19ch; margin: 32px 0 18px; font-size: clamp(27px, 3vw, 40px); line-height: 1.02; letter-spacing: -.035em; }
.audience-card > p { max-width: 55ch; margin: 0; color: var(--slate); font-size: 14px; line-height: 1.65; }
.audience-card ul { margin: 28px 0 0; padding: 0; list-style: none; }
.audience-card li { position: relative; padding: 13px 0 13px 22px; border-top: 1px solid var(--line); color: var(--ink); font-size: 13px; line-height: 1.45; }
.audience-card li::before { position: absolute; top: 19px; left: 2px; width: 6px; height: 6px; background: var(--lime-deep); border-radius: 50%; content: ""; }
.audience-card .audience-outcome { margin-top: 28px; padding: 18px 20px; color: var(--ink); background: var(--violet-soft); border-left: 3px solid var(--violet); font-family: var(--font-serif); font-size: 18px; font-style: italic; line-height: 1.4; }
.audience-card-strategist .audience-outcome { background: rgba(200, 255, 61, .18); border-left-color: var(--lime-deep); }

/* Compact category comparison */
.category-comparison {
  display: grid;
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  gap: clamp(28px, 5vw, 72px);
  margin-top: 18px;
  padding: clamp(28px, 4vw, 46px);
  color: var(--paper);
  background-color: var(--ink);
  background-image: linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 38px 38px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--product-radius);
  box-shadow: var(--product-shadow);
}
.comparison-kicker { margin: 0; color: var(--lime); font: 700 9px var(--font-mono); letter-spacing: .14em; }
.comparison-intro h3 { max-width: 12ch; margin: 20px 0 0; color: var(--paper); font-size: clamp(26px, 3vw, 40px); line-height: 1.02; letter-spacing: -.035em; }
.comparison-table { min-width: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.comparison-head,
.comparison-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
.comparison-head { padding: 0 0 12px; color: rgba(250, 250, 252, .42); font: 700 8px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; transform: translateY(-100%); }
.comparison-head span:last-child { color: var(--violet-bright); }
.comparison-row { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.comparison-row:first-of-type { border-top: 0; }
.comparison-row span { color: rgba(250, 250, 252, .52); font-size: 12px; line-height: 1.45; }
.comparison-row strong { position: relative; padding-left: 18px; color: var(--paper); font-size: 12px; line-height: 1.45; }
.comparison-row strong::before { position: absolute; top: .48em; left: 0; width: 6px; height: 6px; background: var(--lime); border-radius: 50%; content: ""; }

/* Customer proof carousel */
.proof-section { overflow: hidden; background: var(--violet-soft); border-top: 1px solid rgba(91, 43, 255, .16); border-bottom: 1px solid rgba(91, 43, 255, .16); }
.testimonial-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end; margin-bottom: 44px; }
.testimonial-controls { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; }
.testimonial-count { min-width: 62px; margin-right: 5px; color: var(--fog); font: 700 10px var(--font-mono); letter-spacing: .1em; }
.testimonial-arrow { display: grid; width: 42px; height: 42px; place-items: center; color: var(--ink); background: rgba(250, 250, 252, .7); border: 1px solid rgba(91, 43, 255, .2); border-radius: var(--product-radius-sm); cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.testimonial-arrow:hover:not(:disabled) { color: var(--paper); background: var(--violet); border-color: var(--violet); }
.testimonial-arrow:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.testimonial-arrow:disabled { opacity: .32; cursor: default; }
.testimonial-carousel { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; }
.testimonial-track { display: flex; gap: 14px; padding: 0 max(40px, calc((100vw - 1360px) / 2 + 40px)) 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: max(40px, calc((100vw - 1360px) / 2 + 40px)); scroll-snap-type: x mandatory; scrollbar-width: none; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.testimonial-card { display: flex; flex: 0 0 clamp(440px, 43vw, 610px); flex-direction: column; min-height: 530px; margin: 0; padding: clamp(26px, 3vw, 38px); background: rgba(250, 250, 252, .82); border: 1px solid rgba(91, 43, 255, .2); border-radius: var(--product-radius); scroll-snap-align: start; box-shadow: 0 16px 44px rgba(91, 43, 255, .08); }
.testimonial-card figcaption { display: flex; gap: 14px; align-items: center; }
.testimonial-card figcaption img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px rgba(91, 43, 255, .28); }
.testimonial-card figcaption span,
.testimonial-card figcaption strong,
.testimonial-card figcaption small { display: block; }
.testimonial-card figcaption strong { color: var(--ink); font-size: 15px; }
.testimonial-card figcaption small { margin-top: 5px; color: var(--fog); font: 700 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.testimonial-card blockquote { flex: 1; margin: 38px 0 30px; color: var(--ink); font-family: var(--font-serif); font-size: clamp(20px, 2vw, 27px); line-height: 1.4; }
.testimonial-card > p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-top: 16px; border-top: 1px solid rgba(91, 43, 255, .15); color: var(--violet); font: 700 8px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.testimonial-privacy { margin-top: 20px; color: var(--fog); font: 700 9px/1.6 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }

/* Volume pricing configurator */
.pricing-configurator { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--product-radius); box-shadow: var(--product-shadow); }
.pricing-controls { padding: clamp(28px, 4vw, 52px); }
.pricing-control + .pricing-control { margin-top: 42px; }
.pricing-control-head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.pricing-control-head label { color: var(--ink); font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.025em; }
.pricing-control-head output { min-width: 54px; color: var(--violet); font: 700 clamp(28px, 3.2vw, 42px) var(--font-mono); text-align: right; }
.pricing-control input[type="range"] {
  --range-progress: 0%;
  width: 100%;
  height: 6px;
  margin: 25px 0 10px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--violet) 0 var(--range-progress), rgba(91, 43, 255, .16) var(--range-progress) 100%);
  border-radius: 999px;
  cursor: pointer;
}
.pricing-control input[type="range"]::-webkit-slider-thumb { width: 23px; height: 23px; appearance: none; -webkit-appearance: none; background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--violet); }
.pricing-control input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--lime); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--violet); }
.pricing-control input[type="range"]:focus-visible { outline: 2px solid var(--violet); outline-offset: 10px; }
.range-scale { display: flex; justify-content: space-between; color: var(--fog); font: 700 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pricing-control > p { max-width: 62ch; margin: 14px 0 0; color: var(--fog); font-size: 11px; line-height: 1.55; }
.pricing-estimate { display: flex; flex-direction: column; padding: clamp(30px, 4vw, 48px); color: var(--paper); background-color: var(--ink); background-image: linear-gradient(to right, rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 38px 38px; border-left: 1px solid rgba(255, 255, 255, .1); }
.estimate-kicker { margin: 0; color: var(--violet-bright); font: 700 9px var(--font-mono); letter-spacing: .14em; }
.estimate-price { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 34px; }
.estimate-price span { color: var(--lime); font-size: clamp(52px, 6vw, 78px); font-weight: 800; line-height: .82; letter-spacing: -.06em; }
.estimate-price small { padding-bottom: 6px; color: rgba(250, 250, 252, .48); font: 700 9px var(--font-mono); letter-spacing: .08em; }
.estimate-summary { margin: 24px 0 0; color: rgba(250, 250, 252, .74); font-size: 14px; }
.estimate-breakdown { margin: 34px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.estimate-breakdown div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.estimate-breakdown dt, .estimate-breakdown dd { margin: 0; font: 700 9px/1.4 var(--font-mono); letter-spacing: .07em; }
.estimate-breakdown dt { color: rgba(250, 250, 252, .4); text-transform: uppercase; }
.estimate-breakdown dd { color: var(--paper); text-align: right; }
.estimate-includes { margin: 30px 0; padding: 0; list-style: none; }
.estimate-includes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 8px 0; color: rgba(250, 250, 252, .72); font-size: 12px; line-height: 1.4; }
.estimate-includes li span { color: var(--lime); }
.pricing-estimate .btn { margin-top: auto; }
.pricing-model-note { max-width: 820px; margin: 18px 0 0; color: var(--fog); font: 700 9px/1.6 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }

.mobile-sticky-cta { display: none; }

@media (max-width: 1180px) {
  .console-tabs span:not(.active) { display: none; }
  .signal-system { grid-template-columns: minmax(120px, 1fr) 28px minmax(120px, 1fr) 28px minmax(120px, 1fr) 28px minmax(120px, 1fr); }
}

@media (max-width: 1080px) {
  .saas-concept .hero-grid { grid-template-columns: 1fr; }
  .strategy-console { width: min(800px, calc(100% - 28px)); }
  .pricing-configurator { grid-template-columns: 1fr; }
  .pricing-estimate { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
}

@media (max-width: 900px) {
  .testimonial-head { grid-template-columns: 1fr; gap: 22px; }
  .testimonial-controls { justify-content: flex-end; }
}

@media (max-width: 820px) {
  .audience-grid { grid-template-columns: 1fr; }
  .category-comparison { grid-template-columns: 1fr; gap: 42px; }
  .comparison-intro h3 { max-width: 17ch; }
  .output-head { grid-template-columns: 1fr; gap: 22px; }
  .output-controls { justify-content: flex-end; }
  .signal-system { grid-template-columns: 1fr; gap: 0; }
  .signal-connector { width: 1px; height: 22px; margin-left: 25px; background: rgba(138, 102, 255, .25); }
  .signal-connector::after { top: auto; right: -2px; bottom: 0; }
  .signal-connector i { top: -6px; left: -1px; width: 3px; height: 7px; animation-name: signal-travel-mobile; }
  @keyframes signal-travel-mobile { to { transform: translateY(28px); } }
}

@media (max-width: 760px) {
  .hero-url-form { grid-template-columns: 1fr; }
  .hero-url-form .btn { width: 100%; }
  .hero-url-error { grid-column: 1; }
  .category-comparison { margin-top: 14px; padding: 28px 22px 22px; }
  .comparison-head,
  .comparison-row { gap: 16px; }
  .mobile-sticky-cta {
    position: fixed;
    z-index: 88;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 14px;
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    color: var(--ink);
    background: var(--lime);
    border: 1px solid rgba(10, 10, 18, .2);
    border-radius: var(--product-radius-sm);
    box-shadow: 0 12px 34px rgba(10, 10, 18, .24);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px));
    transition: opacity .25s ease, transform .35s var(--ease-out);
  }
  .mobile-sticky-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .output-track { padding-right: 20px; padding-left: 20px; scroll-padding-inline: 20px; }
  .output-card { flex-basis: min(82vw, 340px); }
  .nav-product-badge { display: none; }
  .strategy-console { grid-template-columns: 42px minmax(0, 1fr); width: calc(100% - 16px); box-shadow: 8px 8px 0 var(--violet), 14px 14px 0 rgba(200, 255, 61, .32); }
  .console-rail { gap: 10px; padding: 12px 4px; }
  .console-rail > img { width: 24px; height: 24px; }
  .rail-item { width: 30px; height: 30px; }
  .rail-avatar { width: 23px; height: 23px; }
  .console-workspace { padding: 0 14px 14px; }
  .console-tabs { display: none; }
  .console-source-row { margin-right: -14px; padding-right: 14px; }
  .saas-concept-card:hover { transform: none; }
  .pricing-controls,
  .pricing-estimate { padding: 28px 22px; }
  .testimonial-track { padding-right: 20px; padding-left: 20px; scroll-padding-inline: 20px; }
  .testimonial-card { flex-basis: calc(100vw - 40px); min-height: 570px; padding: 24px 22px; }
}

@media (max-width: 460px) {
  .output-head { margin-bottom: 30px; }
  .output-card { flex-basis: 82vw; }
  .output-card-copy { padding: 24px 18px 18px; }
  .nav-app-mark { width: 29px; height: 29px; }
  .saas-concept .nav-brand .wordmark { font-size: 18px; }
  .strategy-console { grid-template-columns: 40px minmax(0, 1fr); }
  .console-rail { padding-right: 3px; padding-left: 3px; }
  .rail-item { width: 28px; height: 28px; }
  .console-brand small { display: none; }
  .signal-system { margin-right: -2px; margin-left: -2px; padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-connector i { animation: none; }
  .saas-concept-card { transition: none; }
  .output-card img { transition: none; }
  .mobile-sticky-cta { transition: none; }
}

/* ---- pricing checkout (leads to Stripe) ---- */
.estimate-checkout { display: grid; gap: 10px; margin-top: 30px; }
.estimate-checkout input {
  width: 100%; padding: 13px 14px; color: var(--paper);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px; font: 500 14px var(--font-sans);
}
.estimate-checkout input::placeholder { color: rgba(250, 250, 252, .42); }
.estimate-checkout input:focus { outline: none; border-color: var(--violet-bright); }
.estimate-checkout input[aria-invalid="true"] { border-color: #ff7a7a; }
.estimate-checkout .btn { margin-top: 2px; }
.checkout-error { display: none; color: #ff9d9d; font-size: 13px; }
.checkout-error.visible { display: block; }
.estimate-alt { margin: 6px 0 0; color: rgba(250, 250, 252, .55); font-size: 12.5px; line-height: 1.55; }
.estimate-alt a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.nav-signup { font-weight: 700; }