/* Shared website theme: flat content, restrained depth for workspace and controls.
   Studio + Refined Ink supplies every color.
   Adjust --soft-ui-depth to tune offsets and blur together (default: 1).
   All interaction layers keep the same order so shadows interpolate smoothly. */
.site-hybrid{
  --soft-ui-depth:1;
  /* Material profiles stay fixed when the page theme changes. These are the
     approved light/dark palette values in site.css, not new brand colors. */
  --soft-ui-light-highlight:#ffffff;
  --soft-ui-light-shade:color-mix(in srgb,#f7f8fa 78%,#5c6776);
  --soft-ui-light-inner-edge:#ffffff;
  --soft-ui-dark-highlight:color-mix(in srgb,#282d36 45%,transparent);
  --soft-ui-dark-shade:#0004;
  --soft-ui-dark-inner-edge:color-mix(in srgb,#282d36 70%,transparent);
  --soft-ui-surface:color-mix(in srgb,var(--sp-canvas) 78%,var(--sp-surface));
  --soft-ui-highlight:var(--soft-ui-light-highlight);
  --soft-ui-shade:var(--soft-ui-light-shade);
  --soft-ui-edge:color-mix(in srgb,var(--sp-surface) 65%,var(--sp-border));
  --soft-ui-inner-edge:var(--soft-ui-light-inner-edge);
  --soft-ui-workspace-shadow:
    calc(6px * var(--soft-ui-depth)) calc(10px * var(--soft-ui-depth)) calc(24px * var(--soft-ui-depth)) var(--sp-shadow),
    calc(-2px * var(--soft-ui-depth)) calc(-2px * var(--soft-ui-depth)) calc(8px * var(--soft-ui-depth)) var(--soft-ui-highlight),
    inset 1px 1.5px 0 var(--soft-ui-inner-edge);
  --soft-ui-control-shadow:
    calc(2px * var(--soft-ui-depth)) calc(2px * var(--soft-ui-depth)) calc(5px * var(--soft-ui-depth)) var(--soft-ui-shade),
    calc(-2px * var(--soft-ui-depth)) calc(-2px * var(--soft-ui-depth)) calc(5px * var(--soft-ui-depth)) var(--soft-ui-highlight);
  --soft-ui-control-hover-shadow:
    calc(6px * var(--soft-ui-depth)) calc(6px * var(--soft-ui-depth)) calc(12px * var(--soft-ui-depth)) var(--soft-ui-shade),
    calc(-5px * var(--soft-ui-depth)) calc(-5px * var(--soft-ui-depth)) calc(11px * var(--soft-ui-depth)) var(--soft-ui-highlight);
  --soft-ui-control:var(--soft-ui-control-shadow),inset 1px 1.5px 0 var(--soft-ui-inner-edge),inset 0 0 0 var(--soft-ui-shade),inset 0 0 0 var(--soft-ui-highlight);
  --soft-ui-control-hover:var(--soft-ui-control-hover-shadow),inset 1px 1.5px 0 var(--soft-ui-inner-edge),inset 0 0 0 var(--soft-ui-shade),inset 0 0 0 var(--soft-ui-highlight);
  --soft-ui-inset:
    0 0 0 var(--soft-ui-shade),0 0 0 var(--soft-ui-highlight),inset 0 0 0 var(--soft-ui-inner-edge),
    inset calc(2px * var(--soft-ui-depth)) calc(2px * var(--soft-ui-depth)) calc(5px * var(--soft-ui-depth)) var(--soft-ui-shade),
    inset calc(-2px * var(--soft-ui-depth)) calc(-2px * var(--soft-ui-depth)) calc(5px * var(--soft-ui-depth)) var(--soft-ui-highlight);
  --soft-ui-inset-pressed:
    0 0 0 var(--soft-ui-shade),0 0 0 var(--soft-ui-highlight),inset 0 0 0 var(--soft-ui-inner-edge),
    inset calc(3px * var(--soft-ui-depth)) calc(3px * var(--soft-ui-depth)) calc(6px * var(--soft-ui-depth)) var(--soft-ui-shade),
    inset calc(-3px * var(--soft-ui-depth)) calc(-3px * var(--soft-ui-depth)) calc(6px * var(--soft-ui-depth)) var(--soft-ui-highlight);
  /* Contrast actions have their own material and cast shadow. Their face
     catches a fine top highlight without an exterior light halo. */
  --soft-ui-primary-face:linear-gradient(180deg,color-mix(in srgb,var(--soft-ui-light-highlight) 7%,transparent),transparent 75%);
  --soft-ui-primary-border:color-mix(in srgb,var(--sp-primary) 82%,#000);
  --soft-ui-primary-top:color-mix(in srgb,var(--soft-ui-light-highlight) 15%,transparent);
  --soft-ui-primary-bottom:color-mix(in srgb,#000 22%,transparent);
  --soft-ui-primary-contact:color-mix(in srgb,var(--sp-primary) 22%,transparent);
  --soft-ui-primary-cast:color-mix(in srgb,var(--sp-primary) 25%,transparent);
  --soft-ui-primary-pressed-edge:color-mix(in srgb,#000 28%,transparent);
  --soft-ui-primary-pressed-light:color-mix(in srgb,var(--soft-ui-light-highlight) 4%,transparent);
  --soft-ui-primary-rest:
    0 calc(1px * var(--soft-ui-depth)) calc(2px * var(--soft-ui-depth)) var(--soft-ui-primary-contact),
    0 calc(5px * var(--soft-ui-depth)) calc(12px * var(--soft-ui-depth)) calc(-5px * var(--soft-ui-depth)) var(--soft-ui-primary-cast),
    inset 0 1px 0 var(--soft-ui-primary-top),
    inset 0 -1px 0 var(--soft-ui-primary-bottom);
  --soft-ui-primary-hover:
    0 calc(2px * var(--soft-ui-depth)) calc(3px * var(--soft-ui-depth)) var(--soft-ui-primary-contact),
    0 calc(9px * var(--soft-ui-depth)) calc(18px * var(--soft-ui-depth)) calc(-5px * var(--soft-ui-depth)) var(--soft-ui-primary-cast),
    inset 0 1px 0 var(--soft-ui-primary-top),
    inset 0 -1px 0 var(--soft-ui-primary-bottom);
  --soft-ui-primary-pressed:
    0 calc(1px * var(--soft-ui-depth)) calc(1px * var(--soft-ui-depth)) var(--soft-ui-primary-contact),
    0 calc(1px * var(--soft-ui-depth)) calc(2px * var(--soft-ui-depth)) calc(-1px * var(--soft-ui-depth)) var(--soft-ui-primary-cast),
    inset 0 calc(2px * var(--soft-ui-depth)) calc(4px * var(--soft-ui-depth)) var(--soft-ui-primary-pressed-edge),
    inset 0 -1px 0 var(--soft-ui-primary-pressed-light);
}
:root[data-theme=dark] .site-hybrid{
  --soft-ui-surface:color-mix(in srgb,var(--sp-surface) 80%,var(--sp-canvas));
  --soft-ui-highlight:var(--soft-ui-dark-highlight);
  --soft-ui-shade:var(--soft-ui-dark-shade);
  --soft-ui-edge:color-mix(in srgb,var(--sp-surface) 62%,var(--sp-border));
  --soft-ui-inner-edge:var(--soft-ui-dark-inner-edge);
  /* Neutral pale material: a restrained white crown, gray lower bevel and
     dark contact shadow anchor the button to the surrounding dark canvas. */
  --soft-ui-primary-face:linear-gradient(180deg,color-mix(in srgb,var(--soft-ui-light-highlight) 45%,transparent),transparent 80%);
  --soft-ui-primary-border:color-mix(in srgb,var(--sp-primary) 94%,var(--sp-on-primary));
  --soft-ui-primary-top:color-mix(in srgb,var(--soft-ui-light-highlight) 80%,transparent);
  --soft-ui-primary-bottom:color-mix(in srgb,var(--sp-on-primary) 10%,transparent);
  --soft-ui-primary-contact:color-mix(in srgb,#000 45%,transparent);
  --soft-ui-primary-cast:color-mix(in srgb,#000 60%,transparent);
  --soft-ui-primary-pressed-edge:color-mix(in srgb,var(--sp-on-primary) 17%,transparent);
  --soft-ui-primary-pressed-light:color-mix(in srgb,var(--soft-ui-light-highlight) 45%,transparent);
}

.site-hybrid :is(.hero,.page-head){background:var(--paper)}
.site-hybrid .workspace-demo:before{content:none}
.site-hybrid .header{background:var(--surface);backdrop-filter:none}
/* Quiet content surfaces keep the drawings and the calls to action in focus. */
.site-hybrid :is(.summary-strip>div,.card,.landing-plan,.managed-offer,.cta){
  background:var(--surface);
  border-color:var(--line);
  box-shadow:none;
}
.site-hybrid .workspace-shell{
  position:relative;
  --canvas-chrome:var(--soft-ui-surface);
  --canvas:var(--soft-ui-surface);
  background:var(--soft-ui-surface);
  border-color:var(--line);
  box-shadow:var(--soft-ui-workspace-shadow);
}
/* Keep the window rim above its opaque title bar and panels. */
.site-hybrid .workspace-shell:after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 1px 1.5px 0 var(--soft-ui-inner-edge);pointer-events:none}
.site-hybrid :is(.workspace-title,.workspace-toolbar,.workspace-caption,.workspace-steps){background:var(--soft-ui-surface)}

/* Color stays fixed through hover and press; only the lighting moves. */
.site-hybrid :is(.button,.theme-toggle,.menu-toggle){
  --soft-ui-interaction-rest:var(--soft-ui-primary-rest);
  --soft-ui-interaction-hover:var(--soft-ui-primary-hover);
  --soft-ui-interaction-pressed:var(--soft-ui-primary-pressed);
  --soft-ui-button-surface:var(--charcoal);
  --soft-ui-button-ink:var(--on-primary);
  --soft-ui-button-edge:var(--soft-ui-primary-border);
  --soft-ui-button-face:var(--soft-ui-primary-face);
  background:var(--soft-ui-button-surface);
  background-image:var(--soft-ui-button-face);
  color:var(--soft-ui-button-ink);
  border-color:var(--soft-ui-button-edge);
  box-shadow:var(--soft-ui-interaction-rest);
  transition:box-shadow .18s cubic-bezier(.2,.65,.3,1);
}
.site-hybrid :is(.button.secondary,.button.outline,.theme-toggle,.menu-toggle){
  --soft-ui-button-surface:var(--soft-ui-surface);
  --soft-ui-button-ink:var(--ink);
  --soft-ui-button-edge:var(--soft-ui-edge);
  --soft-ui-button-face:none;
  --soft-ui-interaction-rest:var(--soft-ui-control);
  --soft-ui-interaction-hover:var(--soft-ui-control-hover);
  --soft-ui-interaction-pressed:var(--soft-ui-inset-pressed);
}
.site-hybrid .header-tools :is(.theme-toggle,.menu-toggle){
  /* These controls have no border width; keep their edge inside the frame. */
  --soft-ui-interaction-rest:inset 0 0 0 1px var(--input-line),var(--soft-ui-control);
  --soft-ui-interaction-hover:inset 0 0 0 1px var(--input-line),var(--soft-ui-control-hover);
  --soft-ui-interaction-pressed:inset 0 0 0 1px var(--input-line),var(--soft-ui-inset-pressed);
}
/* Match the quieter workspace controls in dark mode: no extra perimeter
   on secondary actions, and a softer edge on the compact header controls. */
:root[data-theme=dark] .site-hybrid :is(.button.secondary,.button.outline){
  --soft-ui-button-edge:transparent;
}
:root[data-theme=dark] .site-hybrid .header-tools :is(.theme-toggle,.menu-toggle){
  --soft-ui-interaction-rest:inset 0 0 0 1px var(--soft-ui-edge),var(--soft-ui-control);
  --soft-ui-interaction-hover:inset 0 0 0 1px var(--soft-ui-edge),var(--soft-ui-control-hover);
  --soft-ui-interaction-pressed:inset 0 0 0 1px var(--soft-ui-edge),var(--soft-ui-inset-pressed);
}
.site-hybrid :is(.button,.theme-toggle,.menu-toggle):is(:hover,:active){
  background:var(--soft-ui-button-surface);
  background-image:var(--soft-ui-button-face);
  color:var(--soft-ui-button-ink);
  border-color:var(--soft-ui-button-edge);
  box-shadow:var(--soft-ui-interaction-hover);
}
.site-hybrid :is(.button,.theme-toggle,.menu-toggle):active{box-shadow:var(--soft-ui-interaction-pressed)}

/* One soft button style: raised at rest, recessed when selected or pressed.
   The small ink marker identifies selection independently of the shadows. */
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button){
  --soft-ui-interaction-rest:var(--soft-ui-control);
  --soft-ui-interaction-hover:var(--soft-ui-control-hover);
  position:relative;
  font-weight:500;
  background:var(--soft-ui-surface);
  color:var(--canvas-ink);
  border-color:var(--soft-ui-edge);
  box-shadow:var(--soft-ui-interaction-rest);
  transition:box-shadow .18s cubic-bezier(.2,.65,.3,1);
}
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button):after{content:"";position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--canvas-ink);opacity:0;visibility:inherit;pointer-events:none}
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button)[aria-pressed=true]:after{opacity:1}
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button)[aria-pressed=true]{
  --soft-ui-interaction-rest:var(--soft-ui-inset);
  --soft-ui-interaction-hover:var(--soft-ui-inset-pressed);
  background:var(--soft-ui-surface);
  color:var(--canvas-ink);
  border-color:var(--soft-ui-edge);
}
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button):is(:hover,:active){
  background:var(--soft-ui-surface);
  color:var(--canvas-ink);
  border-color:var(--soft-ui-edge);
  box-shadow:var(--soft-ui-interaction-hover);
}
.site-hybrid :is(.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button):active{
  box-shadow:var(--soft-ui-inset-pressed);
}
.site-hybrid a.card{transition:none}
.site-hybrid a.card:is(:hover,:active){background:var(--surface);border-color:var(--line);box-shadow:none}
.site-hybrid a.card:is(:hover,:active) .text-link{text-decoration:underline}

/* Inputs are quiet recessed wells. Background-color preserves select arrows. */
.site-hybrid :is(.field input,.field select,.field textarea,.search-box input){
  background-color:var(--soft-ui-surface);
  box-shadow:var(--soft-ui-inset);
}
.site-hybrid .pricing-switch{gap:6px;background-color:var(--paper);border-color:var(--line)}
.site-hybrid .table-wrap{box-shadow:none}
.site-hybrid :is(.text-button,summary):hover{text-decoration:underline;text-underline-offset:4px}
.site-hybrid .side-nav a:hover{background:transparent;color:var(--ink);text-decoration:underline}

/* Focus and disabled cues remain independent of the decorative shadows. */
.site-hybrid :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.site-hybrid :is(button,input,select,textarea):disabled,
.site-hybrid :is(.button,.theme-toggle,.menu-toggle,.pricing-switch button):disabled,
.site-hybrid .button[aria-disabled=true]{box-shadow:none;opacity:.6;cursor:default}
@media(prefers-reduced-motion:reduce){
  .site-hybrid :is(.button,.theme-toggle,.menu-toggle,.workspace-steps button,.workspace-control,.workspace-view-tabs button,.pricing-switch button,a.card){transition:none}
}
@media print{.site-hybrid *{box-shadow:none!important}}