/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: workbench and product poster · design-system: design.md · designed-as-app */
/* White product canvas, grey navigation rail, and restrained blue actions. */
:root{
 --background:#fff;--surface:#f5f5f7;--surface-strong:#ececef;--text:#1d1d1f;--muted:#86868b;
 --accent:#0066cc;--accent-dark:#005bb5;--accent-soft:#f0f6fc;--focus:#0066cc;
 --line:rgba(29,29,31,.12);--line-hover:rgba(29,29,31,.2);
 --panel-fill:rgba(237,239,241,.92);--card-fill:#fff;--workspace-card-fill:rgba(255,255,255,.58);
 --sidebar-surface:#eef0f2;--sidebar-line:#dfe3e7;
 --panel-shadow:0 18px 48px rgba(29,29,31,.1),0 3px 10px rgba(29,29,31,.04),inset 0 1px 0 rgba(255,255,255,.95);
 --control-shadow:none;
}
.topline{background:#fff;border-color:transparent}
:is(.hero-copy p,.hero-copy h1 .muted,.hero-product-heading p,.hero-footer,.workspace-label){color:var(--muted)}
.hero-hotspots .disclosure-button{color:var(--text);background:rgba(246,248,250,.9);border-color:var(--line);box-shadow:0 6px 20px rgba(29,29,31,.09),var(--control-shadow)}
.hero-hotspots .disclosure-button::before{box-shadow:none}
.button.primary{background:var(--accent);box-shadow:none}
.button.primary:hover:not(:disabled){background:var(--accent-dark);box-shadow:none}
:is(.button.secondary,.button.outline,.workspace-caption .disclosure-button,.panel-toggle,.button.icon-button){background:var(--card-fill)!important;border-color:var(--line);box-shadow:none}
:is(.actions,.hero-footer) .button.ghost{background:var(--card-fill);border-color:var(--line);box-shadow:none;padding-inline:18px}
:is(.button.secondary,.button.outline,.button.ghost):hover:not(:disabled){background:#f0f2f5!important}
/* Keep the translucent workbench as a deliberate product layer. */
.workspace-panel{background:var(--panel-fill);border-color:rgba(29,29,31,.1);box-shadow:var(--panel-shadow)}
.workspace-panel :is(.settings-group,.configuration-result,.device-identity,.device-empty,.environment-summary){background:var(--workspace-card-fill);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.workspace-panel :is(.configuration-result,.device-identity,.device-empty){box-shadow:0 3px 12px rgba(29,29,31,.035),inset 0 1px 0 rgba(255,255,255,.9)}
.workspace-panel .field-row+.field-row{border-top-color:var(--line)}
.workspace-panel :is(input,select,textarea){background:rgba(255,255,255,.88);border-color:rgba(29,29,31,.1)}
.workspace-panel .field-row:focus-within{background:rgba(255,255,255,.72);box-shadow:inset 2px 0 var(--accent)}
.workspace-panel .country-options{background:#fff;border-color:var(--line);box-shadow:0 8px 24px rgba(29,29,31,.09)}
.nav-hover-indicator{background:var(--card-fill);box-shadow:none}
@media(max-width:767px){.nav-link[aria-current=page]{background:var(--card-fill);box-shadow:none}}
.sidebar-toggle{border-color:var(--line);background:var(--card-fill);box-shadow:none}
.panel-scroll{scrollbar-color:#c6c6cb transparent}
dialog{background:rgba(246,247,249,.9)!important;border-color:rgba(255,255,255,.92)!important;box-shadow:0 28px 80px rgba(29,29,31,.17),0 6px 20px rgba(29,29,31,.08),inset 0 1px 0 #fff!important;backdrop-filter:blur(28px) saturate(115%)}
.mobile-header{background:rgba(255,255,255,.96);border-color:var(--line)}

/* One white paper surface carries the model across all four routes. */
:root{--poster-paper:#fff;--poster-ink:#202830;--poster-note:#52606d;--poster-gutter:clamp(28px,3.2vw,64px);--muted:#626c76}
html,body{overflow-x:clip}
::selection{background:#cbdff1;color:#202830}
body,.main-shell,#model-stage,.topline{background:var(--poster-paper)}
.sidebar{background:var(--sidebar-surface)}
@media(min-width:768px){.sidebar{border-right:1px solid var(--sidebar-line)}}
/* The moving indicator owns the desktop selection; mobile keeps a static state. */
@media(min-width:768px){.sidebar .nav-link[aria-current=page]{background:transparent}}
@media(max-width:767px){.sidebar .nav-link[aria-current=page]{background:var(--card-fill)}}
.button:hover:not(:disabled){transform:none}
.button:active:not(:disabled){transform:translateY(1px)}
body:is([data-page=home],[data-page=product]) #model-stage{height:calc(100% - 76px)}
.hero-page{
 --hero-top:clamp(40px,calc(25svh - 140px),140px);
 display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
 grid-template-areas:'content visual';grid-template-rows:auto;
 align-content:start;align-items:start;column-gap:32px;row-gap:40px;
 padding:var(--hero-top) var(--poster-gutter) 24px;max-width:1800px;margin-inline:auto;
 min-height:calc(100svh - 76px);color:var(--poster-ink);
}
.hero-content{grid-area:content;display:flex;flex-direction:column;gap:40px;min-width:0}
.hero-page .hero-copy{grid-area:copy;position:static;inset:auto;width:auto;max-width:none;margin:0}
.hero-copy h1{font-size:clamp(46px,4.2vw,76px);font-weight:500;line-height:.88;letter-spacing:-.035em;margin:0;color:var(--poster-ink)}
.hero-copy h1 .muted{color:#78818b}
.home-hero .hero-copy h1 .muted{font-size:58.15%}
.product-hero .hero-copy h1 .muted{font-size:58.15%}
.hero-copy .hero-description{font-size:16px;line-height:1.8;color:var(--poster-note);max-width:30em;margin:24px 0 28px}
.hero-page .hero-copy .actions{margin:0;gap:12px;align-items:center;flex-wrap:wrap}
.hero-page .actions .button{min-height:48px;padding:12px 20px;font-size:14px;border:1px solid transparent;border-radius:16px;box-shadow:none}
.hero-page .actions .button:is(.primary,.secondary){border-radius:999px;box-shadow:none}
.hero-page .actions .button.primary{background:var(--accent)!important;border-color:var(--accent);color:#fff}
.hero-page .actions .button.primary:hover:not(:disabled){background:var(--accent-dark)!important;border-color:var(--accent-dark);color:#fff}
.hero-page .actions .button.secondary{padding-inline:20px;background:var(--card-fill)!important;border-color:#cbd4de;color:var(--poster-ink)}
.hero-page .actions .button.secondary:hover:not(:disabled){background:#f7f9fb!important;border-color:#91acc7;color:var(--accent)}
.language-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:32px;padding:4px 12px;border:1px solid #dfe3e7;border-radius:999px;background:#fff;color:var(--poster-ink);font:500 12px/1.3 'Roboto Flex Local',sans-serif;letter-spacing:.02em;cursor:pointer;transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease}
.language-toggle:hover{background:#f7f9fb;border-color:#aebdcb;color:#17518f}
.language-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.language-toggle[data-switching-to]{background:var(--poster-ink);border-color:var(--poster-ink);color:var(--poster-paper)}
.language-curtain{position:fixed;inset:0;width:100vw;height:100dvh;z-index:90;margin:0;padding:0;border:0;border-radius:0;background:var(--poster-ink);pointer-events:none;transform:scaleX(0);transform-origin:left center;will-change:transform}
.hero-side-stack{grid-area:details;position:static;inset:auto;width:auto;display:flex;flex-direction:column;gap:18px;margin:0;max-width:440px}
.hero-index-panel{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.hero-index-panel .detail-row{grid-template-columns:minmax(0,1fr) 20px;gap:16px;min-height:74px;padding:14px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.hero-index-panel .index-copy{gap:5px}
.hero-index-panel .index-copy strong{font-size:16px;font-weight:550;line-height:1.5;color:var(--poster-ink)}
.hero-index-panel .index-copy>span{font-size:13px;line-height:1.6;color:var(--poster-note)}
.hero-index-panel .detail-row svg{color:var(--poster-note)}
.hero-index-panel .detail-row:is(:hover,:focus-visible) .index-copy strong,
.hero-index-panel .detail-row:is(:hover,:focus-visible) svg{color:var(--accent)}
.hero-side-stack .hero-demo{align-self:flex-start;min-height:44px;padding:9px 18px;border:1px solid #b8cadc;border-radius:999px;background:var(--card-fill)!important;box-shadow:none;font-size:13px;color:var(--accent)}
.hero-side-stack .hero-demo:hover:not(:disabled){background:#fff!important;border-color:var(--accent);color:var(--accent)}
.hero-visual-region{grid-area:visual;position:relative;align-self:stretch;min-width:0;min-height:620px;margin:0}
.home-hero .hero-visual-region{align-self:center;min-height:0;aspect-ratio:1.1}
.hero-visual-region figcaption{position:absolute;left:16px;right:16px;bottom:0;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;font-size:13px;line-height:1.6;color:var(--poster-note)}
.hero-visual-region figcaption strong{font-size:14px;font-weight:550;color:var(--poster-ink)}
.home-hero .hero-visual-region figcaption{justify-content:flex-end}
.product-hero .hero-content{gap:32px}
.product-hero .hero-visual-region{height:min(775px,calc(100svh - 100px - var(--hero-top)));min-height:0}
.product-copy .hero-description{max-width:19em}
.nav-link{color:var(--muted)}
.nav-hover-indicator{background:var(--card-fill)}
.sidebar-toggle{box-shadow:none}
@media(min-width:960px) and (max-height:850px){
 .hero-content,.product-hero .hero-content{gap:20px}
 .hero-copy h1{font-size:clamp(40px,4vw,68px)}
 .hero-copy .hero-description{margin-block:16px 20px}
 .hero-index-panel .detail-row{min-height:64px;padding-block:10px}
}
@media(min-width:960px) and (max-height:640px){
 .hero-page{--hero-top:24px}
 .hero-content,.product-hero .hero-content{gap:12px}
 .hero-copy h1{font-size:clamp(36px,3.6vw,50px)}
 .hero-copy .hero-description{margin-block:12px 14px}
 .hero-index-panel .detail-row{min-height:56px;padding-block:6px}
 .product-hero .hero-visual-region{height:calc(100svh - 140px)}
}
@media(min-width:960px) and (max-width:1199px){
 .hero-page{--poster-gutter:clamp(22px,2.8vw,34px);grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);column-gap:24px}
 .hero-copy h1{font-size:clamp(40px,4vw,54px)}
 .hero-side-stack{max-width:none}
}
@media(min-width:960px) and (max-width:1039px){
 .hero-page .hero-copy .actions{gap:8px}
 .hero-page .actions .button{min-height:44px;padding:10px 12px;font-size:13px}
}
@media(min-width:768px) and (max-width:959px){
 .hero-page{grid-template-columns:1fr;grid-template-areas:'copy' 'visual' 'details';gap:32px;padding:40px 36px;min-height:0;max-width:880px}
 .hero-content{display:contents}
 .hero-copy h1{font-size:clamp(46px,5.5vw,64px)}
 .hero-side-stack{max-width:none}
 .home-hero .hero-visual-region{aspect-ratio:auto;height:390px}
 .product-hero .hero-visual-region{height:650px}
 body:is([data-page=home],[data-page=product]) #model-stage{height:calc(100% - 76px)}
}
@media(max-width:767px){
 .hero-page{grid-template-columns:1fr;grid-template-areas:'copy' 'visual' 'details';gap:26px;min-height:0;padding:24px 24px 32px}
 .hero-content{display:contents}
 .hero-copy h1{font-size:clamp(35px,9.25vw,49px);line-height:.88;letter-spacing:-.035em}
 .hero-copy .hero-description{font-size:15px;line-height:1.75;margin:18px 0 22px}
 .hero-page .actions .button{font-size:13px;padding:12px 15px;min-height:46px}
 .hero-page .actions .button.secondary{padding-inline:15px}
 .hero-page .hero-side-stack{width:100%;margin:0;gap:10px}
 .home-hero .hero-visual-region{height:290px;aspect-ratio:auto;margin-inline:-8px}
 .product-hero .hero-visual-region{height:clamp(480px,142vw,620px);min-height:0;margin-inline:-8px}
 .hero-visual-region figcaption{left:8px;right:8px;font-size:12px;gap:2px}
 .hero-visual-region figcaption strong{font-size:13px}
 .hero-index-panel .detail-row{min-height:78px;padding-block:16px}
 .hero-side-stack .hero-demo{font-size:13px}
 body:is([data-page=home],[data-page=product]) #model-stage{height:calc(100% - 56px)}
}
@media(max-width:375px){
 .workspace-panel .configuration-layout{grid-template-columns:minmax(0,1fr)}
 .workspace-panel .configuration-layout>*{min-width:0}
 .workspace-panel .field-row:has(>select){flex-wrap:wrap}
 .workspace-panel .field-row>select{width:100%;max-width:none;min-width:0}
}
@media(prefers-reduced-motion:reduce){.hero-page .actions .button:hover{transform:none}}

/* Motion keeps actions legible while the product model owns the focal movement. */
:root{--motion-quick:140ms;--motion-soft:220ms;--motion-enter:cubic-bezier(.16,1,.3,1);--motion-exit:cubic-bezier(.7,0,.84,0)}
.button{transition:transform var(--motion-quick) var(--motion-enter),background-color var(--motion-soft) var(--motion-enter),border-color var(--motion-soft) var(--motion-enter),color var(--motion-soft) var(--motion-enter)}
.button:active:not(:disabled){transform:scale(.985)}
@media(hover:hover) and (pointer:fine){
 .hero-page .actions .button:hover:not(:disabled),.hero-demo:hover:not(:disabled),.workspace-panel .button:hover:not(:disabled),.sidebar-bottom .button:hover:not(:disabled){transform:translateY(-1px)}
 .hero-page .actions .button:active:not(:disabled),.hero-demo:active:not(:disabled),.workspace-panel .button:active:not(:disabled),.sidebar-bottom .button:active:not(:disabled){transform:scale(.985)}
}
.hero-index-panel .detail-row svg{transition:transform var(--motion-soft) var(--motion-enter),color var(--motion-soft) var(--motion-enter)}
.hero-index-panel .detail-row:is(:hover,:focus-visible) svg{transform:translateX(4px)}
.hero-index-panel .index-copy strong{transition:color var(--motion-soft) var(--motion-enter)}
dialog[open]{animation:quiet-dialog-enter 260ms var(--motion-enter) both}
dialog::backdrop{backdrop-filter:blur(6px)}
dialog[open]::backdrop{animation:quiet-backdrop-enter 220ms var(--motion-enter) both}
dialog[open].is-closing::backdrop{animation:quiet-backdrop-exit 150ms var(--motion-exit) both}
@keyframes quiet-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes quiet-backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes quiet-backdrop-exit{from{opacity:1}to{opacity:0}}
@media(max-width:767px){
 .sidebar{display:flex;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity 180ms var(--motion-exit),transform 180ms var(--motion-exit),visibility 0s linear 180ms}
 .sidebar.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto;animation:none;transition:opacity 220ms var(--motion-enter),transform 280ms var(--motion-enter),visibility 0s}
}
@media(prefers-reduced-motion:reduce){
 .hero-page .actions .button:is(:hover,:active):not(:disabled),.hero-demo:is(:hover,:active):not(:disabled),.workspace-panel .button:is(:hover,:active):not(:disabled),.sidebar-bottom .button:is(:hover,:active):not(:disabled),.button:active:not(:disabled),.hero-index-panel .detail-row:is(:hover,:focus-visible) svg{transform:none}
 .sidebar,.sidebar.open{transform:none}
}

/* Detail panels enter as one surface; the copy follows as a single group. */
#detail-dialog[open]{animation:none;transform-origin:center 38%}
#detail-dialog::backdrop{backdrop-filter:none;background:color-mix(in srgb,var(--text) 20%,transparent)}
#detail-dialog[open]::backdrop{animation:detail-backdrop-enter 340ms ease-out both}
#detail-dialog[open].is-closing::backdrop{animation:detail-backdrop-exit 180ms ease-in both}
@keyframes detail-backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes detail-backdrop-exit{from{opacity:1}to{opacity:0}}

/* Keep mode selection and its compact apply action together. */
@media(min-width:1200px){.device-dashboard{grid-template-columns:minmax(0,1fr) 360px}}
.device-controls .device-check-note{margin:0;padding:14px 18px 18px;line-height:1.65}
.device-controls .field-row:has(.inline-control){display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.device-controls .field-row:has(.inline-control) .field-label{min-width:0}
.device-controls .field-row:has(.inline-control) .inline-control{display:flex;width:100%;min-width:0;flex-wrap:nowrap}
.device-controls .field-row:has(.inline-control) select{flex:1 1 auto;width:0;min-width:0;max-width:none}
.device-controls .field-row:has(.inline-control) .button{flex:0 0 auto;white-space:nowrap}
.device-controls :is(.button[data-action="device-download"],.device-hold){width:104px;min-width:104px;height:44px;min-height:44px;flex:0 0 104px;padding:5px 8px;text-align:center;white-space:normal;line-height:1.2}
.workspace-panel .device-hold{position:relative;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--error-bg)!important;color:var(--error)!important;border-color:transparent}
.workspace-panel .device-hold.is-armed{animation:device-hold-arm 260ms cubic-bezier(.16,1,.3,1)}
@keyframes device-hold-arm{0%{transform:scale(.96);box-shadow:0 0 0 0 color-mix(in srgb,var(--error) 30%,transparent)}55%{transform:scale(1.015);box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 18%,transparent)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
.device-hold-content{position:relative;z-index:1;display:block;width:100%;text-align:center}
.device-hold-fill{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;background:color-mix(in srgb,var(--error) 75%,var(--text));color:var(--card-fill);clip-path:inset(0 100% 0 0);transition:clip-path 180ms var(--motion-enter)}
.device-hold-fill-content{display:block;width:100%;padding:5px 8px;text-align:center}
.device-hold.is-holding .device-hold-fill{clip-path:inset(0 0 0 0);transition:clip-path 1000ms linear;will-change:clip-path}
.device-hold.is-complete .device-hold-fill{clip-path:inset(0 0 0 0);transition:none}
.workspace-panel .button.device-hold.is-holding{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
 #detail-dialog[open]::backdrop,#detail-dialog[open].is-closing::backdrop{animation:none}
 .device-hold-fill,.device-hold.is-holding .device-hold-fill{transition:none;clip-path:inset(0 100% 0 0)}
 .workspace-panel .device-hold.is-armed{animation:none}
 .workspace-panel .device-hold.is-holding{transform:none}
}