/* JSQ: shared services above the modem. Scoped to the concept page. */
.brand-openjsq.brand-openjsq { display:inline; color:var(--ink); font:inherit; margin:0; white-space:nowrap; }
.concept-page .page-head { padding-top:60px; padding-bottom:40px; background:linear-gradient(135deg,#10213a,transparent 78%); }
.concept-page h1 { max-width:29ch; font-size:clamp(36px,4.6vw,60px); font-weight:700; line-height:1.08; letter-spacing:-.025em; }
.concept-page .page-head .lede { max-width:68ch; margin:26px 0 16px; font-size:22px; line-height:1.5; color:#d2deed; }
.concept-thesis { max-width:72ch; margin-bottom:30px; color:#b4d7ff; font-size:17px; }
.concept-page .jump-links { gap:8px 24px; margin-bottom:0; font-size:15px; }
.concept-page .jump-links a { padding:8px 0; text-decoration:none; border-bottom:1px solid #355a83; }
.concept-section { max-width:var(--max); margin:0 auto; padding:52px var(--gutter); border-bottom:1px solid var(--line); scroll-margin-top:24px; }
.concept-section h2 { max-width:35ch; margin-bottom:24px; }
.concept-section h3 { font-size:23px; line-height:1.25; margin-bottom:16px; }
.concept-section p { max-width:78ch; }
.concept-section .section-intro { font-size:20px; line-height:1.55; color:#d2deed; margin-bottom:30px; }
.concept-page .source-links { display:flex; flex-wrap:wrap; gap:10px 24px; margin:24px 0 0; font-size:15px; }
.concept-page .source-links a { padding:4px 0; }
.concept-page .concept-aside { margin:28px 0 0; padding:2px 0 2px 18px; border-left:2px solid var(--brand-accent); color:#becbde; font-size:17px; line-height:1.6; }
.architecture-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:32px 0 0; scroll-margin-top:24px; }
.architecture-approach { display:grid; grid-template-rows:auto auto 1fr auto; padding:28px; min-width:0; border:1px solid #355a83; border-radius:8px; background:var(--panel); }
.architecture-label { margin:0 0 12px; color:#b5c5db; font:12px/1.5 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.architecture-approach h3 { margin-bottom:24px; }
.separate-stacks { list-style:none; padding:0; margin:0; display:grid; grid-template-rows:repeat(3,1fr); gap:12px; }
.separate-stacks li { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:14px; margin:0; padding:15px 16px; border:1px solid var(--line); border-radius:5px; background:var(--ground); font-size:15px; line-height:1.4; }
.separate-stacks strong { color:#d2deed; }
.separate-stacks span { color:#becbde; }
.separate-stacks .stack-services { color:var(--ink); font-weight:500; }
.stack-note { display:block; margin-top:7px; color:#becbde; font-size:13px; font-weight:400; line-height:1.5; }
.modem-figure-notes { margin:18px 0; color:#becbde; font-size:14px; line-height:1.6; }
.modem-figure-notes summary { width:fit-content; color:var(--ink); cursor:pointer; }
.modem-figure-notes p { max-width:80ch; margin:12px 0 0; }
.architecture-shared { border-color:var(--brand-accent); background:linear-gradient(150deg,#142b48,var(--panel)); }
.architecture-shared .architecture-label { color:#b4d7ff; }
.shared-stack { display:flex; flex-direction:column; min-width:0; }
.common-layer { display:flex; flex:1; flex-direction:column; justify-content:center; padding:21px 18px; border:1px solid #4d85bd; border-radius:5px; background:#102139; text-align:center; }
.common-layer > strong { display:block; font:700 34px/1.1 var(--display); letter-spacing:.03em; }
.common-layer p { margin:12px 0 0; color:#d2deed; font-size:17px; line-height:1.6; }
.adapter-label { margin:15px 0 10px; text-align:center; color:#b4d7ff; font-size:14px; }
.modem-bindings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; border:1px solid #355a83; border-radius:5px; background:var(--ground); }
.modem-bindings li { padding:13px 4px; margin:0; font:14px/1.5 var(--mono); text-align:center; }
.modem-bindings li + li { border-left:1px solid #355a83; }
.architecture-result { margin:22px 0 0; font-size:15px; color:#becbde; }
.architecture-shared .architecture-result { color:var(--ink); }
.architecture-comparison figcaption { grid-column:1/-1; max-width:88ch; margin:0; font-size:14px; color:#becbde; line-height:1.6; }
.responsibility-list { margin:30px 0 0; border-top:1px solid #355a83; }
.responsibility-list > div { display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; padding:24px; border-bottom:1px solid var(--line); }
.responsibility-list dt { font-weight:700; font-size:20px; }
.layer-index { margin-right:15px; font:13px var(--mono); color:#9db8d5; }
.responsibility-list dd { margin:0; color:#becbde; font-size:18px; line-height:1.6; }
.responsibility-list dd strong { color:var(--ink); font-weight:500; }
.responsibility-list .responsibility-core { border-left:3px solid var(--brand-accent); padding-left:21px; background:var(--panel); }
.responsibility-core dt { color:#b4d7ff; }
.file-example { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:32px 0 0; border:1px solid #355a83; border-radius:8px; overflow:hidden; background:var(--panel); }
.fixed-service { padding:30px; background:linear-gradient(145deg,#142b48,#101d32); border-top:3px solid var(--brand-accent); }
.fixed-service h3 { font-size:27px; }
.fixed-service ul { padding-left:20px; margin:24px 0 0; color:#d2deed; }
.fixed-service li { padding-left:4px; margin-bottom:14px; line-height:1.55; font-size:18px; }
.fixed-service li::marker { color:var(--brand-accent); }
.carrier-example { padding:30px; min-width:0; border-left:1px solid #355a83; }
.demo-controls { margin-bottom:26px; }
.demo-controls[hidden], .bearer-panel[hidden] { display:none; }
.demo-controls label { display:block; margin-bottom:10px; font-size:15px; color:#d2deed; }
.demo-controls select { width:100%; min-height:48px; padding:10px 12px; border:1px solid #6485ad; border-radius:4px; color:var(--ink); background:var(--ground); font:700 18px var(--body); }
.bearer-panel h4 { font-size:28px; margin:0 0 16px; font-family:var(--display); }
.bearer-panel h4 small { font:14px var(--body); color:#becbde; }
.bearer-panel p:not(.architecture-label) { color:#d2deed; font-size:18px; line-height:1.6; }
.bearer-panel a { display:inline-block; padding:6px 0; font-size:15px; }
.bearer-panel:not([hidden]) ~ .bearer-panel:not([hidden]) { margin-top:28px; padding-top:24px; border-top:1px solid #355a83; }
.demo-status { margin:22px 0 0; padding-top:18px; border-top:1px solid #355a83; font-size:14px; line-height:1.6; color:#b4d7ff; }
.file-example figcaption { grid-column:1/-1; border-top:1px solid #355a83; padding:16px 26px; color:#becbde; font-size:14px; line-height:1.6; }
.concept-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:35px; }
.concept-benefits article { min-width:0; padding-top:18px; border-top:1px solid #355a83; }
.benefit-number { display:block; margin-bottom:15px; color:var(--brand-accent); font:14px var(--mono); }
.concept-benefits h3 { font-size:23px; }
.concept-benefits p { color:#becbde; font-size:18px; line-height:1.6; }
.concept-scope { background:linear-gradient(120deg,#101c30,transparent); }
.concept-scope > p:not(.kicker):not(.source-links) { color:#d2deed; font-size:18px; line-height:1.65; }
.founder-story .founder-copy { max-width:75ch; }
.founder-story .founder-copy p { font-size:20px; line-height:1.65; color:#d2deed; }
.concept-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 48px; }
.concept-pair > * { min-width:0; }
.concept-pair p { color:#becbde; max-width:54ch; }
.concept-page .foundations > div { border-top:2px solid #355a83; padding-top:24px; }
.concept-page .concept-standfirst { color:var(--ink); font-size:19px; }
.concept-page .name-origin { margin:0 0 30px; font-size:19px; color:#d2deed; }
.name-equation { max-width:780px; margin:28px 0 24px; padding:28px 24px; border-block:1px solid #355a83; }
.name-equation-visual { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; }
.name-source { display:flex; flex-direction:column; align-items:center; gap:20px; min-width:0; }
.name-word { display:block; font:700 clamp(34px,5vw,64px)/1.1 var(--display); letter-spacing:.01em; white-space:nowrap; }
.name-from-js8 { color:var(--ink); }
.name-from-fsq { color:var(--brand-accent); }
.name-unused { color:var(--muted); }
.name-kept { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
.name-instruction { color:#becbde; font-size:15px; white-space:nowrap; }
.name-operator { align-self:start; margin-top:12px; color:#becbde; font:28px/1 var(--body); }
.concept-page .origin-goal { max-width:80ch; margin:28px 0 20px; font-size:20px; line-height:1.6; }
.concept-page .fine { max-width:86ch; color:#becbde; }
@media (max-width:900px) {
  .wide-break { display:none; }
  .responsibility-list > div { grid-template-columns:200px minmax(0,1fr); gap:20px; }
  .architecture-approach { padding:23px; }
}
@media (max-width:760px) {
  .concept-page .page-head { padding-top:38px; padding-bottom:30px; }
  .concept-page .page-head .lede { font-size:20px; }
  .concept-section { padding-top:38px; padding-bottom:38px; }
  .concept-section .section-intro { font-size:19px; }
  .architecture-comparison, .file-example, .concept-pair { grid-template-columns:1fr; }
  .carrier-example { border-left:0; border-top:1px solid #355a83; }
  .responsibility-list > div { grid-template-columns:1fr; gap:10px; padding:20px 16px; }
  .responsibility-list .responsibility-core { padding-left:13px; }
  .concept-benefits { grid-template-columns:1fr; gap:24px; }
  .concept-benefits h3 { margin-bottom:10px; }
}
@media (max-width:420px) {
  .name-equation { padding:24px 0; }
  .name-equation-visual { gap:6px; }
  .name-instruction { font-size:12px; }
  .name-operator { margin-top:7px; font-size:20px; }
  .architecture-approach, .fixed-service, .carrier-example { padding:22px 18px; }
  .separate-stacks li { grid-template-columns:64px minmax(0,1fr); gap:10px; padding:13px 12px; }
  .modem-bindings li { font-size:12px; }
  .file-example figcaption { padding:16px 18px; }
}