@import url("/cambrain/section-badges.css");
@import url("/cambrain/subtext-brackets.css");
/* Middle Things sizing baseline, measured at 1440 and 390px on 2026-09-14.
   Keep CamBrain content, fonts, colors and media aspect ratios. */
:root{--cb-reference-width:1280px;--cb-reference-gutter:24px;--cb-reference-title:42px}
#cambrain-hero .cb-hero__layout{max-width:var(--cb-reference-width);padding-inline:24px}
#cambrain-hero .cb-hero__support>p{font-size:17px;line-height:1.6}
#cambrain-hero .cb-hero__product{font-size:20px}
#cambrain-hero .cb-hero__eyebrow{font-size:14px}
#cambrain-hero .cb-hero__actions a{border-radius:14px;font-size:13px;min-height:44px}
/* Fit both equal-width hero actions at 320px without clipping their labels. */
@media(max-width:359px){
 #cambrain-hero .cb-hero__actions a{font-size:12px;gap:4px;padding-inline:4px}
}
:is(#cambrain-platform, #cambrain-platform-draft){padding:100px 24px 70px}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__inner{max-width:1232px}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__description{font-size:16px;line-height:1.6}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-title{font-size:var(--cb-reference-title)!important;line-height:1.08!important;letter-spacing:-.025em}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-title__lead{font-size:17px!important;line-height:1.55!important}
#cambrain-workflow .cb-workflow__inner{max-width:1280px;padding:100px 24px 70px}
#cambrain-workflow .cb-section-title__lead{font-size:17px!important;line-height:1.55!important}
#cambrain-workflow .cb-workflow__title-intro{font-size:16px!important;line-height:1.6!important;margin-top:18px}
#cambrain-workflow .cb-workflow__title-stack{font-size:clamp(32px,4.4vw,56px)!important;line-height:1.08!important}

#how-it-works .cb-steps__inner{max-width:1280px;padding:100px 24px 70px}
#how-it-works h2,#how-it-works h2>strong{font-size:var(--cb-reference-title);line-height:1.08}
#how-it-works .cb-steps__intro{font-size:16px;line-height:1.6}
#how-it-works h3{font-size:18px}
#how-it-works .cb-steps__copy{padding:16px}
#cambrain-telegram .cb-telegram__layout{max-width:1280px;padding:100px 24px 70px;gap:48px}
#cambrain-telegram h2{font-size:var(--cb-reference-title);line-height:1.08;font-weight:600}
/* Remaining inherited landing sections share the same content measure. */
:is(#product,#parallel,#security,#pricing,#faq)>div.mx-auto{max-width:1280px;margin-inline:auto;padding:100px 24px 70px}
:is(#product,#parallel,#security,#pricing,#faq) h2{font-size:var(--cb-reference-title);line-height:1.08;letter-spacing:-.025em}
@media(min-width:1200px){
 #cambrain-hero .cb-hero__layout{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:32px;min-height:680px}
 #cambrain-hero .cb-hero__copy{--cb-hero-natural-flow:1;--cb-hero-copy-scale:1;--cb-hero-title-size:clamp(48px,4vw,60px);transform:none}
 #cambrain-hero .cb-hero__media{width:100%;max-width:100%;min-width:0}
 #cambrain-hero .cb-hero__macbook{height:calc((100cqh - var(--cb-hero-control-gap) - var(--cb-hero-control-height)) * 2564 / 2296);width:auto;max-width:none;top:calc((100cqh - var(--cb-hero-control-gap) - var(--cb-hero-control-height)) * -245 / 2296);bottom:auto;left:50%;transform:translateX(-50%)}
}
@media(max-width:900px){
 :is(#cambrain-platform, #cambrain-platform-draft){padding:58px 20px 36px}
 #cambrain-workflow .cb-workflow__inner,#how-it-works .cb-steps__inner,#cambrain-telegram .cb-telegram__layout{padding:58px 20px 36px}
 #cambrain-hero .cb-hero__copy{--cb-hero-title-size:clamp(36px,6vw,56px)}
 #cambrain-telegram .cb-telegram__layout{gap:32px}
}
@media(max-width:600px){
 #cambrain-hero .cb-hero__copy{--cb-hero-title-size:40px}
 #cambrain-hero .cb-hero__layout{padding-inline:20px}
 :is(#cambrain-platform, #cambrain-platform-draft) .cb-section-title,#how-it-works h2,#how-it-works h2>strong,#cambrain-telegram h2{font-size:28px!important}
}

@media(max-width:900px){:is(#product,#parallel,#security,#pricing,#faq)>div.mx-auto{padding:58px 20px 36px}}

@media(max-width:760px){:root{--cb-reference-title:28px}}

/* Shared UI corner rule; preserve artwork and SVG icon geometry. */
:root { --cb-ui-radius: 4px; }
html body *:not(img):not(video):not(canvas):not(svg):not(svg *) {
  border-radius: var(--cb-ui-radius) !important;
}
/* Decorative pseudo-elements keep their component-defined geometry.
   A global radius here rounds corner brackets and distorts lines and markers. */

/* Approved section labels: match the Telegram green outline. */
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-gaffer,
#cambrain-workflow .cb-section-gaffer {
  height: auto;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #195844;
  border-radius: 4px;
  background: transparent;
  transform: none;
}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-gaffer > img,
#cambrain-workflow .cb-section-gaffer > img { display: none; }
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-gaffer > span,
#cambrain-workflow .cb-section-gaffer > span {
  color: #00d6a3;
  font: 400 12px/18px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: .1em;
  white-space: normal;
  text-align: center;
}

/* Phrase-level emphasis keeps section headings readable and consistent. */
:is(#cambrain-platform, #cambrain-platform-draft) .cb-section-gaffer {
  min-height: 0;
  padding: 4px 12px;
  background: rgba(0,229,160,.12);
  border-color: rgba(0,229,160,.25);
}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__heading .cb-section-gaffer > span,
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__heading .cb-section-gaffer > span > span {
  color: #00e5a0;
  font: 400 12px/1.5 'Space Mono', monospace !important;
  letter-spacing: .1em;
}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__prompt {
  font: inherit;
  animation: cb-platform-prompt 1s steps(1, end) infinite;
}
:is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__heading .cb-section-gaffer > span {
  padding-inline-end: 2ch;
}
@keyframes cb-platform-prompt { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :is(#cambrain-platform, #cambrain-platform-draft) .cb-platform__prompt { animation: none; }
}
body h2 { color: #f1f5f3 !important; background-image: none !important; -webkit-text-fill-color: currentColor; }
body h2 .cb-title-accent,
body h2 .italic,
#cambrain-steps-title strong,
#cambrain-workflow .cb-workflow__title-line { color: #00d6a3 !important; -webkit-text-fill-color: currentColor; }
body h2 .cb-title-accent { font: inherit !important; letter-spacing: inherit; }

/* Build emphasis across the three phrases without shifting the text over time. */
#cambrain-workflow .cb-workflow__title-stack { gap:10px; }
#cambrain-workflow .cb-workflow__title-line:nth-child(1) { font-size:.72em!important; color:rgba(0,214,163,.55)!important; }
#cambrain-workflow .cb-workflow__title-line:nth-child(2) { font-size:.92em!important; color:rgba(0,214,163,.78)!important; }
#cambrain-workflow .cb-workflow__title-line:nth-child(3) { font-size:1.16em!important; color:#00d6a3!important; }

#how-it-works .cb-steps__eyebrow { display:inline-block; align-self:flex-start; margin:0; padding:8px 10px; border:1px solid #195844; border-radius:4px; background:transparent; color:#00d6a3; font:400 12px/18px Inter,Pretendard,sans-serif; letter-spacing:.1em; }
#how-it-works #cambrain-steps-title > span { color:#f1f5f3; }

/* Use-case UI sits over the storage section's existing parallax scenery. */
.cb-usecases-transplant { display:block; width:100%; text-align:left; }
.cb-usecases-transplant #product { background:transparent; }
.cb-usecases-transplant #product > div[aria-hidden="true"] { display:none; }
/* Keep Korean report heading phrases intact on narrow screens. */
.cb-usecases-transplant #product h2 { word-break:keep-all; }
.cb-usecases-transplant #product h2 > span { white-space:normal; }

/* CamBrain report typography, scoped away from placeholder artwork. */
.cb-usecases-transplant #product h2 {
  font-family:Pretendard,Inter,sans-serif!important;
  font-weight:700!important;
  font-style:normal;
  line-height:1.18!important;
  letter-spacing:-.035em;
  color:#f1f5f3;
  background:none!important;
  -webkit-text-fill-color:currentColor;
}
.cb-usecases-transplant #product h2 > span {
  font-family:inherit!important;
  font-weight:inherit;
  font-style:normal!important;
  color:#00d6a3;
  word-break:keep-all;
}
.cb-usecases-transplant #product > div.mx-auto > div:first-child > div:first-child > p {
  display:inline-flex;
  padding:8px 10px;
  border:1px solid #195844;
  border-radius:4px;
  font:400 12px/18px Inter,Pretendard,sans-serif!important;
  letter-spacing:.1em;
  color:#00d6a3;
}
.cb-usecases-transplant #product > div.mx-auto > div:first-child > div:first-child > p svg { display:none; }
.cb-usecases-transplant #product button[aria-expanded] > span {
  font-family:Pretendard,Inter,sans-serif!important;
  font-weight:600;
  font-size:22px;
  line-height:1.35;
  letter-spacing:-.025em;
  color:#e2e8e5;
}
.cb-usecases-transplant #product button[aria-expanded="true"] > span { color:#00d6a3; }
.cb-usecases-transplant #product > div.mx-auto > div:first-child p:not(:first-child),
.cb-usecases-transplant #product > div.mx-auto > div:first-child > div:last-child p,
.cb-usecases-transplant #product button[aria-expanded] + div p {
  font-family:Pretendard,Inter,sans-serif!important;
  font-size:16px;
  line-height:1.65;
  color:#a7b3ad;
  word-break:keep-all;
}
@media(max-width:639px) {
 .cb-usecases-transplant #product h2 { font-size:28px!important; }
 .cb-usecases-transplant #product button[aria-expanded] > span { font-size:20px; }
}

/* Keep the shared 40px headline with relaxed tracking on narrow phones. */
@media(max-width:350px){
 #cambrain-hero .cb-hero__layout{padding-inline:16px}
}

/* Readable descriptive copy; preserve type scale and accent text. */
:root{--cb-description-ink:#cbd5cf}
:is(#cambrain-hero,:is(#cambrain-platform, #cambrain-platform-draft),#cambrain-workflow,#how-it-works,#cambrain-telegram,#product,#parallel,#security,#pricing,#faq) p:not([class*="eyebrow"]):not([class*="label"]):not([class*="product"]):not([class*="kicker"]){color:var(--cb-description-ink)}
.cb-usecases-transplant #product button[aria-expanded] + div p{color:var(--cb-description-ink)}

/* Rectangular controls and labels: approved 3px corners. */
html body :is(.surface-chip, .surface-chip-dark, .cb-language > summary,
  .cb-hero__primary, .cb-hero__secondary,
  .cb-hero__ai-badge, .cb-section-gaffer, .cb-section-badge,
  .cb-ms-features__tab, .cb-ms-features__track-label, .cb-ms-features__link) {
  --cb-ui-radius: 3px;
  border-radius: 3px !important;
}

/* Focus uses a surface tint instead of an enclosing selection outline. */
html body :focus,
html body :focus-visible {
  outline: none !important;
}
html body :is(a, button, summary, input, select, textarea, [role="tab"], [role="button"]):focus-visible {
  background-image: linear-gradient(rgba(0, 229, 160, .18), rgba(0, 229, 160, .18)) !important;
}