/* Bubble Studio — shared public-site system, 2026. */
:root {
  --canvas: #f4f3ef;
  --canvas-subtle: #eeede8;
  --panel: #ffffff;
  --panel-soft: #f7f6f2;
  --panel-strong: #deddd7;
  --text: #0b0b0b;
  --text-dim: #565650;
  --text-faint: #6f6e67;
  --border: #d8d7d1;
  --border-strong: #aaa9a2;
  --brand: #0b0b0b;
  --brand-strong: #000000;
  --brand-soft: #ecebe6;
  --action: #0b0b0b;
  --action-hover: #292929;
  --action-text: #ffffff;
  --success: #176b4d;
  --success-soft: #e2efe8;
  --warning: #7b5310;
  --warning-soft: #f5ecd8;
  --danger: #9d2d28;
  --danger-soft: #f6e5e3;
  --focus: #0b0b0b;
  --header: rgba(244, 243, 239, .92);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .04);
  --shadow-md: 0 28px 80px rgba(0, 0, 0, .13);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --ink-panel: #0b0b0b;
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0b0b0b;
    --canvas-subtle: #121212;
    --panel: #181818;
    --panel-soft: #202020;
    --panel-strong: #303030;
    --text: #f7f7f3;
    --text-dim: #b7b6af;
    --text-faint: #8d8c85;
    --border: #30302e;
    --border-strong: #51514e;
    --brand: #f7f7f3;
    --brand-strong: #ffffff;
    --brand-soft: #242424;
    --action: #f7f7f3;
    --action-hover: #dfded8;
    --action-text: #0b0b0b;
    --success: #70c69f;
    --success-soft: #183729;
    --warning: #e2b567;
    --warning-soft: #3e301a;
    --danger: #f09691;
    --danger-soft: #422321;
    --focus: #ffffff;
    --header: rgba(11, 11, 11, .9);
    --ink-panel: #f7f7f3;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-md: 0 30px 88px rgba(0, 0, 0, .42);
  }
}

body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-feature-settings: "kern" 1, "ss01" 1;
}

.site-page,
.site-page::before {
  background: var(--canvas);
  background-image: none;
}

.site-page::before { display: none; }

.icon {
  width: 1.1em;
  height: 1.1em;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-shell { width: min(1240px, calc(100% - 56px)); }

.site-header {
  top: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--header);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.site-header .brand img {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand span { font-size: 21px; font-weight: 790; letter-spacing: -.055em; }
.nav-link { min-height: 44px; border-radius: 9px; color: var(--text-dim); font-size: 13px; font-weight: 650; }
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--panel-strong); color: var(--text); }

.button {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -.012em;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--action); color: var(--action-text); box-shadow: none; }
.button-primary:hover { background: var(--action-hover); box-shadow: none; }
.button-secondary { border-color: var(--border); background: var(--panel); box-shadow: none; }
.button-secondary:hover { border-color: var(--border-strong); background: var(--panel-soft); }
.button-arrow::after { display: none; content: none; }
.button-arrow .icon { width: 16px; height: 16px; transition: transform 150ms ease; }
.button-arrow:hover .icon { transform: translateX(2px); }

.update-status {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-link { border-radius: 9px; background: var(--text); color: var(--canvas); box-shadow: var(--shadow-sm); }

.home-hero {
  min-height: min(790px, calc(100vh - 76px));
  grid-template-columns: minmax(0, .92fr) minmax(450px, 1.08fr);
  gap: clamp(54px, 7vw, 108px);
  padding: 88px 0 104px;
}

.eyebrow {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--text);
  box-shadow: none;
}

.hero-copy h1 {
  max-width: 9.7ch;
  font-family: var(--display);
  font-size: clamp(58px, 6.6vw, 86px);
  font-weight: 720;
  letter-spacing: -.075em;
  line-height: .92;
}

.hero-copy h1 em {
  display: inline;
  color: var(--text-faint);
  font-family: inherit;
  font-style: normal;
  font-weight: 470;
}

.hero-copy .tagline { max-width: 56ch; margin-top: 28px; color: var(--text-dim); font-size: clamp(17px, 1.7vw, 20px); }
.hero-actions { margin-top: 34px; }
.hero-actions .button { min-height: 50px; border-radius: 13px; }
.availability::before { background: var(--success); box-shadow: none; }

.hero-stage {
  min-height: 610px;
  padding: 30px;
  border: 0;
  border-radius: 34px 34px 34px 10px;
  background: #0b0b0b;
  background-image: none;
  box-shadow: var(--shadow-md);
  color: #ffffff;
}

.hero-stage::before {
  content: "EIGHT PERSPECTIVES · ONE ANSWER";
  position: absolute;
  top: 27px;
  right: 30px;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, .44);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .13em;
  animation: none;
}

.hero-stage::after { display: none; }
.stage-question, .stage-answer, .stage-draft { border-color: rgba(255, 255, 255, .13); background: #171717; color: #ffffff; backdrop-filter: none; }
.stage-question { margin-top: 42px; border-radius: 19px 19px 5px 19px; box-shadow: none; }
.stage-kicker { color: rgba(255, 255, 255, .5); }
.stage-kicker img { filter: invert(1); }
.stage-council { gap: 10px; }
.role-stack { border-color: rgba(255, 255, 255, .12); border-radius: 17px; background: #111111; backdrop-filter: none; }
.role-stack-label { color: rgba(255, 255, 255, .45); }
.role-pill { min-height: 37px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 9px; background: #1c1c1c; color: rgba(255, 255, 255, .78); }
.role-pill::before, .role-pill:nth-child(3)::before, .role-pill:nth-child(4)::before { border-radius: 6px; background: #ffffff; color: #0b0b0b; box-shadow: none; }
.stage-draft { min-height: 286px; border-radius: 17px; }
.draft-status { color: #a9dec5; }
.draft-status::before { box-shadow: none; }
.draft-lines span { background: #343434; }
.draft-score { border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); }
.draft-score strong { color: #ffffff; font-family: inherit; font-size: 22px; font-weight: 700; }
.stage-answer { left: 68px; border-radius: 19px 19px 5px 19px; background: #ffffff; color: #0b0b0b; box-shadow: 0 18px 38px rgba(0, 0, 0, .3); }
.stage-answer p { color: #5c5c58; }

.signal-row { border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: none; backdrop-filter: none; }
.signal-number { color: var(--text); font-family: inherit; font-size: 27px; font-weight: 760; }
.site-section { padding: 118px 0; border-color: var(--border); }
.section-heading h2, .section-copy h2 { font-family: inherit; font-size: clamp(39px, 4.8vw, 58px); font-weight: 650; letter-spacing: -.06em; line-height: 1.02; }
.section-heading p, .section-copy p { font-size: 16.5px; }
.section-grid { gap: clamp(48px, 8vw, 112px); }

.feature-grid, .pricing-grid, .download-grid, .use-grid { gap: 12px; }
.feature-card, .process-step, .price-card, .platform-card, .callout, .privacy-panel, .use-card, .update-card, .contact-card {
  background: var(--panel);
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

.feature-card { min-height: 228px; border-radius: 20px; background: var(--panel); transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease; }
.feature-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.feature-card:nth-child(2), .feature-card:nth-child(3), .feature-card:nth-child(2):hover, .feature-card:nth-child(3):hover { transform: none; }
.feature-icon, .step-number, .platform-icon, .use-icon {
  border-radius: 10px;
  background: var(--text);
  background-image: none;
  color: var(--canvas);
  box-shadow: none;
}
.feature-icon .icon, .platform-icon .icon { width: 19px; height: 19px; }
.feature-card:nth-child(2n) .feature-icon { background: var(--panel-strong); color: var(--text); }

.process-grid { border-radius: 22px; background: var(--panel); box-shadow: none; }
.process-grid::before { display: none; }
.step-number { background: var(--panel-soft); color: var(--text-dim); }

.trust-panel {
  padding: clamp(38px, 5.5vw, 68px);
  border-radius: 28px 28px 28px 8px;
  background: #0b0b0b;
  background-image: none;
  box-shadow: none;
}
.trust-panel::after { display: none; }
.trust-panel h2 { font-family: inherit; font-weight: 650; letter-spacing: -.055em; }
.trust-check { background: #ffffff; color: #0b0b0b; box-shadow: none; }
.trust-check .icon { width: 14px; height: 14px; stroke-width: 2.6; }

.use-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.use-card, .use-card.local, .use-card.web { background: var(--panel); }
.use-card::after { display: none; }
.use-card h3 { font-family: inherit; font-weight: 670; }
.use-label, .plan-label { color: var(--text-faint); }
.price-card.featured { background: var(--panel-soft); }
.price { font-family: inherit; font-weight: 680; }
.check-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 8px; padding-left: 0; }
.check-list li::before, .spec-list li::before { display: none; content: none; }
.check-list .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--text); stroke-width: 2.4; }
.privacy-panel { background: var(--panel); }
.privacy-panel h2 { font-family: inherit; font-weight: 670; }

.page-hero { max-width: 890px; padding: 92px 0 66px; }
.page-hero::after, .legal::after { display: none; }
.back { gap: 8px; color: var(--text-dim); font-weight: 680; }
.back .icon { width: 16px; height: 16px; }
.back:hover { color: var(--text); }
.page-hero h1, .legal h1 { font-family: inherit; font-size: clamp(50px, 6.2vw, 76px); font-weight: 680; letter-spacing: -.07em; line-height: .96; }
.page-hero .lead { font-size: 18px; }

.download-spotlight {
  border-radius: 28px 28px 28px 8px;
  background: #0b0b0b;
  background-image: none;
  box-shadow: none;
}
.download-spotlight::after { display: none; }
.download-spotlight h2 { font-family: inherit; font-weight: 650; letter-spacing: -.055em; }
.app-weight { border-radius: 28px; background: var(--panel); box-shadow: none; }
.weight-dot, .update-icon { border-radius: 10px; background: var(--panel-strong); color: var(--text); }
.weight-dot .icon, .update-icon .icon { width: 17px; height: 17px; }
.platform-card, .platform-card.primary-platform { background: var(--panel); }
.platform-card h3 { font-family: inherit; font-weight: 680; }
.platform-icon { width: 44px; height: 44px; }
.update-card { background: var(--panel); }
.callout { background: var(--panel); }
.callout h2, .callout h3, .content-section h2 { font-family: inherit; font-weight: 670; }
.contact-card { background: var(--panel); }
.contact-card::after { display: none; }
.contact-card h2 { font-family: inherit; font-weight: 670; }

.faq-item summary { position: relative; padding-right: 44px; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--text);
  transform: none;
}
.faq-item summary::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 16px;
  width: 12px;
  height: 12px;
  background: linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat,
              linear-gradient(var(--text), var(--text)) center / 1.5px 12px no-repeat;
}
.faq-item[open] summary::before { background: linear-gradient(var(--text), var(--text)) center / 12px 1.5px no-repeat; }
.faq-item[open] summary::after { content: ""; transform: none; }

.legal { max-width: 820px; margin-inline: auto; padding: 88px 0 112px; }
.legal::before { color: var(--text-faint); }
.legal h2 { font-family: inherit; font-weight: 670; }
.legal a { color: var(--text); }
.table-wrap, .legal code { background: var(--panel); }
.site-footer { border-top: 1px solid var(--border); padding-top: 30px; }
.site-footer a:hover { color: var(--text); }

@media (max-width: 1080px) {
  .home-hero { grid-template-columns: 1fr; padding-top: 76px; }
  .hero-copy { text-align: center; }
  .hero-copy h1, .hero-copy .tagline { margin-inline: auto; }
  .hero-copy .eyebrow, .hero-actions, .availability { margin-inline: auto; justify-content: center; }
  .hero-stage { width: min(640px, 100%); margin-inline: auto; }
}

@media (max-width: 780px) {
  .site-shell { width: min(100% - 28px, 1240px); }
  .site-header { top: 0; min-height: 66px; margin-top: 0; grid-template-columns: auto auto; }
  .site-nav { display: none; }
  .site-actions { justify-self: end; }
  .home-hero { padding-top: 62px; }
  .hero-stage { min-height: 580px; padding: 20px; border-radius: 26px 26px 26px 8px; }
  .hero-stage::before { right: 20px; }
  .use-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .hero-copy h1 { font-size: clamp(50px, 15.5vw, 72px); }
  .hero-stage { min-height: 590px; }
  .stage-answer { left: 32px; }
  .page-hero h1, .legal h1 { font-size: 46px; }
  .button { width: auto; }
  .platform-download-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}