/* hybridbox: selected relationship design and illustrated host / Sandbox model. */
.product-page .hero h1 { font-size:clamp(43px,4.8vw,68px); }
.product-page .hero-inner { padding-top:48px; }
.product-page .hero-description { font-size:15px; }
.product-page .hero-bottom { margin-top:30px; }
.product-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; padding-top:58px; padding-bottom:65px; }
.product-principles article+article { border-left:1px solid var(--line); padding-left:32px; }
.product-principles article>span { font:10px var(--mono); color:var(--accent); }
.product-principles h2 { font-size:23px; line-height:1.5; margin:16px 0; letter-spacing:-.03em; }
.product-principles p { font-size:12px; color:var(--muted); line-height:1.95; }
.product-page .scenario-heading h2 { font-size:36px; }
#scenario-panel[data-view=relations] { display:block; margin-top:30px; }
#scenario-panel[data-view=relations] .scenario-copy { display:grid; grid-template-columns:1fr 1.4fr; column-gap:70px; align-items:start; margin-bottom:30px; }
#scenario-panel[data-view=relations] .scenario-kicker { grid-column:1; margin:0 0 10px; }
#scenario-panel[data-view=relations] #scenario-headline { grid-column:1; grid-row:2 / 4; font-size:25px; line-height:1.5; }
#scenario-panel[data-view=relations] #scenario-description { grid-column:2; grid-row:1 / 3; margin:0; font-size:13px; }
#scenario-panel[data-view=relations] #scenario-points { display:none; }
#scenario-panel[data-view=relations] .scenario-link { grid-column:2; grid-row:3; margin-top:14px; font-size:11px; }
.relationship-workbench { min-width:0; }
.flow-controls { display:flex; align-items:center; gap:8px; padding:13px 17px; background:var(--bg); border:1px solid var(--line); border-bottom:0; }
.flow-controls>span { font-size:10px; color:var(--muted); margin-right:auto; }
.flow-controls button { display:inline-flex; gap:7px; align-items:center; padding:6px 10px; background:transparent; font-size:11px; border:1px solid transparent; }
.flow-controls button[aria-pressed=true] { border-color:#bfc8b8; background:#edf0e6; color:var(--text); }
.flow-dot { width:7px; height:7px; display:inline-block; border-radius:50%; }
.flow-dot.data { background:var(--sage); }
.flow-dot.credentials { background:#a47733; }
.flow-dot.network { background:var(--accent); }
#scenario-architecture.is-relationship { margin:0; border:1px solid var(--line); border-radius:0; padding:0; background:var(--bg); }
.flow-reading { display:grid; grid-template-columns:120px 1fr; gap:18px; padding:17px 22px; border:1px solid var(--line); border-top:0; background:#e8ecdf; min-height:90px; }
.flow-reading>span { font-size:12px; font-weight:550; color:var(--sage); }
.flow-reading p { font-size:12px; color:var(--text); line-height:1.8; }
.product-page .scenario-disclosure { margin-top:17px; }
.product-page .technology-note { flex-wrap:wrap; }
@media (max-width:1024px) {
 .product-principles { gap:25px; }
 .product-principles article+article { padding-left:20px; }
 #scenario-panel[data-view=relations] .scenario-copy { column-gap:35px; }
}
@media (max-width:680px) {
 .product-page .hero h1 { font-size:clamp(30px,8vw,44px); }
 .product-page .hero-inner { padding-top:34px; }
 .product-page .hero-description { font-size:12px; }
 .product-page .hero-description br { display:none; }
 .product-principles { display:block; padding-top:20px; padding-bottom:35px; }
 .product-principles article { display:grid; grid-template-columns:1fr 1.2fr; gap:0 20px; padding:22px 0; }
 .product-principles article+article { border-left:0; border-top:1px solid var(--line); padding-left:0; }
 .product-principles article>span { grid-column:1; font-size:8px; }
 .product-principles h2 { font-size:17px; grid-column:1; grid-row:2; margin:8px 0 0; }
 .product-principles p { grid-column:2; grid-row:1 / 3; font-size:11px; }
 .product-page .scenario-heading h2 { font-size:27px; }
 #scenario-panel[data-view=relations] .scenario-copy { display:block; margin-bottom:22px; }
 #scenario-panel[data-view=relations] #scenario-headline { font-size:24px; margin-bottom:17px; }
 #scenario-panel[data-view=relations] #scenario-description { font-size:12px; }
 .flow-controls { flex-wrap:wrap; gap:5px; padding:12px 9px; }
 .flow-controls>span { width:100%; margin-bottom:4px; }
 .flow-controls button { padding:6px; font-size:10px; gap:5px; }
 .flow-reading { display:block; padding:14px; min-height:140px; }
 .flow-reading p { margin-top:7px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
 .product-page *, .product-page *::before, .product-page *::after { scroll-behavior:auto; }
}
.hero-illustration { margin: 30px 0 0; }
.hero-illustration picture { display: block; }
.hero-illustration img { display: block; width: 100%; height: auto; }
.hero-illustration figcaption { display:flex; justify-content:center; gap:30px; color:var(--sage); font-size:10px; margin-top:4px; }
.hero-illustration figcaption span+span::before { content:'·'; color:var(--dim); margin-right:30px; }
#scenario-panel[data-view=relations] { margin-top:30px; }
@media (max-width:680px) {
  .hero-illustration { margin-top:24px; }
  .hero-illustration figcaption { font-size:9px; gap:12px; }
  .hero-illustration figcaption span+span::before { margin-right:12px; }
}