/* Product-led composition: one connected order, three decisions, a resolved ending. */
@layer components {
  .connection-links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .connection-links path { fill:none; stroke:var(--blue-text); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.23; stroke-linecap:round; }
  .has-cinema .connection-links path { stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--connections,0)); opacity:calc(var(--connections,0)*.32); }
  .record-ribbon { display:flex; align-items:center; gap:10px; color:#c9d4e4; }
  .record-ribbon > span { display:flex; align-items:center; gap:9px; }
  .record-ribbon i { font-style:normal; display:grid; place-items:center; width:34px; height:34px; border:1px solid #ffffff24; border-radius:11px; font-size:14px; background:#ffffff06; transition:background .5s,border-color .5s,color .5s; }
  .record-ribbon span span { font-size:13px; white-space:nowrap; }
  .record-ribbon small { display:block; color:#8f9db1; font-size:12px; margin-bottom:2px; }
  .record-ribbon > b { flex:1; min-width:12px; height:1px; background:#90a7c03b; }
  .order-stage[data-step="0"] .record-stock i { color:#ffc1cf; border-color:#d890a466; background:#6b364a5c; }
  .order-stage[data-step="1"] .record-team i { color:#c5e1ff; border-color:#97c4ff77; background:#32649255; }
  .order-stage[data-step="2"] .record-client i,.order-stage[data-step="2"] .record-team i { color:#a3ecd1; border-color:#77bba277; background:#28665555; }
  .core-order-code { display:flex; align-items:center; gap:12px; }
  .core-order-code small { font-size:12px; letter-spacing:.09em; color:#a0b1c6; }
  .core-order-code strong { font:700 44px/1 var(--display); letter-spacing:-.06em; color:#f3f7ff; }
  .closing-index { position:relative; display:grid; justify-items:center; width:min(360px,82vw); margin:0 auto 28px; padding:20px 24px; border-block:1px solid var(--line); }
  .closing-index span { color:var(--blue-text); font-size:10px; font-weight:700; letter-spacing:.18em; }
  .closing-index strong { margin-top:7px; font:700 22px/1.1 var(--display); letter-spacing:-.04em; }
  .closing-outcome { display:flex; align-items:center; justify-content:center; gap:16px; margin:32px auto 0; color:var(--muted-strong); font-size:14px; }
  .closing-outcome > span:first-child { font-weight:700; color:var(--ink); }
  .closing-outcome i { width:32px; height:1px; background:var(--line); }
}
@layer responsive {
  .has-cinema .opening { max-width:1440px; padding-inline:max(40px,4vw); }
  .has-cinema .connection-rings { inset:12% 8% 12%; border-color:color-mix(in srgb,var(--blue-text) 12%,transparent); }
  .has-cinema .connection-halo { background:radial-gradient(ellipse at 48% 50%,#70b6ff24,transparent 66%),radial-gradient(ellipse at 70% 72%,#e1c6f61a,transparent 60%); }
  .has-cinema .satellite { box-shadow:0 18px 35px -14px #18335526,inset 0 1px 0 #fff; }
  .has-cinema .stage-footnote { font-size:14px; }
  .story { background:#0d1017; }
  .story .story-sticky { background:radial-gradient(ellipse at 83% 48%,#1d3a552b,transparent 64%); }
  .story .story-copy h2 { font-size:clamp(44px,4.3vw,64px); min-height:2.12em; }
  .story .story-copy > p:not(.chapter) { min-height:0; margin-top:22px; }
  .story .story-demo { margin-top:16px; }
  .story .order-stage { gap:22px; padding-top:12px; }
  .story .order-id { top:-66px; left:-20px; font-size:clamp(140px,15vw,230px); -webkit-text-stroke-color:#97bce410; }
  .story .order-core { border-radius:24px; border-color:#d2e0f43d; background:linear-gradient(138deg,#283343,#151e2bcc); box-shadow:0 40px 60px -24px #000c,inset 0 1px 0 #ffffff36,inset 0 -1px 0 #ffffff08; transform:rotate(-1.3deg); padding:28px; }
  .story .order-core:before { content:""; position:absolute; z-index:-1; inset:9px -7px -8px 7px; border:1px solid #b4c9e81b; border-radius:inherit; background:#c2d7f009; transform:rotate(2deg); }
  .story .order-deck { position:relative; display:grid; perspective:1200px; isolation:isolate; min-width:0; }
  .story .order-deck .deck-card { grid-area:1/1; width:100%; backface-visibility:hidden; transform-origin:48% 86%; will-change:transform,opacity; transition:transform 420ms cubic-bezier(.32,.72,0,1),opacity 280ms cubic-bezier(.23,1,.32,1),z-index 0s linear 170ms; }
  .story .order-deck .deck-card:before { display:none; }
  .story .deck-card[data-position="active"] { z-index:3; opacity:1; transform:translate3d(0,0,0) rotate(-1.3deg) scale(1); pointer-events:auto; }
  .story .deck-card[data-position="past"] { z-index:1; opacity:.42; transform:translate3d(-30px,18px,0) rotate(-3.7deg) scale(.94); pointer-events:none; }
  .story .deck-card[data-position="future"] { z-index:2; opacity:.5; transform:translate3d(24px,14px,0) rotate(1.8deg) scale(.96); pointer-events:none; }
  .story .deck-card[data-card-step="2"][data-position="future"] { z-index:1; opacity:.24; transform:translate3d(42px,25px,0) rotate(3.1deg) scale(.91); }
  .story .order-stage[data-step="2"] .deck-card[data-card-step="0"] { z-index:0; opacity:.18; transform:translate3d(-48px,29px,0) rotate(-5.2deg) scale(.89); }
  .story .core-track { margin:22px 0; opacity:.7; }
  .story .core-detail { gap:22px; min-height:110px; }
  .story .core-avatar { width:70px; height:70px; border-radius:21px; font:700 34px/1 var(--display); }
  .story .core-detail strong { font-size:clamp(24px,2.4vw,34px); max-width:330px; }
  .story .core-status { font-size:13px; }
  .story .assistant-strip { margin-left:24px; padding:12px 18px; min-height:58px; border-color:#d4e4fb23; border-radius:16px; background:#17202c; box-shadow:0 16px 34px -16px #0009; }
  .story .story-controls i:after { transform:scaleX(var(--chapter-progress,0)); transition:none; }
  .story .story-controls [aria-pressed="true"] i:after { transform:scaleX(var(--chapter-progress,0)); }
  .story .story-controls button { gap:14px; font-size:15px; }
  .story .story-controls button > span { font-size:13px; font-variant-numeric:tabular-nums; color:#7f8b9e; }
  .story .story-controls [aria-pressed="true"] > span { color:#afcfff; }
  section.closing { padding:94px 24px 90px; text-align:center; background:radial-gradient(ellipse at 50% 0,#9bbef214,transparent 70%); }
  section.closing h2 { font-size:clamp(52px,7.4vw,112px); line-height:1; letter-spacing:-.065em; }
  section.closing h2 em { color:var(--blue-text); }
  section.closing > p { font-size:16px; margin-bottom:24px; }
  section.closing .closing-actions { justify-content:center; margin-top:30px; gap:24px; }
  section.closing .cta-destination { margin-top:12px; }
  section.closing .button { min-height:56px; padding-inline:28px; }
  @media (min-width:1001px) and (max-height:779px) {
    .story .order-stage { gap:16px; padding-top:6px; }
    .story .order-core { padding:21px 24px; }
    .story .core-track { margin:16px 0; }
    .story .core-detail { min-height:94px; }
    .story .core-avatar { width:60px; height:60px; }
    .story .core-order-code strong { font-size:38px; }
    .story .assistant-strip { min-height:50px; padding-block:10px; }
    .story .core-bottom { margin-top:14px; padding-top:12px; }
  }
  @media (min-width:761px) and (max-height:699px) {
    .has-cinema .opening h1 { font-size:clamp(56px,11.8svh,84px); }
    .has-cinema .hero-title-frame { left:max(40px,4vw); top:23svh; }
    .has-cinema .opening-support { left:max(40px,4vw); }
  }
  @media (max-width:1000px) {
    .has-cinema .opening { padding-inline:24px; }
    .story .order-stage { gap:12px; padding-top:0; max-width:520px; }
    .story .story-copy h2 { font-size:clamp(28px,6vw,40px); min-height:2.12em; }
    .story .story-demo { margin-top:4px; }
    .story .record-ribbon { gap:7px; }
    .story .record-ribbon > span { gap:6px; }
    .story .record-ribbon i { width:27px; height:27px; border-radius:8px; font-size:12px; }
    .story .record-ribbon small { font-size:12px; }
    .story .record-ribbon span span { font-size:12px; }
    .story .order-core { padding:16px; transform:none; }
    .story .deck-card[data-position="active"] { transform:translate3d(0,0,0) rotate(-.5deg) scale(1); }
    .story .deck-card[data-position="past"] { opacity:.34; transform:translate3d(-14px,10px,0) rotate(-1.8deg) scale(.96); }
    .story .deck-card[data-position="future"] { opacity:.42; transform:translate3d(13px,9px,0) rotate(1.2deg) scale(.97); }
    .story .deck-card[data-card-step="2"][data-position="future"] { opacity:.2; transform:translate3d(22px,16px,0) rotate(2deg) scale(.94); }
    .story .order-stage[data-step="2"] .deck-card[data-card-step="0"] { opacity:.14; transform:translate3d(-24px,17px,0) rotate(-2.7deg) scale(.92); }
    .story .core-top { flex-direction:row; align-items:center; gap:8px; }
    .story .core-order-code { gap:7px; }
    .story .core-order-code strong { font-size:30px; }
    .story .core-status { font-size:12px; padding:5px 8px; }
    .story .core-track { margin:14px 0; }
    .story .core-detail { gap:14px; min-height:88px; }
    .story .core-avatar { width:48px; height:48px; border-radius:15px; font-size:25px; }
    .story .core-detail strong { font-size:24px; }
    .story .core-detail p { font-size:14px; }
    .story .core-bottom { margin-top:14px; padding-top:12px; }
    .story .assistant-strip { margin-left:0; min-height:44px; padding:10px 12px; }
    .story .order-id { display:none; }
    .story .story-controls button { font-size:13px; gap:6px; }
    section.closing .closing-actions { align-items:center; }
    .closing-outcome { gap:8px; font-size:13px; }
    .closing-outcome i { width:14px; }
  }
  @media (max-width:760px) {
    .has-cinema .connection-links { opacity:.55; }
    .has-cinema .opening-support .button-secondary,
    .has-cinema .opening-support .hero-assurance { display:none; }
    .has-cinema .opening-support .hero-actions { display:block; }
    section.closing { padding:72px 24px 64px; }
    section.closing h2 { font-size:clamp(40px,10.4vw,70px); }
    section.closing .closing-actions { flex-direction:column; gap:10px; }
    .closing-outcome { flex-wrap:wrap; max-width:320px; row-gap:8px; }
  }
  @media (max-width:1000px) and (max-height:650px) {
    .story .record-ribbon { display:none; }
    .story .core-detail strong { font-size:22px; }
    .story .core-status { max-width:150px; }
    .story .story-copy h2 { font-size:27px; }
  }
}
@layer accessibility {
  @media (prefers-reduced-motion:reduce) {
    .has-cinema .connection-links path { stroke-dashoffset:0; opacity:.23; }
    .story .story-controls [aria-pressed="true"] i:after { transform:scaleX(1); }
    .record-ribbon i { transition:none; }
    .story .order-deck .deck-card { transition:opacity 140ms cubic-bezier(.23,1,.32,1); transform:none; }
    .story .deck-card[data-position="active"] { opacity:1; }
    .story .deck-card:not([data-position="active"]) { opacity:0; }
  }
  @media (forced-colors:active) {
    .record-ribbon > b,.closing-outcome i { background:CanvasText; }
    .connection-links path { stroke:CanvasText; }
  }
}

@layer components {
  .product-scope { padding:110px 0 120px; }
  .scope-heading h2 em { color:var(--blue-text); }
  .product-atlas { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,.78fr); min-height:620px; overflow:hidden; border:1px solid var(--line); border-radius:32px; background:var(--surface); box-shadow:0 45px 110px -64px #173c6f52; }
  .atlas-stage { position:relative; min-height:620px; overflow:hidden; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--blue-soft) 72%,transparent) 0 19%,transparent 46%),linear-gradient(145deg,color-mix(in srgb,var(--surface) 76%,var(--blue-soft)),var(--bg)); }
  .atlas-stage:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image:radial-gradient(circle at center,color-mix(in srgb,var(--ink) 28%,transparent) .65px,transparent .8px); background-size:16px 16px; mask-image:radial-gradient(circle at center,#000,transparent 72%); }
  .atlas-orbits,.atlas-orbits:before,.atlas-orbits:after { position:absolute; left:50%; top:50%; translate:-50% -50%; border:1px solid color-mix(in srgb,var(--blue-text) 15%,var(--line)); border-radius:50%; pointer-events:none; }
  .atlas-orbits { width:70%; aspect-ratio:1; }
  .atlas-orbits:before,.atlas-orbits:after { content:""; }
  .atlas-orbits:before { width:72%; aspect-ratio:1; border-style:dashed; }
  .atlas-orbits:after { width:43%; aspect-ratio:1; border-color:color-mix(in srgb,var(--blue-text) 24%,var(--line)); box-shadow:0 0 70px color-mix(in srgb,var(--blue-text) 10%,transparent); }
  .atlas-core { position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; display:grid; justify-items:center; width:210px; text-align:center; }
  .atlas-core > span { display:grid; place-items:center; width:142px; height:142px; margin-bottom:18px; border:1px solid color-mix(in srgb,var(--surface) 78%,var(--line)); border-radius:42px; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--blue-soft) 66%,transparent)); box-shadow:0 30px 65px -30px #135ea772,inset 0 1px 1px color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(20px); transform:rotate(-5deg); }
  .atlas-core > span { color:var(--blue-text); font:700 18px/1 var(--display); letter-spacing:.08em; }
  .atlas-core strong { font:700 18px/1.2 var(--display); letter-spacing:-.04em; }
  .atlas-core small { margin-top:6px; color:var(--muted-strong); font-size:11px; }
  .atlas-tabs { position:absolute; z-index:3; inset:0; }
  .atlas-node { position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; display:grid; justify-items:center; gap:8px; width:120px; min-height:72px; padding:8px 6px; border:0; color:var(--muted-strong); background:transparent; cursor:pointer; font:600 12px/1.2 var(--body); transition:color 220ms ease,transform 320ms var(--ease); }
  .atlas-node .icon { width:44px; height:44px; padding:11px; border:1px solid color-mix(in srgb,var(--line) 86%,transparent); border-radius:15px; color:var(--muted-strong); background:color-mix(in srgb,var(--surface) 82%,transparent); box-shadow:0 15px 28px -20px #1027436b,inset 0 1px 0 color-mix(in srgb,var(--surface) 85%,transparent); backdrop-filter:blur(15px); transition:background 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 220ms ease; }
  .atlas-node:hover { color:var(--ink); transform:translateY(-3px); }
  .atlas-node[aria-selected="true"] { color:var(--blue-text); }
  .atlas-node[aria-selected="true"] .icon { color:#fff; border-color:color-mix(in srgb,var(--blue-text) 72%,#fff); background:linear-gradient(145deg,#50a8ff,var(--blue)); box-shadow:0 20px 35px -17px #0066ccad,inset 0 1px 1px #ffffff8f; }
  .atlas-node:focus-visible { outline:3px solid var(--blue-text); outline-offset:3px; border-radius:16px; }
  .atlas-panels { display:grid; align-items:center; min-width:0; padding:48px 42px; border-left:1px solid var(--line); background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 98%,var(--blue-soft)),color-mix(in srgb,var(--bg) 90%,var(--blue-soft))); }
  .atlas-panel[hidden] { display:none; }
  .atlas-panel { min-width:0; }
  .atlas-index { display:block; margin-bottom:36px; color:var(--blue-text); font-size:11px; font-weight:700; letter-spacing:.14em; }
  .atlas-panel h3 { margin:0; font:700 clamp(30px,3vw,44px)/1.06 var(--display); letter-spacing:-.055em; }
  .atlas-panel p { margin:22px 0; color:var(--muted-strong); font-size:15px; line-height:1.75; }
  .atlas-panel ul { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px; padding:0; list-style:none; }
  .atlas-panel li { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted-strong); background:var(--surface); font-size:11px; }
  .atlas-panel > a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--blue-text); font-size:13px; font-weight:600; }
  .start-flow { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,2fr); gap:56px; margin-top:74px; padding-top:34px; border-top:1px solid var(--line); }
  .start-flow-intro .eyebrow { margin-bottom:12px; }
  .start-flow-intro h3 { margin:0; font:700 28px/1.15 var(--display); letter-spacing:-.05em; }
  .start-flow ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none; counter-reset:steps; }
  .start-flow li { position:relative; min-width:0; padding:0 28px 0 24px; border-left:1px solid var(--line); }
  .start-flow li > span { display:block; margin-bottom:20px; color:var(--blue-text); font-size:11px; font-weight:700; letter-spacing:.12em; }
  .start-flow li strong { display:block; font:700 17px/1.3 var(--display); letter-spacing:-.03em; }
  .start-flow li p { margin:10px 0 0; color:var(--muted-strong); font-size:13px; line-height:1.65; }
  .plan-section { padding:100px 0 0; }
  .plan-card { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr) auto; align-items:center; gap:48px; overflow:hidden; padding:56px; border:1px solid #d6e4f429; border-radius:32px; color:#f5f7fb; background:radial-gradient(circle at 15% -20%,#4f8dcc3d,transparent 46%),linear-gradient(135deg,#151a22,#0d1118); box-shadow:0 42px 90px -52px #07101fcc; }
  .plan-card:after { content:""; position:absolute; right:-8%; top:-42%; width:360px; aspect-ratio:1; border:1px solid #a8c8e72b; border-radius:50%; box-shadow:0 0 0 58px #85b4df0b,0 0 0 116px #85b4df07; pointer-events:none; }
  .plan-price { position:relative; z-index:1; }
  .plan-price .eyebrow { color:#aab8c9; margin-bottom:16px; }
  .plan-price h2 { display:flex; align-items:flex-end; gap:12px; margin:0; color:#fff; }
  .plan-price h2 span { font:700 clamp(52px,5.5vw,76px)/.92 var(--display); letter-spacing:-.07em; }
  .plan-price h2 small { padding-bottom:7px; color:#9eacbd; font:500 14px/1.2 var(--body); }
  .plan-price > p:last-child { max-width:520px; margin:22px 0 0; color:#b9c3d0; font-size:14px; line-height:1.75; }
  .plan-facts { position:relative; z-index:1; display:grid; gap:14px; }
  .plan-facts span { display:flex; align-items:center; gap:10px; color:#dce4ee; font-size:13px; }
  .plan-facts .icon { width:19px; height:19px; padding:4px; border-radius:50%; color:#baf1dc; background:#286b5752; }
  .plan-action { position:relative; z-index:1; display:grid; justify-items:start; gap:12px; }
  .plan-action .button { min-height:54px; white-space:nowrap; }
  .plan-action small { color:#8f9baa; font-size:11px; }
}

@layer responsive {
  @media (max-width:1000px) {
    .product-atlas { grid-template-columns:1fr; }
    .atlas-stage { min-height:580px; }
    .atlas-panels { min-height:370px; border-left:0; border-top:1px solid var(--line); }
    .start-flow { grid-template-columns:1fr; gap:30px; }
    .plan-card { grid-template-columns:1.2fr .8fr; }
    .plan-action { grid-column:1/-1; display:flex; align-items:center; gap:18px; }
  }
  @media (max-width:760px) {
    .product-scope { padding:72px 0 78px; }
    .product-atlas { border-radius:24px; }
    .atlas-stage { min-height:0; padding:26px 18px 20px; }
    .atlas-stage:after,.atlas-orbits { display:none; }
    .atlas-core { position:relative; left:auto; top:auto; translate:none; display:flex; align-items:center; justify-items:initial; width:auto; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); text-align:left; }
    .atlas-core > span { width:68px; height:68px; margin:0 14px 0 0; border-radius:21px; transform:rotate(-4deg); flex:0 0 auto; }
    .atlas-core strong { align-self:center; font-size:16px; }
    .atlas-core small { position:absolute; left:82px; top:38px; }
    .atlas-tabs { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .atlas-node { position:relative; left:auto; top:auto; translate:none; display:flex; justify-content:flex-start; gap:9px; width:auto; min-width:0; min-height:52px; padding:6px 8px; border:1px solid var(--line); border-radius:14px; text-align:left; background:color-mix(in srgb,var(--surface) 86%,transparent); }
    .atlas-node:hover { transform:none; }
    .atlas-node .icon { width:34px; height:34px; padding:8px; border-radius:11px; flex:0 0 auto; }
    .atlas-node span { overflow-wrap:normal; font-size:11px; }
    .atlas-panels { min-height:0; padding:34px 24px 38px; }
    .atlas-index { margin-bottom:24px; }
    .atlas-panel h3 { font-size:31px; }
    .atlas-panel p { margin:18px 0; font-size:14px; }
    .atlas-panel ul { display:grid; grid-template-columns:1fr; margin-bottom:20px; }
    .atlas-panel li { width:max-content; max-width:100%; }
    .start-flow { margin-top:52px; padding-top:28px; }
    .start-flow ol { grid-template-columns:1fr; gap:0; }
    .start-flow li { padding:4px 0 24px 28px; border-left:1px solid var(--line); }
    .start-flow li:last-child { padding-bottom:0; }
    .start-flow li > span { position:absolute; left:-10px; top:0; display:grid; place-items:center; width:20px; height:20px; margin:0; border-radius:50%; background:var(--bg); font-size:8px; }
    .plan-section { padding-top:64px; }
    .plan-card { grid-template-columns:1fr; gap:30px; padding:34px 24px; border-radius:24px; }
    .plan-card:after { right:-45%; top:-15%; }
    .plan-price h2 { display:block; }
    .plan-price h2 small { display:block; margin-top:10px; padding:0; }
    .plan-action { grid-column:auto; display:grid; gap:12px; }
    .plan-action .button { white-space:normal; text-align:center; }
  }
}

@layer accessibility {
  @media (prefers-reduced-motion:reduce) {
    .atlas-node,.atlas-node .icon { transition:none; }
  }
  @media (forced-colors:active) {
    .product-atlas,.atlas-panels,.atlas-node,.atlas-node .icon,.start-flow,.start-flow li,.plan-card { border-color:CanvasText; }
    .atlas-node[aria-selected="true"] .icon,.plan-facts .icon { forced-color-adjust:none; color:Canvas; background:CanvasText; }
  }
}
@layer components {
  .section-shell { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
  .workspace-overview { padding:70px 0 110px; }
  .section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:44px; }
  .eyebrow { font-size:11px; letter-spacing:.13em; font-weight:600; color:var(--muted-strong); margin:0 0 18px; }
  .section-heading h2,.faq-heading h2 { font-size:clamp(36px,4.5vw,58px); line-height:1.09; letter-spacing:-.055em; }
  .section-heading > p { max-width:330px; color:var(--muted-strong); line-height:1.8; font-size:15px; }
  .product-viewer { overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:0 34px 90px -46px #154c8f66; }
  .viewer-bar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 20px; border-bottom:1px solid var(--line); }
  .viewer-brand { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
  .viewer-status { display:flex; align-items:center; gap:8px; color:var(--muted-strong); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
  .viewer-status i { width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-soft); }
  .viewer-tabs { display:flex; gap:4px; overflow-x:auto; padding:10px 12px; border-bottom:1px solid var(--line); scrollbar-width:none; }
  .viewer-tabs::-webkit-scrollbar { display:none; }
  .viewer-tabs button { flex:0 0 auto; min-height:40px; padding:8px 14px; border:0; border-radius:10px; color:var(--muted-strong); background:transparent; font:500 12px/1 var(--body); cursor:pointer; }
  .viewer-tabs button:hover { color:var(--ink); background:var(--soft); }
  .viewer-tabs button[aria-selected="true"] { color:var(--blue-text); background:var(--blue-soft); font-weight:600; }
  .viewer-tabs button:focus-visible { outline:3px solid var(--blue-text); outline-offset:1px; }
  .viewer-screen { position:relative; margin:0; padding:18px 18px 0; background:linear-gradient(180deg,var(--surface),var(--bg)); }
  .viewer-screen:after { content:""; position:absolute; inset:18px 18px 0; border:1px solid #8ca7c72e; border-radius:17px; pointer-events:none; }
  .viewer-screen img { display:block; width:100%; height:auto; object-fit:contain; border-radius:17px; background:#f5f8fc; box-shadow:0 24px 48px -30px #17436e80; }
  .viewer-caption { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:18px 22px; }
  .viewer-caption > span { min-width:0; }
  .viewer-caption strong { display:block; margin-bottom:5px; font:700 16px/1.25 var(--display); letter-spacing:-.03em; }
  .viewer-caption span span { display:block; color:var(--muted-strong); font-size:12px; line-height:1.55; }
  .viewer-caption a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; color:var(--blue-text); font-size:12px; font-weight:600; }
  .benefits-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin-top:44px; }
  .benefits-grid article { border-top:1px solid var(--line); padding-top:24px; }
  .benefit-number { font-size:10px; letter-spacing:.12em; color:var(--blue-text); }
  .benefits-grid h3 { margin:14px 0 10px; font:700 21px/1.25 var(--display); letter-spacing:-.04em; }
  .benefits-grid p { font-size:14px; line-height:1.8; color:var(--muted-strong); }
  .faq-section { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; padding:110px 0; }
  .faq-heading .text-link { margin-top:24px; }
  .faq-list details { border-bottom:1px solid var(--line); }
  .faq-list details:first-child { border-top:1px solid var(--line); }
  .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; padding:20px 0; cursor:pointer; font-size:15px; font-weight:600; list-style:none; }
  .faq-list summary::-webkit-details-marker { display:none; }
  .faq-list summary > span { font-size:23px; color:var(--blue-text); font-weight:400; transition:transform .2s; }
  .faq-list details[open] summary > span { transform:rotate(45deg); }
  .faq-list details p { padding:0 30px 24px 0; color:var(--muted-strong); font-size:14px; line-height:1.85; }
  .faq-list details p a { color:var(--blue-text); text-decoration:underline; }
  .faq-list summary:focus-visible { outline:3px solid var(--blue-text); outline-offset:4px; }
  .footer-brand { margin-right:auto; }
  .footer-brand .brand { color:var(--ink); gap:8px; }
  .footer-brand p { font-size:12px; margin-top:3px; }
  .footer-links { display:flex; gap:24px; }
  .footer-links a { display:inline-flex; align-items:center; min-height:44px; }
}
@layer responsive {
  .production-page .nav .brand { gap:9px; }
  .production-page .nav > nav:not(#mobile-menu) { gap:24px; }
  .production-page .opening-sequence:not(.has-cinema) .opening { width:100%; max-width:1320px; min-height:760px; height:auto; padding:150px 60px 92px; gap:28px; grid-template-columns:1fr 1.05fr; }
  .production-page .opening-sequence:not(.has-cinema) .opening h1 { font-size:clamp(72px,7.7vw,108px); line-height:1.01; letter-spacing:-.07em; }
  .production-page .product-name { font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--muted-strong); margin-bottom:28px; }
  .production-page .opening-sub { max-width:410px; font-size:18px; line-height:1.7; margin:28px 0; }
  .hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
  .button.button-secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
  .hero-assurance { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted-strong); margin-top:18px; }
  .hero-assurance > span { color:var(--green); }
  .production-page .opening-sequence:not(.has-cinema) .connection-stage { height:510px; min-width:0; }
  .production-page .opening-sequence:not(.has-cinema) .workspace-hub { top:118px; width:min(360px,76%); min-height:190px; }
  .production-page .opening-sequence:not(.has-cinema) .satellite-client { top:62px; left:0; }
  .production-page .opening-sequence:not(.has-cinema) .satellite-team { top:260px; right:0; }
  .production-page .opening-sequence:not(.has-cinema) .orbit-order { bottom:45px; padding:18px; gap:12px; }
  .production-page .opening-sequence:not(.has-cinema) .stage-footnote { font-size:12px; bottom:6px; }
  .production-page .opening-sequence:not(.has-cinema) .scroll-cue { bottom:24px; left:60px; right:60px; }
  .production-page .opening-sequence:not(.has-cinema) .workspace-hub,
  .production-page .opening-sequence:not(.has-cinema) .satellite,
  .production-page .opening-sequence:not(.has-cinema) .orbit-order { animation:none; opacity:1; }
  .production-page footer { max-width:1200px; margin:auto; padding:32px 20px; gap:24px; display:flex; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); font-size:12px; color:var(--muted-strong); }
  @media (max-width:1100px) and (min-width:761px) {
    .production-page .opening-sequence:not(.has-cinema) .opening { padding-inline:40px; gap:16px; }
    .production-page .opening-sequence:not(.has-cinema) .opening h1 { font-size:clamp(65px,8vw,88px); }
    .production-page .opening-sequence:not(.has-cinema) .workspace-hub { width:min(300px,74%); min-height:170px; top:112px; }
    .production-page .opening-sequence:not(.has-cinema) .satellite { padding:10px; }
    .production-page .opening-sequence:not(.has-cinema) .satellite strong { font-size:12px; }
    .production-page .opening-sequence:not(.has-cinema) .orbit-order { padding:12px; }
    .production-page .opening-sequence:not(.has-cinema) .orbit-order strong { font-size:13px; }
    .production-page .opening-sequence:not(.has-cinema) .orbit-order > div:first-child strong { font-size:24px; }
    .production-page .nav > nav:not(#mobile-menu) { gap:16px; }
    .faq-section { gap:40px; }
  }
  @media (max-width:1000px) {
    .production-page .story:not(.is-scroll-story) { min-height:0; }
    .production-page .story:not(.is-scroll-story) .story-sticky { height:auto; min-height:0; position:relative; padding-block:64px; }
    .production-page .story:not(.is-scroll-story) .story-composition { min-height:0; }
    .production-page .story:not(.is-scroll-story) .story-controls [aria-pressed="true"] i:after { transform:scaleX(1); }
  }
  .production-page .story:not(.is-scroll-story) { height:auto; scroll-margin-top:0; }
  .production-page .story:not(.is-scroll-story) .story-sticky { position:relative; height:auto; min-height:0; padding-block:76px 44px; }
  .production-page .story:not(.is-scroll-story) .story-composition { min-height:390px; }
  .production-page .story:not(.is-scroll-story) .story-controls [aria-pressed="true"] i:after { transform:scaleX(1); }
  @media (max-width:1000px) {
    .production-page .story:not(.is-scroll-story) .story-sticky { padding-block:56px 32px; }
    .production-page .story:not(.is-scroll-story) .story-composition { min-height:0; grid-template-columns:1fr; }
    .production-page .story:not(.is-scroll-story) .order-stage { width:100%; }
    .production-page .nav > nav:not(#mobile-menu) { display:none; }
    .production-page .nav .menu-toggle { display:block; }
    .production-page .nav > .button { margin-left:auto; white-space:nowrap; }
    .production-page .nav > .button .cta-free { display:none; }
  }
  @media (max-width:760px) {
    .production-page .story:not(.is-scroll-story) .story-copy .chapter,.production-page .story:not(.is-scroll-story) .story-copy > #story-description { display:block; }
    .production-page .story:not(.is-scroll-story) .story-copy .chapter { margin-bottom:14px; }
    .production-page .story:not(.is-scroll-story) .story-copy > #story-description { font-size:14px; margin-top:16px; min-height:0; }
  }
  @media (max-width:760px) {
    .production-page .opening-sequence:not(.has-cinema) .opening { padding:116px 24px 54px; min-height:0; gap:0; }
    .production-page .product-name { font-size:9px; letter-spacing:.1em; margin-bottom:24px; }
    .production-page .opening-sequence:not(.has-cinema) .opening h1 { font-size:clamp(58px,15vw,88px); }
    .production-page .opening-sub { font-size:16px; margin:22px 0; max-width:440px; }
    .hero-actions { gap:10px; }
    .hero-actions .button { padding-inline:18px; font-size:13px; }
    .hero-assurance { font-size:11px; }
    .production-page .opening-sequence:not(.has-cinema) .connection-stage { height:340px; margin-top:30px; max-width:440px; }
    .production-page .opening-sequence:not(.has-cinema) .workspace-hub { width:min(240px,68%); min-height:132px; top:48px; }
    .production-page .opening-sequence:not(.has-cinema) .satellite-client { top:26px; }
    .production-page .opening-sequence:not(.has-cinema) .satellite-team { top:155px; }
    .production-page .opening-sequence:not(.has-cinema) .orbit-order { bottom:34px; padding:12px; gap:10px; }
    .production-page .opening-sequence:not(.has-cinema) .scroll-cue { display:none; }
    .section-shell { width:calc(100% - 48px); }
    .workspace-overview { padding:36px 0 64px; }
    .section-heading { display:block; margin-bottom:28px; }
    .section-heading > p { margin-top:24px; max-width:480px; }
    .section-heading h2,.faq-heading h2 { font-size:clamp(32px,7.6vw,46px); }
    .product-viewer { border-radius:20px; }
    .viewer-bar { min-height:52px; padding:12px 14px; }
    .viewer-brand { font-size:12px; }
    .viewer-status { font-size:8px; }
    .viewer-tabs { padding-inline:8px; }
    .viewer-tabs button { min-height:38px; padding-inline:12px; font-size:11px; }
    .viewer-screen { padding:8px 8px 0; overflow:hidden; }
    .viewer-screen:after { inset:8px 8px 0; border-radius:12px; }
    .viewer-screen img { width:100%; max-width:100%; height:auto; object-position:center; border-radius:12px; }
    .viewer-caption { min-height:0; align-items:flex-start; gap:14px; padding:16px; }
    .viewer-caption strong { font-size:15px; }
    .viewer-caption span span { font-size:11px; }
    .viewer-caption a { min-height:36px; font-size:11px; white-space:nowrap; }
    .benefits-grid { grid-template-columns:1fr; gap:24px; margin-top:32px; }
    .benefits-grid h3 { font-size:22px; }
    .faq-section { grid-template-columns:1fr; gap:28px; padding:64px 0; }
    .faq-list summary { font-size:14px; min-height:72px; }
    .production-page footer { margin-inline:24px; padding:28px 0; gap:16px; }
    .footer-brand { width:100%; }
    .footer-links { gap:20px; }
  }
}
@layer accessibility {
  @media (prefers-reduced-motion:reduce) {
    .faq-list summary > span { transition:none; }
  }
  @media (forced-colors:active) {
    .product-viewer,.viewer-bar,.viewer-tabs,.faq-list details,.benefits-grid article { border-color:CanvasText; }
    .viewer-tabs button[aria-selected="true"] { outline:1px solid Highlight; }
  }
}