@charset "UTF-8";
:root {
  color-scheme:dark;
  --ink:#060607;
  --panel:#121215;
  --line:#ffffff18;
  --yellow:#ffff00;
  --paper:#f7f7f7;
  --muted:#a0a0a8;
  --surface:#0d0d0f;
  --raised:#18181b;
  --inset:#09090b;
  --subtle:#85858f;
  --secondary:#b8b8c0;
  --text:#d9d9df;
  --accent-ink:#ffff00;
  --on-accent:#060607;
  --line-medium:#ffffff30;
  --line-strong:#ffffff40;
  --wash:#ffffff03;
  --hover-wash:#ffffff08;
  --header-background:#060607e8;
  --floating-background:#18181beb;
  --focus:#ffff00;
  --shadow:#0005;
  --vessel-edge:#18181b;
  --vessel-center:#2b2b30;
  --vessel-end:#121215;
  --head:'Sora',sans-serif;
  --body:'Onest',sans-serif;
  --gutter:clamp(22px,4vw,80px)
}
:root[data-theme="light"] {
  color-scheme:light;
  --ink:#f7f7f9;
  --panel:#ffffff;
  --line:#0606071f;
  --paper:#141416;
  --muted:#62626c;
  --surface:#f0f0f4;
  --raised:#ededf2;
  --inset:#fafafa;
  --subtle:#64646d;
  --secondary:#46464f;
  --text:#27272f;
  --accent-ink:#141416;
  --line-medium:#06060729;
  --line-strong:#06060738;
  --wash:#06060704;
  --hover-wash:#06060708;
  --header-background:#f7f7f9eb;
  --floating-background:#ffffffeb;
  --focus:#060607;
  --shadow:#06060710;
  --vessel-edge:#dedee4;
  --vessel-center:#fafafb;
  --vessel-end:#c5c5ce
}
:root[data-theme="light"] .brand img {
  filter:invert(1)
}
:root[data-theme="light"] .tool-strip img {
  filter:grayscale(1) invert(1)
}
:root[data-theme="light"] h1 span,
:root[data-theme="light"] h2 span {
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:.14em;
  text-underline-offset:.08em;
  text-decoration-skip-ink:none
}
.drawing-outline,.drawing-grid {
  stroke:var(--paper)
}
.drawing-labels {
  fill:var(--secondary)
}
.vessel-drawing linearGradient stop:first-child {
  stop-color:var(--vessel-edge)
}
.vessel-drawing linearGradient stop:nth-child(2) {
  stop-color:var(--vessel-center)
}
.vessel-drawing linearGradient stop:last-child {
  stop-color:var(--vessel-end)
}
:root[data-theme="light"] .vessel-drawing [stroke="#ffff00"] {
  stroke:var(--paper)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:115px
}
body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
svg {
  display:block
}
button {
  color:inherit
}
button:disabled {
  cursor:default
}
::selection {
  background:var(--yellow);
  color:var(--on-accent)
}
:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:5px
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--head);
  font-weight:600
}
h1,h2 {
  letter-spacing:-.065em
}
h1 span,h2 span {
  color:var(--accent-ink)
}
p {
  line-height:1.65
}
ul {
  padding:0;
  list-style:none
}
.wide {
  width:calc(100% - var(--gutter)*2);
  max-width:1780px;
  margin-inline:auto
}
.icon {
  width:22px;
  height:22px;
  flex-shrink:0
}
.eyebrow {
  font-size:12px;
  line-height:1.5;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--secondary);
  margin-bottom:28px
}
.eyebrow>span {
  flex:none;
  width:7px;
  height:7px;
  background:var(--yellow)
}
.small-label {
  font-size:12px;
  letter-spacing:.15em;
  font-weight:500;
  color:var(--muted)
}
.mono {
  font-family:monospace;
  font-size:12px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  min-height:55px;
  padding:15px 23px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  transition:transform .2s,background .2s,border-color .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-yellow {
  background:var(--yellow);
  color:var(--on-accent)
}
.button-yellow:hover {
  background:#e5e500
}
.button-ghost {
  border-color:var(--line-medium);
  background:transparent
}
.button-ghost:hover {
  border-color:var(--paper);
  background:var(--hover-wash)
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 14px #ffff0040
}
.skip-link {
  position:fixed;
  top:10px;
  left:20px;
  background:var(--yellow);
  color:var(--on-accent);
  padding:12px;
  z-index:200;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--line);
  background:var(--header-background);
  backdrop-filter:blur(20px)
}
.nav-inner {
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.nav-tools {
  display:flex;
  align-items:center;
  gap:20px;
  flex-shrink:0
}
.theme-toggle {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:var(--panel);
  color:var(--paper)
}
.theme-toggle:hover {
  background:var(--hover-wash)
}
.theme-toggle .icon {
  width:19px;
  height:19px
}
:root[data-theme="dark"] .theme-moon,
:root[data-theme="light"] .theme-sun {
  display:none
}
.brand {
  display:block;
  flex-shrink:0
}
.brand img {
  height:46px;
  width:auto;
  object-fit:contain
}
.desktop-nav {
  display:flex;
  gap:36px;
  align-items:center
}
.desktop-nav>a {
  font-size:13px;
  color:var(--secondary);
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .2s
}
.desktop-nav>a:hover,.desktop-nav>a[aria-current] {
  color:var(--paper)
}
.nav-live {
  font-size:11px;
  color:var(--accent-ink);
  padding:3px 6px;
  border:1px solid #ffff0033;
  border-radius:3px
}
.nav-contact {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  border-bottom:1px solid var(--yellow);
  padding:10px 0
}
.nav-contact .icon {
  width:17px;
  height:17px;
  color:var(--accent-ink)
}
:root[data-theme="light"] .nav-live {
  background:var(--on-accent);
  border-color:var(--on-accent);
  color:var(--yellow);
  font-size:12px;
  padding:4px 7px
}
:root[data-theme="light"] .nav-contact {
  min-height:44px;
  padding:11px 16px;
  gap:14px;
  border:1px solid var(--on-accent);
  border-radius:6px;
  background:var(--yellow);
  color:var(--on-accent);
  font-weight:600
}
:root[data-theme="light"] .nav-contact:hover {
  background:#e5e500
}
:root[data-theme="light"] .nav-contact .icon {
  color:inherit
}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line-strong);
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:4px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px
}
.menu-toggle span {
  width:18px;
  height:1px;
  background:var(--paper);
  transition:transform .2s
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.5px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)
}
.mobile-nav {
  padding:12px var(--gutter) 25px;
  border-top:1px solid var(--line)
}
.mobile-nav a {
  display:block;
  padding:14px 0;
  border-bottom:1px solid var(--line)
}
[hidden] {
  display:none!important
}
.hero {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,100px);
  padding-block:35px 32.5px;
  align-items:center
}
.hero h1 {
  max-width:12ch;
  overflow-wrap:normal;
  font-size:clamp(52px,5.5vw,102px);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.07em
}
.hero-copy {
  min-width:0
}
.hero h1 span {
  display:block
}
.hero-description {
  color:var(--secondary);
  font-size:clamp(16px,1.1vw,20px);
  margin-top:28px;
  max-width:530px;
  line-height:1.7
}
.hero-description p+p {
  margin-top:8px;
  font-size:1.07em;
  color:var(--text)
}
.hero-actions {
  display:flex;
  gap:12px;
  margin-top:34px;
  flex-wrap:wrap
}
.hero-actions .button {
  gap:20px
}
.hero-note {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--subtle);
  font-size:12.5px;
  flex-wrap:wrap;
  margin-top:40px
}
.hero-note-divider {
  height:12px;
  width:1px;
  background:var(--line-medium);
  margin-inline:5px
}
.hero-visual {
  min-width:0;
  position:relative;
  padding-bottom:8px
}
.hero-infrastructure {
  margin:0
}
.hero-visual .industrial-image img {
  object-position:65% center
}
.industrial-image {
  position:relative;
  height:clamp(400px,34vw,620px);
  border-radius:10px;
  overflow:hidden;
}
.industrial-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%
}
.industrial-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,#06060788)
}
.hero-image-caption {
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:20px;
  padding:14px 0 0;
  color:var(--secondary);
  font-size:12.5px;
  line-height:1.5
}
.hero-image-caption .image-index {
  flex-shrink:0;
  font-size:11px;
  letter-spacing:.12em
}
.vessel-drawing {
  width:100%;
  height:100%;
  object-fit:contain
}
.scan-line {
  animation:scan 6s ease-in-out infinite;
  transform-origin:center
}
.drawing-point {
  animation:pulse 3s ease-in-out infinite
}
@keyframes scan {
  0%,100% {
    transform:translateY(-95px);
    opacity:.2
  }
  50% {
    transform:translateY(95px);
    opacity:.6
  }
}
@keyframes pulse {
  50% {
    opacity:.45
  }
}
.tool-strip {
  display:flex;
  align-items:center;
  gap:50px;
  border-block:1px solid var(--line);
  padding-block:28px
}
.tool-strip>p {
  font-size:12.5px;
  color:var(--subtle);
  min-width:145px;
  line-height:1.8
}
.tool-strip strong {
  font-weight:400;
  color:var(--muted)
}
.tool-strip>div {
  flex:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.tool-strip img {
  max-width:100px;
  height:25px;
  width:auto;
  object-fit:contain;
  opacity:.65;
  filter:grayscale(1)
}
.section {
  padding-block:55px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:end;
  margin-bottom:28px
}
.section-heading h2 {
  font-size:clamp(38px,3.6vw,64px);
  line-height:1.18
}
.section-heading h2 span {
  color:var(--muted)
}
.section-heading>p {
  font-size:15px;
  max-width:390px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:7px
}
.section-heading .eyebrow {
  margin-bottom:20px
}
.section-heading>.button {
  margin-bottom:8px
}
.workflow-layout {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:clamp(36px,6vw,120px)
}
.workflow-steps {
  display:flex;
  flex-direction:column
}
.workflow-step {
  display:flex;
  text-align:left;
  align-items:center;
  gap:24px;
  background:none;
  border:none;
  border-top:1px solid var(--line);
  padding:25px 0;
  color:var(--subtle);
  flex:1;
  transition:color .2s
}
.workflow-step:last-child {
  border-bottom:1px solid var(--line)
}
.workflow-step>span {
  font-family:monospace;
  font-size:12.5px;
  align-self:flex-start;
  padding-top:5px
}
.workflow-step h3 {
  font-family:var(--body);
  font-size:20px;
  font-weight:500
}
.workflow-step p {
  font-size:13px;
  color:var(--subtle);
  margin-top:8px
}
.workflow-step>.icon {
  margin-left:auto;
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .2s,transform .2s
}
.workflow-step.active,.workflow-step:hover {
  color:var(--paper)
}
.workflow-step.active>span,.workflow-step.active>.icon {
  color:var(--accent-ink)
}
.workflow-step.active>.icon {
  opacity:1;
  transform:none
}
.workflow-preview {
  border:1px solid var(--line);
  border-radius:8px;
  background:radial-gradient(ellipse at top right,#ffff0006,transparent 65%),var(--surface);
  display:flex;
  flex-direction:column;
  min-height:385px;
  overflow:hidden
}
.preview-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 25px;
  border-bottom:1px solid var(--line)
}
.preview-heading .icon {
  width:15px;
  color:var(--subtle)
}
.preview-stage {
  padding:35px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px
}
.document-row {
  border:1px solid var(--line);
  padding:17px;
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--wash);
  border-radius:4px
}
.document-row>.icon {
  color:var(--secondary);
  width:21px
}
.document-row>div {
  flex:1
}
.document-row h4 {
  font-size:13px;
  font-weight:500;
  margin:0
}
.document-row p {
  font-size:12px;
  color:var(--subtle);
  margin-top:5px
}
.document-row>.small-label {
  font-size:11px;
  color:var(--accent-ink)
}
.preview-foot {
  border-top:1px solid var(--line);
  padding:15px 25px;
  font-size:12px;
  color:var(--subtle)
}
.trace-row {
  padding:18px;
  border:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border-radius:4px
}
.trace-row p {
  font-size:12.5px;
  color:var(--muted)
}
.trace-row strong {
  display:block;
  font-size:14px;
  font-weight:400;
  color:var(--text);
  margin-top:5px
}
.trace-row>span {
  color:var(--accent-ink);
  font-size:12px
}
.trace-note {
  color:var(--muted);
  font-size:12.5px;
  padding-top:12px
}
.preview-vessel {
  height:235px
}
.review-row {
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:16px 0;
  font-size:13px
}
.review-row .icon {
  width:17px;
  color:var(--accent-ink)
}
.product-band {
  background:var(--panel);
  border-block:1px solid var(--line)
}
.product-band-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding-block:40px
}
.product-drawing {
  height:480px;
  position:relative;
  background:radial-gradient(ellipse,#ffff0007,transparent 70%)
}
.drawing-label {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  font-family:monospace;
  font-size:12px;
  color:var(--subtle);
  text-align:center;
  letter-spacing:.13em
}
.product-band-copy h2 {
  font-size:clamp(38px,3.3vw,60px);
  line-height:1.18
}
.product-band-copy p {
  margin-top:24px;
  font-size:15px;
  color:var(--muted);
  max-width:520px
}
.check-list {
  margin:28px 0 35px;
  display:grid;
  gap:15px;
  color:var(--secondary);
  font-size:13px
}
.check-list li {
  display:flex;
  align-items:center;
  gap:12px
}
.check-list .icon {
  width:16px;
  height:16px;
  color:var(--accent-ink)
}
.sector-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.sector {
  --paper:#f7f7f7;
  --secondary:#d9d9df;
  --muted:#b8b8c0;
  color:var(--paper);
  height:450px;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--panel);
  isolation:isolate
}
.sector>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s ease;
  filter:grayscale(1) brightness(.8)
}
.sector:hover>img,.sector:focus-within>img {
  transform:scale(1.1);
  filter:grayscale(0) brightness(.92)
}
.sector:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 25%,#060607db)
}
.sector>div {
  position:absolute;
  left:28px;
  right:28px;
  bottom:28px;
  z-index:1
}
.sector .small-label {
  color:var(--secondary);
  font-size:11px
}
.sector h3 {
  font-size:26px;
  letter-spacing:-.04em;
  margin-top:12px
}
.sector p {
  font-size:13px;
  color:var(--muted);
  margin-top:10px
}
.notes-section {
  padding-top:0
}
.team-strip {
  margin-top:80px;
  padding-block:38px 45px;
  border-block:1px solid var(--line)
}
.team-strip h2 {
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
  text-align:center;
  color:var(--secondary)
}
.team-logos {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;
  gap:30px;
  margin:30px 0 0
}
.team-logos li {
  display:grid;
  place-items:center;
  min-width:0
}
.team-logos img {
  width:100%;
  max-width:175px;
  height:80px;
  object-fit:contain;
  filter:grayscale(1)
}
:root[data-theme="light"] .team-logos img {
  filter:grayscale(1) invert(1)
}
@media(max-width:900px) {
  .team-logos {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px
  }
}
@media(max-width:600px) {
  .team-strip {
    margin-top:45px;
    padding-block:30px
  }
  .team-logos {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
  }
  .team-logos img {
    max-width:145px;
    height:72px
  }
  .team-logos li:last-child {
    grid-column:1 / -1
  }
}
.post-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px
}
.post-card {
  display:flex;
  flex-direction:column;
  min-width:0
}
.post-image {
  position:relative;
  aspect-ratio:1.55;
  border-radius:7px;
  overflow:hidden;
  background:var(--raised)
}
.post-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s,filter .6s;
  filter:brightness(.9)
}
.post-card:hover .post-image>img {
  transform:scale(1.035);
  filter:brightness(1.05)
}
.image-arrow {
  color:#f7f7f7;
  position:absolute;
  right:16px;
  bottom:16px;
  width:37px;
  height:37px;
  background:#09090bdf;
  border:1px solid var(--line-medium);
  display:grid;
  place-items:center;
  border-radius:4px;
  transition:background .2s,color .2s
}
.image-arrow .icon {
  width:17px
}
.post-card:hover .image-arrow {
  background:var(--yellow);
  color:var(--on-accent);
  border-color:var(--accent-ink)
}
.post-copy {
  padding:23px 0 0;
  flex:1;
  display:flex;
  flex-direction:column
}
.post-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  color:var(--subtle);
  line-height:1.5
}
.post-meta>span:first-child {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-ink)
}
.post-copy h3 {
  font-size:21px;
  line-height:1.4;
  letter-spacing:-.035em;
  margin-top:15px
}
.post-copy>p {
  color:var(--subtle);
  font-size:13px;
  line-height:1.8;
  margin-top:14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.post-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:25px;
  font-size:12px;
  color:var(--subtle)
}
.post-bottom>span:last-child {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text)
}
.post-bottom .icon {
  width:15px;
  height:15px
}
.site-footer {
  border-top:1px solid var(--line);
  background:var(--surface);
  padding-block:35px 19px
}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:35px;
  border-bottom:1px solid var(--line);
  gap:30px
}
.footer-top h2 {
  font-size:clamp(40px,4.3vw,74px);
  line-height:1.15
}
.footer-bottom {
  padding-top:35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.footer-bottom .brand img {
  height:36px
}
.footer-bottom>p {
  font-size:12px;
  line-height:2;
  color:var(--muted)
}
.footer-bottom>p>span {
  color:var(--subtle)
}
.footer-bottom>div {
  display:flex;
  gap:25px;
  font-size:12.5px;
  color:var(--secondary)
}
.footer-bottom>div>a {
  display:flex;
  align-items:center;
  gap:5px
}
.footer-bottom .icon {
  width:12px;
  height:12px
}
.preview-label {
  position:fixed;
  bottom:12px;
  right:12px;
  z-index:105;
  font-size:11px;
  color:var(--secondary);
  border:1px solid var(--line-medium);
  background:var(--floating-background);
  backdrop-filter:blur(15px);
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  box-shadow:0 5px 20px var(--shadow)
}
.preview-label>i {
  width:4px;
  height:4px;
  background:var(--yellow);
  border-radius:50%
}
.preview-label>span {
  color:var(--subtle);
  border-left:1px solid var(--line-medium);
  padding-left:8px
}
.reveal {
  opacity:1
}
.motion-ready .reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s,transform .65s
}
.motion-ready .reveal.visible {
  opacity:1;
  transform:none
}
.page-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  padding-block:37.5px 32.5px
}
.page-heading h1 {
  font-size:clamp(58px,5.5vw,104px);
  line-height:1.1
}
.page-heading>p {
  font-size:15px;
  color:var(--muted);
  margin-bottom:5px;
  line-height:1.9
}
.featured-post {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  border-block:1px solid var(--line);
  padding-block:30px
}
.featured-post .post-image {
  aspect-ratio:1.7
}
.featured-post .post-copy {
  padding-block:10px
}
.featured-post h3 {
  font-size:clamp(26px,2.5vw,44px);
  line-height:1.25;
  max-width:650px
}
.featured-post .post-copy>p {
  font-size:15px;
  max-width:550px;
  line-height:1.8;
  -webkit-line-clamp:4
}
.featured-post .post-bottom {
  margin-top:auto;
  padding-top:25px
}
.blog-library {
  padding-top:45px
}
.library-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.category-filters {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.category-filters button {
  min-height:44px;
  background:none;
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:4px;
  font-size:12.5px;
  color:var(--subtle)
}
.category-filters button.active {
  background:var(--yellow);
  border-color:var(--accent-ink);
  color:var(--on-accent)
}
.search-field {
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid var(--line-strong);
  padding-block:12px;
  min-width:235px
}
.search-field .icon {
  width:17px;
  height:17px;
  color:var(--subtle)
}
.search-field input {
  min-width:0;
  width:100%;
  background:none;
  border:none;
  outline:none;
  color:var(--paper);
  font-size:13px
}
.library-count {
  font-size:12px;
  color:var(--subtle);
  padding-block:30px 25px
}
.library-grid {
  row-gap:50px
}
.empty-state {
  padding:80px 0;
  text-align:center;
  color:var(--muted)
}
.article-heading {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  align-items:center;
  gap:70px;
  padding-block:50px 60px;
  border-bottom:1px solid var(--line)
}
.back-link {
  display:inline-block;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:32px
}
.article-heading .eyebrow {
  margin-bottom:20px
}
.article-heading h1 {
  font-size:clamp(35px,3.35vw,62px);
  line-height:1.23;
  letter-spacing:-.045em
}
.article-cover {
  width:100%;
  aspect-ratio:1.5;
  height:auto;
  object-fit:cover;
  border-radius:7px
}
.article-meta {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:30px;
  font-size:12.5px;
  color:var(--secondary);
  flex-wrap:wrap
}
.article-meta small {
  display:block;
  font-size:12px;
  color:var(--subtle);
  margin-top:7px;
  line-height:1.6
}
.author-avatar {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--on-accent);
  font-weight:600;
  font-size:12px
}
.article-meta>span:last-child {
  color:var(--subtle);
  margin-left:15px;
  font-size:12px
}
.article-layout {
  display:grid;
  grid-template-columns:230px minmax(0,840px) minmax(180px,240px);
  gap:clamp(30px,4vw,75px);
  justify-content:space-between;
  padding-block:65px 100px
}
.article-toc,.article-aside {
  align-self:start;
  position:sticky;
  top:125px
}
.article-toc>p {
  margin-bottom:22px
}
.article-toc a {
  display:block;
  border-left:1px solid var(--line);
  padding:10px 0 10px 17px;
  color:var(--subtle);
  font-size:12.5px;
  line-height:1.7;
  transition:color .2s,border-color .2s
}
.article-toc a.active,.article-toc a:hover {
  color:var(--paper);
  border-color:var(--accent-ink)
}
.article-content {
  font-size:16px;
  color:var(--secondary);
  line-height:1.9;
  min-width:0
}
.article-content>p {
  margin-bottom:25px;
  line-height:1.9
}
.article-content h2 {
  font-size:30px;
  letter-spacing:-.04em;
  color:var(--paper);
  margin:55px 0 22px;
  line-height:1.35
}
.article-content h3 {
  font-size:21px;
  letter-spacing:-.03em;
  color:var(--text);
  margin:30px 0 15px;
  line-height:1.5
}
.article-content strong {
  color:var(--paper);
  font-weight:600
}
.article-content a {
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:#ffff0066;
  text-underline-offset:4px
}
.article-content blockquote {
  border-left:2px solid var(--yellow);
  margin:30px 0;
  padding:20px 25px;
  background:var(--wash);
  font-size:15px;
  line-height:1.9
}
.article-content figure {
  margin:35px 0
}
.article-content figure img {
  width:100%;
  border-radius:5px
}
.article-content figcaption {
  font-size:12.5px;
  color:var(--subtle);
  line-height:1.7;
  margin-top:15px
}
.article-content ul {
  list-style:disc;
  padding-left:20px
}
.article-content ol {
  padding-left:22px
}
.article-content li {
  padding-left:6px;
  margin-block:12px
}
.article-content hr {
  border:none;
  border-top:1px solid var(--line);
  margin-block:40px
}
.article-content .tw {
  overflow-x:auto;
  margin-block:30px;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:5px
}
.article-content table {
  border-collapse:collapse;
  font-size:13px;
  line-height:1.7;
  min-width:540px;
  width:100%
}
.article-content td,.article-content th {
  padding:15px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}
.article-content th {
  background:var(--raised);
  color:var(--paper);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.article-content .math,.article-content pre {
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:5px;
  padding:20px;
  overflow-x:auto;
  color:var(--paper);
  font-family:monospace;
  font-size:14px
}
.article-content code {
  font-family:monospace;
  color:var(--paper)
}
.article-end {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:40px;
  margin-top:55px
}
.article-end>p {
  font-size:13px;
  line-height:1.8
}
.article-end .button {
  text-decoration:none
}
.article-share {
  border:1px solid var(--line);
  padding:20px;
  border-radius:5px
}
.copy-link {
  border:none;
  background:none;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
  font-size:12.5px;
  margin-top:14px;
  padding:0
}
.copy-link .icon {
  width:13px;
  height:13px
}
.copy-status {
  display:block;
  font-size:12px;
  color:var(--accent-ink);
  margin-top:8px
}
.related-story {
  margin-top:35px
}
.related-story>p {
  margin-bottom:15px
}
.related-story .post-copy h3 {
  font-size:16px
}
.related-story .post-meta {
  display:none
}
.related-story .post-copy>p {
  display:none
}
.related-story .post-bottom {
  font-size:11px
}
.related-story .post-bottom>span:last-child {
  font-size:0
}
.related-story .post-image {
  aspect-ratio:1.4
}
.reading-progress {
  height:2px;
  position:fixed;
  top:89px;
  left:0;
  z-index:102;
  width:0;
  background:var(--yellow)
}
.product-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  padding-block:40px 30px;
  gap:30px
}
.product-hero h1 {
  font-size:clamp(56px,5.3vw,96px);
  line-height:1.15
}
.product-hero-art {
  height:600px;
  position:relative;
  background:radial-gradient(ellipse,#ffff0007,transparent 70%)
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.feature-card {
  border:1px solid var(--line);
  padding:35px;
  border-radius:7px;
  background:var(--panel)
}
.feature-card>.icon {
  color:var(--accent-ink);
  width:27px;
  height:27px;
  margin-bottom:40px
}
.feature-card h3 {
  font-size:23px;
  line-height:1.4;
  letter-spacing:-.04em
}
.feature-card p {
  font-size:13px;
  color:var(--muted);
  margin-top:20px
}
.faq-list {
  max-width:1150px;
  margin-left:auto
}
.faq-list details {
  border-bottom:1px solid var(--line);
  padding:25px 0
}
.faq-list summary {
  cursor:pointer;
  list-style:none;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary .icon {
  width:17px;
  color:var(--accent-ink);
  transition:transform .2s
}
.faq-list details[open] summary .icon {
  transform:rotate(45deg)
}
.faq-list details>p {
  max-width:800px;
  font-size:15px;
  color:var(--muted);
  margin-top:20px
}
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,140px);
  padding-block:45px 60px;
  align-items:start
}
.contact-copy {
  padding-top:25px
}
.contact-copy h1 {
  font-size:clamp(54px,5vw,96px);
  line-height:1.13
}
.contact-copy>p {
  color:var(--muted);
  font-size:17px;
  max-width:420px;
  margin-top:30px
}
.contact-detail {
  margin-top:70px
}
.contact-detail p {
  margin-top:20px;
  font-size:14px;
  color:var(--muted);
  line-height:2
}
.contact-panel {
  padding:clamp(25px,3vw,50px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px
}
.contact-panel h2 {
  font-size:27px;
  letter-spacing:-.04em;
  margin-top:20px;
  line-height:1.4
}
.demo-note {
  font-size:12.5px;
  color:var(--muted);
  margin-top:12px
}
.demo-form {
  display:grid;
  gap:22px;
  margin-top:35px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.demo-form label {
  display:grid;
  gap:10px;
  font-size:12.5px;
  color:var(--secondary)
}
.demo-form input,.demo-form select,.demo-form textarea {
  width:100%;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--line);
  background:var(--inset);
  color:var(--paper);
  border-radius:4px;
  font-size:13px
}
.demo-form textarea {
  resize:vertical;
  min-height:115px
}
.demo-form input::placeholder,.demo-form textarea::placeholder {
  color:var(--subtle)
}
.demo-form .button {
  justify-content:center;
  gap:20px;
  border:none
}
.form-status {
  padding:15px;
  border:1px solid #ffff0033;
  color:var(--text);
  background:#ffff0005;
  font-size:13px;
  border-radius:4px
}
.pricing-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:90px;
  padding-bottom:60px
}
.plan-card {
  background:var(--raised);
  border:1px solid #ffff0030;
  border-radius:7px;
  padding:clamp(30px,4vw,65px)
}
.plan-card>.small-label {
  color:var(--accent-ink)
}
.plan-card h2 {
  font-size:clamp(35px,3vw,55px);
  line-height:1.2;
  margin-top:25px
}
.plan-card>p {
  max-width:420px;
  color:var(--subtle);
  font-size:14px;
  margin-top:24px
}
.plan-card .button {
  width:100%
}
.pricing-copy h2 {
  font-size:42px;
  line-height:1.2
}
.pricing-copy p {
  font-size:15px;
  color:var(--muted);
  max-width:400px;
  margin-top:25px
}
.text-link {
  display:inline-flex;
  gap:30px;
  align-items:center;
  border-bottom:1px solid #ffff0060;
  padding-bottom:12px;
  margin-top:40px;
  font-size:13px
}
.text-link .icon {
  width:18px;
  color:var(--accent-ink)
}
@media(min-width:1600px) {
  .hero {
    padding-block:42.5px 42.5px
  }
  .industrial-image {
    height:620px
  }
  .sector {
    height:500px
  }
  .hero-note {
    font-size:13px
  }
}
@media(max-width:1200px) {
  .desktop-nav {
    gap:22px
  }
  .brand img {
    height:38px
  }
  .hero {
    gap:30px
  }
  .hero h1 {
    font-size:clamp(49px,5.35vw,70px)
  }
  .hero-actions .button {
    font-size:13px;
    padding:14px 16px;
    gap:13px
  }
  .hero-note-divider {
    display:none
  }
  .hero-note {
    max-width:220px;
    line-height:1.8
  }
  .industrial-image {
    height:430px
  }
  .tool-strip {
    gap:25px
  }
  .tool-strip img {
    max-width:76px;
    height:23px
  }
  .tool-strip>div {
    gap:20px
  }
  .article-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:40px
  }
  .article-aside {
    display:none
  }
  .article-heading {
    gap:40px
  }
  .section {
    padding-block:42.5px
  }
  .section-heading {
    gap:30px
  }
  .product-band-inner {
    gap:35px
  }
  .product-band-copy h2 {
    font-size:42px
  }
  .post-grid {
    gap:20px
  }
  .post-meta {
    font-size:11px
  }
  .post-meta>span:first-child {
    font-size:11px
  }
  .post-copy h3 {
    font-size:18px
  }
  .sector {
    height:370px
  }
  .notes-section {
    padding-top:0
  }
}
@media(max-width:900px) {
  .desktop-nav,.nav-contact {
    display:none
  }
  .menu-toggle {
    display:flex
  }
  .nav-inner {
    height:76px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:24px;
    gap:45px
  }
  .hero-copy {
    max-width:700px
  }
  .hero h1 {
    font-size:clamp(52px,8vw,76px)
  }
  .hero-note {
    max-width:none;
    margin-top:25px
  }
  .hero-note-divider {
    display:block
  }
  .hero-visual {
    max-width:780px;
    width:100%
  }
  .industrial-image {
    height:430px
  }
  .hero-description {
    font-size:17px
  }
  .hero-actions .button {
    font-size:14px
  }
  .tool-strip {
    align-items:start
  }
  .tool-strip>div {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    row-gap:28px
  }
  .tool-strip img {
    max-width:88px
  }
  .section-heading {
    align-items:start;
    flex-direction:column;
    gap:25px;
    margin-bottom:19px
  }
  .section-heading>p {
    max-width:570px
  }
  .section-heading h2 {
    font-size:48px
  }
  .workflow-layout {
    gap:30px
  }
  .workflow-step {
    gap:12px;
    padding-block:20px
  }
  .workflow-step h3 {
    font-size:17px
  }
  .workflow-step p {
    font-size:12.5px
  }
  .workflow-step>.icon {
    display:none
  }
  .preview-stage {
    padding:23px
  }
  .product-band-inner {
    grid-template-columns:1fr;
    gap:40px;
    padding-block:27.5px
  }
  .product-drawing {
    height:380px
  }
  .product-band-copy {
    padding-bottom:20px
  }
  .sector-grid {
    gap:14px
  }
  .sector {
    height:330px
  }
  .sector>div {
    left:18px;
    right:18px;
    bottom:20px
  }
  .sector h3 {
    font-size:21px
  }
  .sector p {
    font-size:12.5px
  }
  .post-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:35px
  }
  .notes-section .post-card:last-child {
    display:none
  }
  .footer-top {
    align-items:start;
    flex-direction:column;
    gap:35px
  }
  .footer-bottom {
    align-items:start;
    flex-wrap:wrap
  }
  .footer-bottom>div {
    margin-left:auto
  }
  .page-heading {
    padding-block:25px;
    gap:30px
  }
  .page-heading h1 {
    font-size:65px
  }
  .page-heading>p {
    font-size:13px
  }
  .featured-post {
    gap:30px
  }
  .featured-post h3 {
    font-size:29px
  }
  .featured-post .post-copy>p {
    font-size:13px;
    -webkit-line-clamp:3
  }
  .featured-post .post-image {
    aspect-ratio:auto;
    min-height:320px
  }
  .featured-post .post-bottom {
    font-size:11px
  }
  .library-toolbar {
    align-items:start;
    flex-direction:column;
    gap:20px
  }
  .search-field {
    width:100%
  }
  .article-heading {
    grid-template-columns:1fr;
    gap:35px
  }
  .article-heading h1 {
    font-size:43px;
    max-width:750px
  }
  .article-cover {
    max-height:330px;
    aspect-ratio:2;
    object-fit:cover
  }
  .article-layout {
    grid-template-columns:160px minmax(0,1fr);
    gap:30px
  }
  .article-content {
    font-size:15px
  }
  .article-content h2 {
    font-size:25px
  }
  .article-toc a {
    font-size:12px;
    padding-left:12px
  }
  .article-meta>span:last-child {
    margin-left:0
  }
  .article-end {
    align-items:start;
    flex-direction:column
  }
  .reading-progress {
    top:75px
  }
  .product-hero {
    grid-template-columns:1fr;
    padding-top:25px;
    gap:40px
  }
  .product-hero h1 {
    font-size:70px
  }
  .product-hero-art {
    height:420px
  }
  .feature-grid {
    gap:15px
  }
  .feature-card {
    padding:23px
  }
  .feature-card h3 {
    font-size:19px
  }
  .feature-card p {
    font-size:13px
  }
  .contact-layout {
    gap:35px
  }
  .contact-copy h1 {
    font-size:58px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .pricing-layout {
    gap:40px
  }
  .pricing-copy h2 {
    font-size:32px
  }
  .plan-card h2 {
    font-size:38px
  }
}
@media(max-width:600px) {
  :root {
    --gutter:22px
  }
  .brand img {
    height:36px
  }
  .nav-inner {
    height:72px;
    gap:12px
  }
  .nav-tools {
    gap:8px
  }
  .hero {
    padding-block:20px 22.5px;
    gap:35px
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:.12em;
    gap:8px;
    margin-bottom:23px
  }
  .hero h1 {
    font-size:clamp(32px,10.5vw,56px);
    letter-spacing:-.065em;
    line-height:1.12
  }
  .hero-description {
    font-size:14px;
    margin-top:22px
  }
  .hero-description br {
    display:none
  }
  .hero-actions {
    margin-top:25px;
    gap:10px
  }
  .hero-actions .button {
    min-height:48px;
    font-size:12.5px;
    padding:12px 14px;
    gap:12px
  }
  .hero-note {
    font-size:11px;
    gap:7px;
    margin-top:23px
  }
  .hero-note-divider {
    margin-inline:0
  }
  .industrial-image {
    height:260px
  }
  .tool-strip {
    flex-direction:column;
    gap:20px;
    padding-block:25px
  }
  .tool-strip>p {
    font-size:12px
  }
  .tool-strip>p br {
    display:none
  }
  .tool-strip>p strong {
    margin-left:4px
  }
  .tool-strip>div {
    width:100%;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px 16px
  }
  .tool-strip img {
    max-width:68px;
    height:20px
  }
  .section {
    padding-block:32.5px
  }
  .section-heading {
    gap:22px;
    margin-bottom:17.5px
  }
  .section-heading h2 {
    font-size:34px;
    line-height:1.22
  }
  .section-heading>p {
    font-size:13px
  }
  .section-heading>p br {
    display:none
  }
  .workflow-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .workflow-step {
    gap:19px;
    padding:23px 0
  }
  .workflow-step h3 {
    font-size:18px
  }
  .workflow-step p {
    font-size:12.5px
  }
  .workflow-step>.icon {
    display:block
  }
  .workflow-preview {
    min-height:345px
  }
  .preview-heading {
    padding:19px
  }
  .preview-stage {
    padding:23px
  }
  .product-drawing {
    height:295px
  }
  .product-band-inner {
    gap:40px;
    padding-block:20px
  }
  .product-band-copy h2 {
    font-size:35px
  }
  .product-band-copy p {
    font-size:13px
  }
  .check-list {
    font-size:13px;
    gap:13px
  }
  .product-band-copy .button {
    font-size:13px
  }
  .sector-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .sector {
    height:320px
  }
  .sector>div {
    left:24px;
    bottom:26px
  }
  .sector h3 {
    font-size:28px
  }
  .sector p {
    font-size:13px
  }
  .sector .small-label {
    font-size:11px
  }
  .notes-section {
    padding-top:0
  }
  .post-grid {
    grid-template-columns:1fr;
    gap:38px
  }
  .notes-section .post-card:last-child {
    display:flex
  }
  .post-copy h3 {
    font-size:23px
  }
  .post-copy>p {
    font-size:13px
  }
  .post-meta {
    font-size:12px
  }
  .post-meta>span:first-child {
    font-size:11px
  }
  .section-heading>.button {
    min-height:48px;
    font-size:13px;
    padding:12px 17px
  }
  .site-footer {
    padding-block:25px 37.5px
  }
  .footer-top {
    padding-bottom:20px;
    gap:28px
  }
  .footer-top h2 {
    font-size:37px
  }
  .footer-top .button {
    font-size:13px
  }
  .footer-bottom {
    gap:25px;
    padding-top:28px
  }
  .footer-bottom>.brand {
    width:100%
  }
  .footer-bottom .brand img {
    height:33px
  }
  .footer-bottom>div {
    margin-left:0;
    gap:18px;
    flex-wrap:wrap
  }
  .footer-bottom>p {
    width:100%
  }
  .hero-image-caption {
    display:grid;
    gap:7px
  }
  .preview-label {
    position:static;
    width:max-content;
    max-width:calc(100% - 44px);
    margin:0 22px 16px;
    font-size:11px;
    bottom:8px;
    right:8px;
    gap:7px;
    padding:8px 10px
  }
  .page-heading {
    flex-direction:column;
    align-items:start;
    padding-block:20px 17.5px;
    gap:25px
  }
  .page-heading h1 {
    font-size:56px
  }
  .page-heading>p {
    font-size:13px
  }
  .featured-post {
    display:flex;
    gap:0;
    flex-direction:column;
    padding-top:0;
    padding-bottom:32px;
    border-top:none
  }
  .featured-post .post-image {
    min-height:0;
    aspect-ratio:1.55
  }
  .featured-post .post-copy {
    padding-top:23px
  }
  .featured-post h3 {
    font-size:27px
  }
  .featured-post .post-copy>p {
    font-size:13px;
    -webkit-line-clamp:3
  }
  .featured-post .post-bottom {
    margin-top:24px;
    font-size:12px;
    padding-top:20px
  }
  .category-filters {
    gap:7px
  }
  .category-filters button {
    min-height:44px;
    padding:9px 11px;
    font-size:12px
  }
  .blog-library {
    padding-top:30px
  }
  .library-count {
    padding-block:23px;
    font-size:11px
  }
  .article-heading {
    padding-block:30px 35px;
    gap:28px
  }
  .back-link {
    margin-bottom:25px;
    font-size:12px
  }
  .article-heading h1 {
    font-size:32px;
    line-height:1.3
  }
  .article-heading .eyebrow {
    margin-bottom:17px
  }
  .article-meta {
    font-size:12px;
    gap:10px;
    margin-top:23px
  }
  .article-meta small {
    font-size:11px;
    line-height:1.8
  }
  .article-meta>span:last-child {
    width:100%;
    margin-left:44px;
    font-size:11px
  }
  .article-cover {
    aspect-ratio:1.5;
    max-height:260px
  }
  .article-layout {
    display:block;
    padding-block:28px 60px
  }
  .article-toc {
    position:static;
    padding-bottom:25px;
    margin-bottom:30px;
    border-bottom:1px solid var(--line)
  }
  .article-toc>p {
    margin-bottom:15px
  }
  .article-toc nav {
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding:0 0 8px;
    scrollbar-width:thin
  }
  .article-toc a {
    border:1px solid var(--line);
    padding:9px 12px;
    border-radius:4px;
    white-space:nowrap;
    font-size:12px;
    flex-shrink:0
  }
  .article-content {
    font-size:15px;
    line-height:1.9
  }
  .article-content h2 {
    font-size:25px;
    margin-top:40px
  }
  .article-content h3 {
    font-size:20px
  }
  .article-content blockquote {
    padding:17px;
    font-size:13px
  }
  .article-content .math {
    font-size:13px
  }
  .article-content figcaption {
    font-size:12px
  }
  .article-content th,.article-content td {
    padding:12px
  }
  .reading-progress {
    top:71px
  }
  .product-hero {
    padding-top:20px
  }
  .product-hero h1 {
    font-size:clamp(36px,10vw,54px)
  }
  .product-hero-art {
    height:290px
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .feature-card {
    padding:30px
  }
  .feature-card>.icon {
    margin-bottom:28px
  }
  .feature-card h3 {
    font-size:22px
  }
  .feature-card p {
    font-size:13px
  }
  .faq-list summary {
    font-size:16px;
    line-height:1.6
  }
  .faq-list details>p {
    font-size:13px
  }
  .contact-layout {
    grid-template-columns:1fr;
    padding-block:17.5px 35px;
    gap:40px
  }
  .contact-copy {
    padding-top:0
  }
  .contact-copy h1 {
    font-size:52px
  }
  .contact-copy>p {
    font-size:15px;
    margin-top:22px
  }
  .contact-detail {
    margin-top:30px
  }
  .contact-detail p {
    font-size:13px;
    margin-top:13px
  }
  .contact-panel {
    padding:26px 22px
  }
  .contact-panel h2 {
    font-size:24px
  }
  .demo-form {
    gap:19px;
    margin-top:26px
  }
  .demo-note {
    font-size:12px
  }
  .pricing-layout {
    grid-template-columns:1fr;
    gap:45px;
    padding-bottom:32.5px
  }
  .pricing-copy h2 {
    font-size:35px
  }
  .plan-card {
    padding:30px
  }
  .plan-card h2 {
    font-size:36px
  }
  .pricing-copy p {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none
  }
}
.vessel-figure {
  position:absolute;
  inset:0;
  margin:0
}
.vessel-blueprint {
  position:absolute;
  inset:4% 2% 12%;
  background:var(--secondary);
  -webkit-mask:var(--blueprint) center/contain no-repeat;
  mask:var(--blueprint) center/contain no-repeat;
  opacity:.5;
  transition:opacity .8s ease,transform .8s ease
}
.vessel-figure.is-ready .vessel-blueprint {
  opacity:.22;
  transform:translate(-13%,-14%) scale(.7)
}
:root[data-theme="dark"] .vessel-figure.is-ready .vessel-blueprint {
  opacity:.17
}
.vessel-horizontal {
  --blueprint:url(/images/vessels/horizontal-elevation.png)
}
.vessel-agitated {
  --blueprint:url(/images/vessels/agitated-elevation.png)
}
.vessel-agitated.is-ready .vessel-blueprint {
  transform:translate(-22%,-4%) scale(.86)
}
.vessel-canvas {
  cursor:grab;
  touch-action:none;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
  position:absolute;
  top:8%;
  left:6%;
  width:94%;
  height:86%;
  opacity:0;
  transition:opacity .8s ease
}
.vessel-figure.is-ready .vessel-canvas {
  opacity:1
}
.vessel-canvas:active {
  cursor:grabbing
}

/* Scroll-driven workflow */
.flow-track {
  --steps:5;
  height:calc(100vh + var(--steps) * 55vh);
  position:relative
}
.flow-sticky {
  position:sticky;
  top:90px;
  height:calc(100vh - 90px);
  display:grid;
  align-items:center
}
.flow-steps {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px
}
.flow-step {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  padding:16px 0;
  cursor:pointer;
  opacity:.32;
  transition:opacity .4s ease
}
.flow-step>span {
  font-family:monospace;
  font-size:13px;
  color:var(--subtle);
  padding-top:10px
}
.flow-step h3 {
  font-family:var(--head);
  font-size:clamp(26px,2.6vw,40px);
  font-weight:600;
  letter-spacing:-.03em;
  margin:0
}
.flow-step p {
  margin:6px 0 0;
  color:var(--muted);
  font-size:16px;
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease
}
.flow-step.is-active {
  opacity:1
}
.flow-step.is-active p {
  max-height:3em
}
.flow-step.is-active>span {
  color:var(--accent-ink)
}
.flow-stage {
  position:relative;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  height:min(680px,calc(100vh - 140px));
  border:1px solid var(--line-medium);
  border-radius:14px;
  background:var(--panel);
  overflow:hidden;
  box-shadow:0 30px 70px var(--shadow),0 2px 6px var(--shadow)
}
/* A desktop window: traffic-light dots and the workflow steps as toolbar icons */
.flow-window-bar {
  position:absolute;
  inset:0 0 auto;
  height:48px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:var(--raised)
}
.flow-dots {
  display:flex;
  gap:8px
}
.flow-dots i {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#ff5f57;
  box-shadow:inset 0 0 0 .5px #0000002e
}
.flow-dots i:nth-child(2) {
  background:#febc2e
}
.flow-dots i:nth-child(3) {
  background:#28c840
}
.flow-icons {
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  gap:6px
}
.flow-icons button {
  display:flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 9px;
  border-radius:8px;
  border:0;
  background:none;
  color:var(--subtle);
  font:600 14px var(--body);
  cursor:pointer;
  transition:background .3s,color .3s
}
.flow-icons button:hover {
  color:var(--paper)
}
.flow-icons svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.flow-icons span {
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .35s ease
}
.flow-icons button.is-done {
  color:var(--text)
}
.flow-icons button.is-active {
  background:var(--yellow);
  color:var(--on-accent)
}
.flow-icons button.is-active span {
  max-width:90px
}
.flow-progress {
  position:absolute;
  inset:48px 0 auto;
  height:2px;
  background:var(--line)
}
.flow-progress i {
  display:block;
  height:100%;
  width:calc(var(--progress,0) * 100%);
  background:var(--yellow)
}
.flow-scene {
  position:absolute;
  inset:150px 0 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:clamp(24px,4vw,56px);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease,transform .45s ease;
  pointer-events:none
}
.flow-scene.is-active {
  opacity:1;
  transform:none;
  pointer-events:auto
}
.flow-conflict {
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border:1px solid var(--line-medium);
  border-radius:8px;
  background:var(--surface);
  font-size:17px
}
.flow-decision .icon {
  width:22px;
  height:22px;
  flex:none
}
.flow-conflict {
  justify-content:space-between
}
.flow-conflict span {
  color:var(--muted);
  font-size:15px
}
.flow-conflict strong {
  font-family:monospace;
  font-size:20px
}
.flow-conflict:nth-child(2) strong {
  text-decoration:line-through;
  color:var(--subtle)
}
.flow-decision,.flow-approved {
  display:flex;
  align-items:center;
  gap:10px;
  align-self:flex-start;
  padding:10px 16px;
  border-radius:6px;
  background:var(--yellow);
  color:var(--on-accent);
  font-weight:600
}
.flow-model {
  flex:1;
  background:var(--text);
  -webkit-mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat;
  mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat;
  opacity:.9
}
.flow-scene[data-scene="2"] {
  padding:18px 18px 22px
}
.flow-tools {
  display:flex;
  gap:10px;
  justify-content:center
}
.flow-tools span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px 6px 6px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  font-family:monospace;
  font-size:13px;
  letter-spacing:.08em
}
@media(max-width:900px) {
  .flow-track {
    height:calc(100vh + var(--steps) * 70vh)
  }
  .flow-sticky {
    top:70px;
    height:calc(100vh - 70px);
    grid-template-columns:1fr;
    align-content:center;
    gap:20px
  }
  .flow-steps {
    grid-template-columns:repeat(5,auto);
    justify-content:space-between
  }
  .flow-step {
    grid-template-columns:1fr;
    gap:4px;
    padding:0
  }
  .flow-step>span {
    padding:0
  }
  .flow-step h3 {
    font-size:18px
  }
  .flow-step p {
    display:none
  }
  .flow-stage {
    height:min(380px,52vh)
  }
}
@media(prefers-reduced-motion:reduce) {
  .flow-scene,.flow-step,.flow-step p {
    transition:none
  }
}

/* "We help" statement */
.answer {
  text-align:center
}
.answer-title {
  font-size:clamp(24px,3vw,42px);
  margin:0 auto;
  max-width:900px
}
.answer-title span {
  color:var(--accent-ink)
}
.answer-words {
  display:grid;
  margin:clamp(24px,4vw,44px) 0;
  font-family:var(--head);
  font-weight:700;
  font-size:clamp(46px,7vw,104px);
  line-height:1.02;
  letter-spacing:-.03em;
  text-transform:uppercase
}
.answer-cheaper {
  color:var(--accent-ink)
}
.answer-greener {
  color:var(--ink);
  text-shadow:-1.5px -1.5px 0 var(--paper),0 -1.5px 0 var(--paper),1.5px -1.5px 0 var(--paper),1.5px 0 0 var(--paper),1.5px 1.5px 0 var(--paper),0 1.5px 0 var(--paper),-1.5px 1.5px 0 var(--paper),-1.5px 0 0 var(--paper)
}
.answer-close {
  max-width:620px;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.6
}
.answer-close b {
  color:var(--paper)
}
/* Approve step: a drawing revision block */
.flow-scene.is-active :root[data-theme="light"] /* Deliver step */
.flow-deliver {
  justify-content:flex-start;
  gap:0;
  padding:18px 18px 12px
}
/* Deliverable tabs: a segmented strip with an icon per deliverable; the open one lifts out as a card */
.deliver-tabs {
  display:flex;
  gap:4px;
  margin:0 auto 12px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--inset);
  overflow-x:auto;
  scrollbar-width:none
}
.deliver-tabs button {
  position:relative;
  flex:1 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  background:none;
  color:var(--muted);
  font:600 13px var(--body);
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s
}
.deliver-tabs button svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.deliver-tabs button:hover {
  color:var(--paper)
}
.deliver-tabs button[aria-selected="true"] {
  background:var(--panel);
  color:var(--paper);
  box-shadow:0 1px 2px #0000000f,0 4px 14px #00000012
}
.deliver-tabs button[aria-selected="true"]::after {
  content:"";
  position:absolute;
  left:30%;
  right:30%;
  bottom:3px;
  height:3px;
  border-radius:2px;
  background:var(--yellow)
}
.deliver-tabs button[aria-selected="true"] svg {
  color:#b8a800
}
@media(max-width:900px) {
  .deliver-tabs button span {
    display:none
  }
  .deliver-tabs button[aria-selected="true"] span {
    display:inline
  }
}
.deliver-panel {
  flex:1;
  min-height:0;
  position:relative;
  overflow:auto;
  padding-top:4px
}
.deliver-panel[hidden] {
  display:none
}
.deliver-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none
}
.deliver-canvas:active {
  cursor:grabbing
}
.sheet {
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  color:var(--text)
}
.sheet-line {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.sheet-line .sheet-thin {
  stroke-width:.7;
  stroke-dasharray:8 3 2 3;
  opacity:.6
}
.sheet-hatch {
  fill:var(--line-strong)
}
.sheet-weld {
  fill:currentColor
}
.sheet-dim {
  fill:var(--muted);
  stroke:var(--muted);
  stroke-width:.7;
  font:12.5px monospace
}
.sheet-dim text,.sheet-tags text {
  stroke:none
}
.sheet-tags {
  fill:var(--panel);
  stroke:currentColor;
  stroke-width:.9
}
.sheet-tags text {
  fill:currentColor;
  font:600 9.5px monospace
}
.deliver-panel table {
  width:100%;
  border-collapse:collapse;
  font-size:13px
}
.deliver-panel th {
  position:sticky;
  top:0;
  background:var(--panel);
  text-align:left;
  font:600 12px monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--subtle);
  padding:8px 10px;
  border-bottom:1px solid var(--line-strong)
}
.deliver-panel td {
  padding:9px 10px;
  border-bottom:1px solid var(--line)
}
.deliver-panel td:nth-child(n+3) {
  font-family:monospace;
  white-space:nowrap
}
.deliver-panel td b {
  color:var(--on-accent);
  background:var(--yellow);
  padding:2px 6px;
  border-radius:3px;
  font-size:12.5px
}
.sheet-note,.deliver-note {
  margin:10px 0 0;
  font:11px monospace;
  color:var(--subtle)
}
.deliver-note {
  text-align:right;
  margin:8px 0 0
}
@media(max-width:900px) {
  .flow-step h3 {
    font-size:15px
  }
    }
/* Use cases menu */
.nav-drop {
  position:relative
}
.nav-drop>a {
  font-size:13px;
  color:var(--secondary);
  display:flex;
  align-items:center;
  gap:5px;
  transition:color .2s
}
.nav-drop>a .icon {
  width:14px;
  height:14px;
  transition:transform .2s
}
.nav-drop:hover>a,.nav-drop:focus-within>a,.nav-drop>a[aria-current] {
  color:var(--paper)
}
.nav-drop:hover>a .icon,.nav-drop:focus-within>a .icon {
  transform:rotate(180deg)
}
.nav-menu {
  position:absolute;
  top:100%;
  left:50%;
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:22px 34px;
  padding:26px 28px;
  margin-top:14px;
  border:1px solid var(--line-medium);
  border-radius:12px;
  background:var(--panel);
  box-shadow:0 24px 60px var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,8px);
  transition:opacity .2s,transform .2s,visibility .2s
}
.nav-menu::before {
  content:"";
  position:absolute;
  inset:-16px 0 auto;
  height:16px
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}
.nav-menu p {
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--subtle)
}
.nav-menu a {
  display:block;
  padding:6px 0;
  font-size:14px;
  color:var(--text);
  transition:color .2s
}
.nav-menu a:hover {
  color:var(--accent-ink)
}
:root[data-theme="light"] .nav-menu a:hover {
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:3px
}
/* Use cases overview */
.uc-heading p {
  max-width:420px
}
.uc-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px
}
.uc-card {
  position:relative;
  display:block;
  padding:28px 28px 60px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  transition:border-color .25s,transform .25s
}
.uc-card:hover {
  border-color:var(--accent-ink);
  transform:translateY(-3px)
}
:root[data-theme="light"] .uc-card:hover {
  border-color:var(--paper)
}
.uc-card h3 {
  font-size:22px;
  margin:14px 0 8px
}
.uc-card p {
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
  margin:0
}
.uc-card>.icon {
  position:absolute;
  left:28px;
  bottom:22px;
  width:20px;
  height:20px;
  transition:transform .25s
}
.uc-card:hover>.icon {
  transform:translateX(6px)
}
/* Use case page */
.uc-hero {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,80px);
  align-items:center;
  padding-top:clamp(25px,4vw,55px);
  padding-bottom:clamp(20px,3vw,40px)
}
.uc-hero h1 {
  font-size:clamp(40px,4.6vw,72px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:0
}
.uc-hero .hero-description {
  margin:22px 0 0;
  max-width:520px
}
.uc-visual {
  position:relative;
  min-height:400px;
  padding:clamp(20px,3vw,36px);
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden
}
.uc-body {
  display:grid;
  gap:clamp(40px,6vw,80px)
}
.uc-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,80px)
}
.uc-facts h2 {
  font-size:clamp(24px,2.2vw,32px);
  margin:0 0 18px
}
.uc-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0
}
.uc-tags span {
  padding:8px 14px;
  border:1px solid var(--line-medium);
  border-radius:999px;
  font-family:monospace;
  font-size:14px
}
/* Use case motion graphics: items arrive in sequence, hold, then the loop restarts. */
.uc-item,.uc-pin {
  --i:0
}
.uc-item:nth-child(2) { --i:1 }
.uc-item:nth-child(3) { --i:2 }
.uc-item:nth-child(4) { --i:3 }
.uc-item:nth-child(5) { --i:4 }
.uc-item:nth-child(6) { --i:5 }
.uc-item:nth-child(7) { --i:6 }
.uc-item:nth-child(8) { --i:7 }
.uc-item {
  animation:uc-in 9s calc(var(--i) * .45s) infinite both
}
@keyframes uc-in {
  0% {
    opacity:0;
    transform:translateY(10px)
  }
  6%,82% {
    opacity:1;
    transform:none
  }
  92%,100% {
    opacity:0;
    transform:none
  }
}
.uc-split {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:22px;
  align-items:center
}
.uc-table {
  display:grid;
  gap:8px
}
.uc-table>div,.uc-tree>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line-medium);
  border-radius:8px;
  background:var(--surface);
  font-size:14px
}
.uc-table span,.uc-tree span {
  color:var(--muted)
}
.uc-table em {
  font-style:normal;
  font-family:monospace;
  font-size:12px;
  margin-right:10px;
  padding:3px 7px;
  border-radius:4px;
  background:var(--line);
  color:var(--text)
}
.uc-table strong,.uc-tree strong {
  font-family:monospace;
  font-size:13.5px;
  white-space:nowrap
}
.uc-ok,.uc-flag {
  font-size:11px;
  padding:3px 8px;
  border-radius:4px;
  letter-spacing:.06em;
  text-transform:uppercase;
  flex:none
}
.uc-ok {
  background:var(--yellow);
  color:var(--on-accent)
}
.uc-flag {
  border:1px solid #ff8a00;
  color:#ff8a00
}
.uc-foot {
  margin:14px 0 0;
  color:var(--subtle);
  font-size:14px
}
.uc-calc>div {
  justify-content:flex-start
}
.uc-calc>div>span {
  flex:1
}
/* A document with a scanning bar */
.uc-doc {
  position:relative;
  display:grid;
  gap:9px;
  padding:20px 18px;
  border:1px solid var(--line-medium);
  border-radius:8px;
  background:var(--surface);
  overflow:hidden
}
.uc-doc-title {
  font-family:monospace;
  font-size:12.5px;
  color:var(--subtle);
  margin-bottom:6px
}
.uc-doc>i {
  width:70%;
  height:6px;
  border-radius:3px;
  background:var(--line-medium)
}
.uc-doc>i.uc-mark {
  animation:uc-mark 9s infinite
}
@keyframes uc-mark {
  0%,20% {
    background:var(--line-medium)
  }
  30%,85% {
    background:var(--yellow)
  }
  95%,100% {
    background:var(--line-medium)
  }
}
.uc-scan {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:40px;
  background:linear-gradient(to bottom,transparent,#ffff0030 70%,#ffff00 100%);
  opacity:.8;
  animation:uc-scan 3s ease-in-out infinite
}
@keyframes uc-scan {
  0% {
    transform:translateY(-40px)
  }
  100% {
    transform:translateY(300px)
  }
}
.uc-doc-typed p {
  margin:0;
  font-size:14px;
  padding:8px 0;
  border-bottom:1px solid var(--line)
}
/* Drawing with review pins */
.uc-drawing {
  position:relative;
  max-height:360px;
  color:var(--text)
}
.uc-drawing .sheet {
  height:340px
}
.uc-pin circle {
  fill:#ff8a00;
  stroke:#ff8a0055;
  stroke-width:8;
  paint-order:stroke
}
.uc-pin text {
  fill:#060607;
  font:700 12px var(--body)
}
.uc-pin {
  transform-box:fill-box;
  transform-origin:center;
  animation:uc-pin 9s calc(var(--i) * .6s + .4s) infinite both
}
.uc-pin:nth-child(2) {
  --i:1
}
.uc-pin:nth-child(3) {
  --i:2
}
@keyframes uc-pin {
  0% {
    transform:scale(0)
  }
  5%,85% {
    transform:scale(1)
  }
  95%,100% {
    transform:scale(0)
  }
}
.uc-table>div>span>em {
  background:#ff8a00;
  color:#060607
}
.uc-calc>div>span>em,.uc-v-wps-pqr-selection .uc-table em {
  background:var(--line);
  color:var(--text)
}
/* Environmental loads */
:root[data-theme="light"] /* Local FEA */
/* Chips feeding a tree */
.uc-chips {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start
}
.uc-chip {
  padding:10px 16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:14px;
  background:var(--surface)
}
.uc-v-pv-elite-input .uc-split {
  grid-template-columns:minmax(0,.45fr) minmax(0,1.55fr)
}
.uc-tree strong {
  white-space:normal;
  text-align:right
}
.uc-tree {
  display:grid;
  gap:8px;
  padding-left:16px;
  border-left:2px solid var(--line-strong)
}
.uc-ready {
  justify-self:start;
  margin-top:6px;
  padding:9px 16px;
  border-radius:6px;
  background:var(--yellow);
  color:var(--on-accent);
  font-weight:600
}
/* Weight bars */
.uc-bars {
  display:grid;
  gap:16px
}
.uc-bars>div {
  display:grid;
  grid-template-columns:150px 1fr 90px;
  gap:14px;
  align-items:center;
  font-size:14px
}
.uc-bars>div>span {
  color:var(--muted)
}
.uc-bars>div>i {
  height:12px;
  border-radius:6px;
  background:var(--line);
  position:relative;
  overflow:hidden
}
.uc-bars>div>i::after {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  border-radius:6px;
  background:var(--yellow);
  animation:uc-bar 9s calc(var(--i) * .45s) ease-out infinite both
}
@keyframes uc-bar {
  0% {
    transform:scaleX(0);
    transform-origin:left
  }
  12%,85% {
    transform:scaleX(1);
    transform-origin:left
  }
  100% {
    transform:scaleX(0);
    transform-origin:left
  }
}
.uc-bars strong {
  font-family:monospace;
  text-align:right
}
/* Proposal pages */
.uc-pages {
  position:relative;
  height:330px;
  max-width:340px;
  margin:0 auto;
  width:100%
}
.uc-page {
  position:absolute;
  inset:0;
  padding:20px;
  border:1px solid var(--line-medium);
  border-radius:8px;
  background:var(--surface);
  display:grid;
  align-content:start;
  gap:10px
}
.uc-page-back {
  transform:translate(14px,14px);
  z-index:-1;
  opacity:.6
}
.uc-page-back2 {
  transform:translate(28px,28px);
  z-index:-2;
  opacity:.3
}
.uc-template {
  padding:10px 12px;
  border-radius:4px;
  background:var(--line);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--subtle);
  margin-bottom:8px
}
.uc-page>div {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:15px;
  padding:8px 0;
  border-bottom:1px solid var(--line)
}
.uc-page strong {
  font-family:monospace;
  color:var(--subtle)
}
/* Dossier */
.uc-timeline {
  display:grid;
  gap:14px
}
.uc-stage {
  position:relative;
  padding-left:28px;
  font-size:15px
}
.uc-stage::before {
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--yellow)
}
.uc-stack {
  display:grid;
  gap:6px
}
.uc-sheet {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line-medium);
  border-left:3px solid var(--yellow);
  border-radius:6px;
  background:var(--surface);
  font-size:14px
}
/* Code search */
.uc-search {
  display:grid;
  gap:16px
}
.uc-query {
  padding:16px 18px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--surface);
  font-size:16px
}
.uc-query span {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:bottom;
  border-right:2px solid var(--accent-ink);
  animation:uc-type 9s steps(48) infinite
}
@keyframes uc-type {
  0% {
    max-width:0
  }
  30%,90% {
    max-width:100%
  }
  100% {
    max-width:0
  }
}
.uc-answer {
  display:grid;
  gap:12px
}
.uc-answer .uc-item {
  animation-delay:calc(2.8s + var(--i) * .5s)
}
.uc-answer p {
  margin:0;
  font-size:17px;
  line-height:1.6
}
.uc-cites {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.uc-cites span {
  padding:6px 12px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--on-accent);
  font-family:monospace;
  font-size:13px
}
@media(max-width:900px) {
  .uc-hero,.uc-split,.uc-facts {
    grid-template-columns:1fr
  }
  .uc-steps,  .uc-visual {
    min-height:0
  }
  .uc-bars>div {
    grid-template-columns:110px 1fr 76px
  }
}
@media(prefers-reduced-motion:reduce) {
  .uc-item,.uc-pin,.uc-bars>div>i::after,.uc-doc>i.uc-mark,.uc-query span,.uc-answer .uc-item {
    animation:none;
    opacity:1;
    transform:none
  }
  .uc-scan {
    display:none
  }
  .uc-load-wind path,.uc-load-quake path,.uc-load-moment {
    animation:none
  }
}

/* Per-item values live here because the CSP blocks inline style attributes. */
.uc-doc>i:nth-of-type(2n) { width:90% }
.uc-doc>i:nth-of-type(3n) { width:55% }
.uc-doc>i:nth-of-type(5n) { width:80% }
.uc-doc>i:nth-of-type(7n) { width:45% }
.uc-bars>div:nth-child(1)>i { --w:72% }
.uc-bars>div:nth-child(2)>i { --w:10% }
.uc-bars>div:nth-child(3)>i { --w:81% }
.uc-bars>div:nth-child(4)>i { --w:48% }
.uc-bars>div:nth-child(5)>i { --w:20% }
.uc-wind path:nth-child(2),.uc-snow circle:nth-child(2) { --i:1 }
.uc-wind path:nth-child(3),.uc-snow circle:nth-child(3) { --i:2 }
.uc-snow circle:nth-child(4) { --i:3 }
.uc-snow circle:nth-child(5) { --i:4 }
.uc-snow circle:nth-child(6) { --i:5 }
.uc-snow circle:nth-child(7) { --i:6 }
.uc-snow circle:nth-child(8) { --i:7 }
.uc-snow circle:nth-child(9) { --i:8 }
.uc-snow circle:nth-child(10) { --i:9 }
.uc-snow circle:nth-child(11) { --i:10 }
.uc-snow circle:nth-child(12) { --i:11 }
.uc-snow circle:nth-child(13) { --i:12 }
.uc-snow circle:nth-child(14) { --i:13 }
.uc-wind path,
/* Approve step: the drawing revision block, as it appears in the title block */
/* Drawing sheets */
.sheet-line .sheet-wall {
  stroke-width:2.2
}
.sheet-line .sheet-inner {
  stroke-width:.8
}
.sheet-line rect,.sheet-plate {
  fill:var(--panel)
}
.sheet-bolt {
  fill:none;
  stroke-dasharray:3 2;
  stroke-width:.8
}
.sheet-iso polygon {
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linejoin:round
}
.sheet-iso .iso-top {
  fill:var(--surface)
}
.sheet-iso .iso-side {
  fill:var(--line-medium)
}
.sheet-iso .iso-front {
  fill:var(--line)
}
.sheet-table {
  fill:none;
  stroke:currentColor;
  stroke-width:.8
}
.sheet-table text,.sheet-title text {
  fill:currentColor;
  stroke:none;
  font:13px monospace
}
.sheet-table .sheet-head,.sheet-title text {
  font-weight:700;
  font-size:13.5px
}
.deliver-panel tr.table-group td {
  padding:12px 10px 6px;
  font:700 11px monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-ink);
  border-bottom:1px solid var(--line-strong)
}
:root[data-theme="light"] .deliver-panel tr.table-group td {
  color:var(--paper)
}
.deliver-panel td:nth-child(2) {
  min-width:240px
}
/* Persona menu */
.nav-menu {
  grid-template-columns:1fr;
  gap:2px;
  min-width:320px;
  padding:12px
}
.nav-menu a {
  display:grid;
  gap:3px;
  padding:12px 14px;
  border-radius:8px
}
.nav-menu a:hover {
  background:var(--hover-wash)
}
.nav-menu a strong {
  font-size:15px;
  font-weight:600;
  color:var(--paper)
}
.nav-menu a span {
  font-size:13px;
  color:var(--muted)
}
:root[data-theme="light"] .nav-menu a:hover {
  text-decoration:none
}
/* Persona pages */
.uc-cards {
  padding-bottom:clamp(30px,4vw,60px)
}
.uc-card {
  padding:30px 30px 64px
}
.uc-card h3 {
  margin-top:0
}
.uc-flow h2,.uc-cta h2 {
  font-size:clamp(30px,3.4vw,52px);
  margin:0 0 clamp(26px,4vw,44px)
}
.uc-flow h2 {
  margin-bottom:7px
}
.uc-standards {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 clamp(26px,4vw,40px);
  color:var(--text);
  font-size:17px
}
.uc-standards .icon {
  width:20px;
  height:20px;
  padding:3px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--on-accent);
  flex:none
}
.uc-flow h2 span,.uc-cta h2 span {
  color:var(--accent-ink)
}
.uc-steps {
  list-style:none;
  counter-reset:step;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.uc-steps li {
  counter-increment:step;
  position:relative;
  padding:58px 22px 24px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  font-size:18px;
  line-height:1.45
}
.uc-steps li::before {
  content:counter(step);
  position:absolute;
  top:20px;
  left:22px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--on-accent);
  font-weight:700;
  font-size:14px
}
.uc-jobs {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,64px);
  align-items:start
}
.uc-job-list {
  display:grid;
  gap:4px
}
.uc-job-list button {
  display:grid;
  gap:4px;
  text-align:left;
  padding:16px 18px;
  border:0;
  border-left:3px solid transparent;
  border-radius:0 8px 8px 0;
  background:none;
  color:var(--muted);
  font:inherit;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s
}
.uc-job-list button strong {
  font-size:18px;
  font-weight:600;
  color:var(--text)
}
.uc-job-list button span {
  font-size:15px;
  line-height:1.5;
  display:none
}
.uc-job-list button[aria-selected="true"] {
  border-left-color:var(--yellow);
  background:var(--hover-wash)
}
.uc-job-list button[aria-selected="true"] strong {
  color:var(--paper)
}
.uc-job-list button[aria-selected="true"] span {
  display:block
}
.uc-job-stage {
  position:sticky;
  top:110px
}
.uc-job-stage .uc-visual[hidden] {
  display:none
}
.uc-cta {
  text-align:center;
  padding-bottom:clamp(35px,4.5vw,65px)
}

/* Approve step: a printed drawing sheet that gets signed and stamped */
.approve-scene {
  padding:clamp(16px,2.4vw,30px)
}
.approve-sheet {
  --ink-line:#1d1d22;
  position:relative;
  display:grid;
  grid-template-rows:1fr auto;
  height:100%;
  padding:10px;
  border-radius:4px;
  background:#f6f5ef;
  color:var(--ink-line);
  box-shadow:0 1px 0 #0000000d,0 18px 40px #0000004d;
  outline:1.5px solid var(--ink-line);
  outline-offset:-6px
}
.approve-drawing {
  min-height:0;
  padding:6px 8px 0
}
.approve-drawing .sheet {
  color:var(--ink-line);
  height:100%
}
.approve-drawing .sheet-dim {
  fill:#55555c;
  stroke:#55555c
}
.approve-drawing .sheet-tags,.approve-drawing .sheet-line rect,.approve-drawing .sheet-plate {
  fill:#f6f5ef
}
.approve-block {
  justify-self:end;
  width:min(100%,500px);
  margin:0 4px 4px 0;
  border:1.5px solid var(--ink-line);
  background:#f6f5ef;
  font:12.5px/1 monospace;
  color:var(--ink-line)
}
.approve-row {
  display:grid;
  grid-template-columns:30px 76px 1fr 44px 56px 56px 56px;
  border-bottom:1px solid var(--ink-line);
  height:30px
}
.approve-row>span {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border-left:1px solid var(--ink-line);
  white-space:nowrap;
  overflow:hidden
}
.approve-row>span:first-child {
  border-left:0
}
.approve-row>span:nth-child(3) {
  justify-content:flex-start
}
.approve-head {
  height:26px;
  font-weight:700;
  font-size:11px;
  border-bottom-width:1.5px
}
.approve-ai {
  font-weight:700;
  color:#6b6b00
}
.approve-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 8px;
  font-weight:700;
  font-size:12px
}
.approve-sig {
  width:46px;
  height:20px;
  overflow:visible
}
.approve-sig path {
  fill:none;
  stroke:#1b3fa0;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:160;
  stroke-dashoffset:160
}
.approve-sig-done path,.approve-sheet.is-approved .approve-sig path {
  stroke-dashoffset:0
}
.approve-sheet.is-approved .approve-sig-0 path {
  transition:stroke-dashoffset .7s ease .35s
}
.approve-sheet.is-approved .approve-sig-1 path {
  transition:stroke-dashoffset .7s ease 1s
}
.approve-sheet.is-approved .approve-sig-2 path {
  transition:stroke-dashoffset .7s ease 1.65s
}
.approve-final {
  background:#ffff0038
}
.approve-stamp {
  position:absolute;
  bottom:12%;
  left:6%;
  display:grid;
  justify-items:center;
  gap:2px;
  padding:12px 20px 10px;
  border:3px double #c8102e;
  border-radius:6px;
  color:#c8102e;
  font-family:var(--head);
  text-transform:uppercase;
  letter-spacing:.08em;
  transform:rotate(-12deg) scale(1.6);
  opacity:0;
  mix-blend-mode:multiply
}
.approve-stamp strong {
  font-size:22px;
  line-height:1
}
.approve-stamp span {
  font-size:11px;
  font-weight:700
}
.approve-stamp em {
  font:700 10px monospace;
  font-style:normal;
  margin-top:3px
}
.approve-sheet.is-approved .approve-stamp {
  opacity:.92;
  transform:rotate(-12deg) scale(1);
  transition:opacity .15s ease 2.4s,transform .35s cubic-bezier(.2,1.8,.5,1) 2.4s
}
@media(max-width:900px) {
  .approve-row {
    grid-template-columns:20px 0 1fr 30px 40px 40px 40px
  }
  .approve-row>span:nth-child(2) {
    display:none
  }
  .approve-stamp strong {
    font-size:17px
  }
}
@media(prefers-reduced-motion:reduce) {
  .flow-scene .approve-sig path,.flow-scene .approve-stamp {
    transition:none
  }
}

/* FAQ: heading beside the questions */
.faq-section {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,6vw,100px);
  align-items:start
}
.faq-heading {
  position:sticky;
  top:120px
}
.faq-heading h2 {
  margin:0;
  font-size:clamp(36px,3.6vw,58px);
  line-height:1.05;
  letter-spacing:-.035em
}
.faq-section .faq-list {
  max-width:none;
  margin:0;
  border-top:1px solid var(--line)
}
.faq-list summary {
  border-radius:6px
}
.faq-list summary:focus-visible {
  outline-offset:6px
}
.faq-list details>p {
  max-width:620px
}
@media(max-width:900px) {
  .faq-section {
    grid-template-columns:1fr
  }
  .faq-heading {
    position:static
  }
}
/* Persona menu: names only */
.nav-menu {
  min-width:240px
}
.nav-menu a {
  font-size:15px;
  font-weight:500;
  color:var(--text)
}

/* Load diagram */
.uc-loads {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}
.uc-load {
  width:100%;
  max-height:360px;
  color:var(--text);
  font:11px monospace
}
.uc-load text {
  fill:var(--muted);
  stroke:none
}
.uc-load marker path {
  fill:context-stroke
}
.uc-load-ground path,.uc-load-steel path,.uc-load-vessel path {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.uc-load-ground path {
  stroke-width:1;
  opacity:.6
}
.uc-load-steel path {
  fill:var(--line);
  stroke-width:1.2
}
.uc-load-vessel path:first-child {
  fill:var(--surface);
  stroke-width:2
}
.uc-load-vessel .uc-load-axis {
  stroke-width:.7;
  stroke-dasharray:10 3 2 3;
  opacity:.5
}
.uc-load-cg circle {
  fill:var(--panel);
  stroke:currentColor;
  stroke-width:1.2
}
.uc-load-cg path {
  fill:currentColor
}
.uc-load-wind path,.uc-load-snow path {
  stroke:#3b82f6;
  stroke-width:1.6;
  fill:none
}
.uc-load-wind .uc-load-envelope {
  stroke-width:1;
  stroke-dasharray:3 3
}
.uc-load-wind path:not(.uc-load-envelope) {
  animation:uc-gust 2.4s ease-in-out infinite
}
@keyframes uc-gust {
  0%,100% {
    transform:translateX(-3px)
  }
  50% {
    transform:none
  }
}
.uc-load-snow path {
  stroke:#8aa4c8
}
.uc-load-quake path {
  stroke:#ff8a00;
  stroke-width:2;
  fill:none
}
.uc-load-quake path:first-child {
  animation:uc-shake 3s ease-in-out infinite
}
@keyframes uc-shake {
  0%,55%,100% {
    transform:none
  }
  65% {
    transform:translateX(6px)
  }
  75% {
    transform:translateX(-2px)
  }
}
.uc-load-moment {
  stroke-dasharray:110;
  animation:uc-moment 3s ease-in-out infinite
}
@keyframes uc-moment {
  0% {
    stroke-dashoffset:110
  }
  40%,100% {
    stroke-dashoffset:0
  }
}
.uc-load-table {
  width:100%;
  border-collapse:collapse;
  font-size:14px
}
.uc-load-table th {
  text-align:left;
  font:600 11px monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--subtle);
  padding:0 10px 10px;
  border-bottom:1.5px solid var(--line-strong)
}
.uc-load-table td {
  padding:13px 10px;
  border-bottom:1px solid var(--line);
  font-family:monospace;
  white-space:nowrap
}
.uc-load-table td:first-child {
  font-family:var(--body);
  font-weight:600;
  white-space:normal
}
.uc-load-table td span {
  display:block;
  margin-top:3px;
  font-weight:400;
  font-size:12.5px;
  color:var(--muted)
}
.uc-load-table .uc-govern td {
  background:var(--hover-wash)
}
.uc-load-table .uc-govern td:first-child {
  box-shadow:inset 3px 0 0 #ff8a00
}

/* Local FEA close-up */
.uc-fea-view {
  display:grid;
  gap:14px
}
.uc-fea-stage {
  position:relative;
  height:330px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(to bottom,#c9d6ea,#f2f4f8)
}
.uc-fea-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none
}
.uc-fea-canvas:active {
  cursor:grabbing
}
.uc-fea-legend {
  position:absolute;
  top:14px;
  left:14px;
  display:grid;
  gap:5px;
  color:#1d1d22;
  font:12.5px monospace;
  pointer-events:none
}
.uc-fea-legend strong {
  font:700 14px var(--body)
}
.uc-fea-scale {
  display:flex;
  gap:6px;
  margin-top:4px
}
.uc-fea-scale i {
  width:14px;
  height:150px;
  border:1px solid #1d1d22;
  background:linear-gradient(to bottom,#ff0000 0 7.7%,#ff5900 0 15.4%,#ffb200 0 23.1%,#ffff00 0 30.8%,#b2ff00 0 38.5%,#59ff00 0 46.2%,#00ff00 0 53.8%,#00ffb2 0 61.5%,#00ffff 0 69.2%,#00b2ff 0 76.9%,#0059ff 0 84.6%,#0000ff 0)
}
.uc-fea-scale ol {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
.uc-fea-max {
  margin-top:4px;
  padding:3px 6px;
  justify-self:start;
  background:#ff0000;
  color:#fff;
  font-weight:700
}
.uc-fea-checks {
  grid-template-columns:1fr 1fr;
  gap:8px
}
@media(max-width:900px) {
  .uc-fea-checks {
    grid-template-columns:1fr
  }
}

.flow-tools img {
  width:24px;
  height:24px;
  border-radius:5px
}
/* Upload: the kinds of files people send */
.flow-files {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-content:center;
  gap:14px
}
.file-tile {
  display:grid;
  justify-items:center;
  gap:10px;
  padding:18px 8px 14px;
  border:1px solid var(--line-medium);
  border-radius:10px;
  background:var(--surface);
  text-align:center;
  font-size:13.5px;
  opacity:0;
  transform:translateY(-14px)
}
.file-tile small {
  color:var(--subtle);
  font-size:13px
}
.flow-scene.is-active .file-tile {
  opacity:1;
  transform:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.4,.5,1)
}
.flow-scene.is-active .file-tile:nth-child(2) { transition-delay:.06s }
.flow-scene.is-active .file-tile:nth-child(3) { transition-delay:.12s }
.flow-scene.is-active .file-tile:nth-child(4) { transition-delay:.18s }
.flow-scene.is-active .file-tile:nth-child(5) { transition-delay:.24s }
.flow-scene.is-active .file-tile:nth-child(6) { transition-delay:.3s }
.flow-scene.is-active .file-tile:nth-child(7) { transition-delay:.36s }
.flow-scene.is-active .file-tile:nth-child(8) { transition-delay:.42s }
.file-icon {
  width:46px;
  height:56px;
  overflow:visible
}
.file-sheet {
  fill:var(--panel);
  stroke:var(--line-strong);
  stroke-width:1.5
}
.file-fold,.file-mail {
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1.5
}
.file-badge {
  fill:var(--badge)
}
.file-icon text {
  fill:#fff;
  font:700 8.5px var(--body);
  letter-spacing:.04em
}
.file-xlsx { --badge:#1d6f42 }
.file-docx { --badge:#2b579a }
.file-pdf { --badge:#d93025 }
.file-dwg { --badge:#0696d7 }
.file-eml { --badge:#0078d4 }
.file-png { --badge:#7b4fd6 }
.file-jpg { --badge:#e8711a }
.file-gif { --badge:#d63384 }
.file-eml .file-mail {
  stroke:var(--badge)
}
@media(max-width:900px) {
  .flow-files {
    grid-template-columns:repeat(4,1fr);
    gap:8px
  }
  .file-tile {
    padding:12px 4px 10px;
    font-size:11.5px
  }
  .file-tile small {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .file-tile {
    opacity:1;
    transform:none
  }
}

.faq-list details>p .text-link {
  display:inline;
  color:var(--paper);
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:2px;
  text-underline-offset:3px
}

/* The active step's name and line, under the window toolbar */
.flow-captions {
  position:absolute;
  inset:50px 0 auto;
  height:104px
}
.flow-captions>div {
  position:absolute;
  inset:0;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:6px;
  padding:18px 24px 0;
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease
}
.flow-captions>div.is-active {
  opacity:1;
  transform:none
}
.flow-captions h3 {
  margin:0;
  font-size:clamp(22px,2vw,28px);
  font-weight:600;
  letter-spacing:-.025em;
  color:var(--paper)
}
.flow-captions p {
  margin:0;
  font-size:16px;
  color:var(--muted)
}
@media(max-width:900px) {
  .flow-sticky {
    top:70px;
    height:calc(100vh - 70px)
  }
  .flow-stage {
    height:calc(100vh - 110px)
  }
  .flow-icons button {
    padding:0 6px
  }
  .flow-icons button.is-active span {
    max-width:0
  }
  .flow-captions p {
    font-size:14px
  }
}

/* Hero: one image card that fades to dark under the headline, the same in both themes */
.hero.hero-cover {
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(720px,calc(100vh - 120px));
  margin-top:20px;
  padding:clamp(40px,6vw,96px) clamp(28px,6vw,96px);
  border-radius:24px 24px 0 0;
  overflow:hidden;
  isolation:isolate
}
.hero-cover-image,.hero-cover::after {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,#000000e0 62%,#000000a6 72%,#00000061 81%,#00000026 89%,#0000000a 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,#000000e0 62%,#000000a6 72%,#00000061 81%,#00000026 89%,#0000000a 95%,transparent 100%)
}
.hero-cover-image {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% 40%
}
.hero-cover::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#060607f0 0%,#060607c2 34%,#06060740 66%,#06060700 85%)
}
.hero-cover .hero-copy {
  max-width:760px;
  margin-bottom:6%
}
.hero-cover h1,:root[data-theme="light"] .hero-cover h1 {
  color:#f7f7f2;
  margin:0;
  font-size:clamp(52px,7vw,118px);
  line-height:.96;
  letter-spacing:-.045em;
  max-width:9.5em
}
.hero-cover h1 span,:root[data-theme="light"] .hero-cover h1 span {
  color:#ffff00;
  text-decoration:none
}
.hero-cover .hero-description {
  margin:26px 0 0;
  max-width:520px;
  color:#d9d9df;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55
}
.hero-cover .hero-actions {
  margin-top:34px
}
.hero-cover .button-ghost,:root[data-theme="light"] .hero-cover .button-ghost {
  color:#f7f7f2;
  border-color:#ffffff59;
  background:#ffffff0d
}
.hero-cover .button-ghost:hover {
  border-color:#ffffffa6
}
@media(max-width:900px) {
  .hero.hero-cover {
    min-height:min(620px,calc(100vh - 100px));
    align-items:flex-end;
    border-radius:18px 18px 0 0
  }
  .hero-cover-image,.hero-cover::after {
    -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);
    mask-image:linear-gradient(to bottom,#000 82%,transparent)
  }
  .hero-cover::after {
    background:linear-gradient(0deg,#060607f5 0%,#060607b8 50%,#06060733 100%)
  }
}

/* Sectors intro: the EPC & OEM statement beside its pitch, tight above the cards */
.sectors-intro {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);
  align-items:end;
  margin-bottom:clamp(24px,3vw,36px)
}
.sectors-intro h2 {
  margin:0;
  font-size:clamp(32px,3.6vw,56px);
  line-height:1.04;
  letter-spacing:-.035em
}
.sectors-intro h2 span {
  color:var(--accent-ink)
}
.sectors-pitch .answer-words {
  display:flex;
  flex-wrap:wrap;
  gap:0 .35em;
  margin:0 0 12px;
  font-size:clamp(28px,2.8vw,44px)
}
.sectors-pitch .answer-close {
  margin:0;
  max-width:none;
  font-size:16px
}
@media(max-width:900px) {
  .sectors-intro {
    grid-template-columns:1fr;
    align-items:start
  }
}

/* Bridge from the big picture to the live product */
.start-section {
  padding-block:clamp(36px,4vw,56px) 6px
}
.start-section h2 {
  margin:0 0 18px;
  font-size:clamp(26px,2.6vw,40px);
  letter-spacing:-.035em
}
.start-section h2 span {
  color:var(--accent-ink)
}
:root[data-theme="light"] .start-section h2 span {
  color:var(--paper)
}
.start-track {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}
.start-live {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 18px 10px 10px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--on-accent);
  font-size:17px;
  transition:filter .2s
}
.start-live:hover {
  filter:brightness(.95)
}
.start-live .icon {
  width:18px;
  height:18px
}
.start-what {
  font-size:14px;
  opacity:.7
}
.start-live strong {
  font-weight:700
}
.start-tag {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--on-accent);
  color:var(--yellow);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.start-tag i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--yellow);
  animation:start-pulse 1.8s ease-out infinite
}
@keyframes start-pulse {
  0% { box-shadow:0 0 0 0 #ffff00aa }
  80%,100% { box-shadow:0 0 0 7px #ffff0000 }
}
.start-soon {
  padding:10px 16px;
  border:1px dashed var(--line-strong);
  border-radius:999px;
  color:var(--muted);
  font-size:15px
}
.start-next {
  margin-left:4px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--subtle)
}
@media(prefers-reduced-motion:reduce) {
  .start-tag i {
    animation:none
  }
}

/* Build: the vessel model is built in the tools you already use */
.flow-build {
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:clamp(14px,3vw,36px)
}
.build-tool {
  display:grid;
  justify-items:center;
  gap:16px;
  width:clamp(130px,16vw,200px);
  padding:30px 16px 24px;
  border:1px solid var(--line-medium);
  border-radius:18px;
  background:var(--surface);
  opacity:0;
  transform:translateY(12px) scale(.96)
}
.flow-scene.is-active .build-tool {
  opacity:1;
  transform:none;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.4,.5,1)
}
.flow-scene.is-active .build-tool:nth-child(2) {
  transition-delay:.1s
}
.flow-scene.is-active .build-tool:nth-child(3) {
  transition-delay:.2s
}
.build-tool img {
  width:72px;
  height:72px;
  border-radius:16px
}
.build-tool strong {
  font-size:17px;
  font-weight:600;
  text-align:center
}
.build-other span {
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:2px dashed var(--line-strong);
  border-radius:16px;
  color:var(--muted)
}
.build-other span .icon {
  width:28px;
  height:28px
}
.build-other strong {
  color:var(--muted)
}
/* Deliver: the real GA drawing */
.deliver-ga {
  height:100%;
  background:var(--text);
  -webkit-mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat;
  mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat
}
@media(max-width:900px) {
  .flow-build {
    gap:10px
  }
  .build-tool {
    padding:20px 8px 16px
  }
  .build-tool img,.build-other span {
    width:52px;
    height:52px
  }
  .build-tool strong {
    font-size:14px
  }
}
@media(prefers-reduced-motion:reduce) {
  .build-tool {
    opacity:1;
    transform:none
  }
}

/* Approve sheet: the real vertical vessel drawing beside its schedule */
.approve-drawing {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:18px;
  padding:14px 14px 8px
}
.approve-ga {
  min-height:0;
  background:var(--ink-line);
  -webkit-mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat;
  mask:url(/images/vessels/vertical-elevation.png) center/contain no-repeat
}
.approve-tables {
  display:grid;
  align-content:start;
  gap:10px;
  font:11.5px/1.3 monospace;
  color:var(--ink-line)
}
.approve-tables table {
  width:100%;
  border:1.5px solid var(--ink-line);
  border-collapse:collapse
}
.approve-tables caption {
  caption-side:top;
  text-align:left;
  font-weight:700;
  padding:6px 8px;
  border:1.5px solid var(--ink-line);
  border-bottom:0
}
.approve-tables td {
  padding:2.5px 8px;
  white-space:nowrap
}
.approve-tables tr:first-child td {
  padding-top:6px
}
.approve-tables tr:last-child td {
  padding-bottom:6px
}
@media(max-width:900px) {
  .approve-drawing {
    grid-template-columns:1fr
  }
  .approve-tables {
    display:none
  }
}

/* Works with your stack: a framed band with crop marks */
.stack-section {
  padding-block:clamp(40px,5vw,72px)
}
.stack-frame {
  position:relative;
  display:grid;
  gap:clamp(30px,4vw,56px);
  padding:clamp(32px,5vw,72px) clamp(24px,5vw,80px);
  border-block:1px solid var(--line)
}
.stack-frame::before,.stack-frame::after {
  content:"";
  position:absolute;
  top:-28px;
  bottom:-28px;
  width:1px;
  background:linear-gradient(transparent,var(--line-medium) 28px,var(--line-medium) calc(100% - 28px),transparent)
}
.stack-frame::before {
  left:0
}
.stack-frame::after {
  right:0
}
.stack-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px clamp(24px,5vw,80px);
  align-items:end
}
.stack-head h2 {
  margin:0;
  font-size:clamp(32px,3.6vw,56px);
  letter-spacing:-.035em;
  line-height:1.04
}
.stack-head p {
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.6
}
.stack-logos {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:center;
  gap:clamp(20px,3vw,48px)
}
.stack-logos img {
  width:100%;
  max-height:34px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.85;
  transition:opacity .25s
}
.stack-logos img:hover {
  opacity:1
}
:root[data-theme="light"] .stack-logos img {
  filter:grayscale(1) invert(1)
}
@media(max-width:900px) {
  .stack-head {
    grid-template-columns:1fr
  }
  .stack-logos {
    grid-template-columns:repeat(4,1fr)
  }
}

/* Approve sheet: drawing full height on the left; schedule and revision block on the right */
.approve-sheet {
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:1fr auto;
  column-gap:18px
}
.approve-drawing {
  display:contents
}
.approve-ga {
  grid-column:1;
  grid-row:1/3;
  margin:8px 0
}
.approve-tables {
  grid-column:2;
  grid-row:1;
  padding-top:10px
}
.approve-block {
  grid-column:2;
  grid-row:2;
  width:100%
}
@media(max-width:900px) {
  .approve-sheet {
    grid-template-columns:1fr
  }
  .approve-ga {
    grid-row:1
  }
  .approve-block {
    grid-column:1
  }
}

/* Workflow window: product toggle */
.flow-product {
  display:flex;
  padding:3px;
  border-radius:9px;
  background:var(--line)
}
.flow-product button {
  height:28px;
  padding:0 12px;
  border:0;
  border-radius:7px;
  background:none;
  color:var(--muted);
  font:600 13px var(--body);
  cursor:pointer;
  transition:background .25s,color .25s
}
.flow-product button[aria-pressed="true"] {
  background:var(--panel);
  color:var(--paper);
  box-shadow:0 1px 3px var(--shadow)
}
.flow-icons {
  margin:0 auto 0 0
}
.flow-window-bar {
  justify-content:flex-start
}
.flow-track .hx-only,.flow-track[data-product="hx"] .pv-only {
  display:none
}
.flow-track .pv-only,.flow-track[data-product="hx"] .hx-only {
  display:contents
}
.approve-ga-hx {
  -webkit-mask-image:url(/images/vessels/e101-elevation.png);
  mask-image:url(/images/vessels/e101-elevation.png)
}
.deliver-ga-hx {
  -webkit-mask:url(/images/vessels/e101-elevation.png) center/contain no-repeat;
  mask:url(/images/vessels/e101-elevation.png) center/contain no-repeat
}
.deliver-ga-section {
  -webkit-mask:url(/images/vessels/e101-section.png) center/contain no-repeat;
  mask:url(/images/vessels/e101-section.png) center/contain no-repeat
}
.deliver-assembly {
  position:absolute;
  inset:0
}
@media(max-width:900px) {
  .flow-product button {
    padding:0 8px;
    font-size:11.5px
  }
}
/* HXSuperAgent page */
.hx-intro {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);
  align-items:end;
  padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px)
}
.hx-intro h1 {
  margin:0;
  font-size:clamp(44px,5.6vw,92px);
  line-height:.98;
  letter-spacing:-.045em
}
.hx-intro h1 span {
  color:var(--accent-ink)
}
.hx-intro .hero-description {
  margin:0 0 24px;
  max-width:520px
}
.hx-viewer {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:14px;
  padding-bottom:clamp(30px,4vw,60px)
}
.hx-stage {
  position:relative;
  height:min(680px,calc(100vh - 160px));
  min-height:440px;
  border:1px solid var(--line-medium);
  border-radius:22px;
  overflow:hidden;
  color:#1d1d22;
  /* A CAD viewport: pale steel blue at the top easing to white, the same in both themes */
  background:linear-gradient(180deg,#b9c8da 0%,#d6e0eb 38%,#eef2f6 72%,#fbfcfd 100%)
}
.hx-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none
}
.hx-canvas:active {
  cursor:grabbing
}
.hx-caption {
  position:absolute;
  top:18px;
  left:20px;
  display:grid;
  gap:3px;
  pointer-events:none
}
.hx-caption strong {
  font-family:var(--head);
  font-size:20px
}
.hx-caption span,.hx-hint {
  font-size:13px;
  color:#4a5058
}
.hx-hint {
  position:absolute;
  left:20px;
  bottom:16px;
  pointer-events:none
}
.hx-zoom {
  position:absolute;
  right:14px;
  bottom:14px;
  display:grid;
  gap:6px
}
.hx-zoom button {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #0000001f;
  border-radius:10px;
  background:#ffffffd9;
  color:#1d1d22;
  cursor:pointer
}
.hx-zoom button:hover {
  border-color:#00000040
}
.hx-zoom .icon {
  width:18px;
  height:18px
}
.hx-panel {
  display:grid;
  align-content:start;
  gap:12px
}
.hx-control {
  display:grid;
  gap:10px;
  padding:16px;
  border:1px solid var(--line-medium);
  border-radius:16px;
  background:var(--panel)
}
.hx-control label,.hx-row span,.hx-label {
  font-weight:600;
  font-size:15px
}
.hx-row {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.hx-scale {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--subtle)
}
.hx-control input[type="range"] {
  width:100%;
  accent-color:#e6d800
}
.hx-control input[type="range"]:disabled {
  opacity:.35
}
.hx-switch {
  position:relative;
  width:44px;
  height:24px;
  border:0;
  border-radius:12px;
  background:var(--line-strong);
  cursor:pointer;
  transition:background .2s
}
.hx-switch i {
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:transform .2s
}
.hx-switch[aria-pressed="true"] {
  background:var(--yellow)
}
.hx-switch[aria-pressed="true"] i {
  transform:translateX(20px);
  background:#060607
}
.hx-parts {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px
}
.hx-parts button {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--text);
  font:500 14px var(--body);
  text-align:left;
  cursor:pointer
}
.hx-parts button:hover,.hx-parts button[aria-pressed="true"] {
  background:var(--hover-wash)
}
.hx-parts button[aria-pressed="true"] {
  box-shadow:inset 3px 0 0 var(--yellow)
}
.hx-swatch {
  width:12px;
  height:12px;
  border-radius:3px;
  flex:none;
  background:#c9ccd2
}
.hx-swatch-bonnet { background:#6fb98a }
.hx-swatch-gaskets { background:#2f2f35; box-shadow:inset 0 0 0 1px var(--line-strong) }
.hx-swatch-bolting { background:#7b7f87 }
.hx-swatch-tubesheet { background:#a3a9b3 }
.hx-swatch-bundle { background:#4f86e0 }
.hx-swatch-saddles { background:#8b9099 }
@media(max-width:900px) {
  .hx-intro,.hx-viewer {
    grid-template-columns:1fr
  }
  .hx-stage {
    height:62vh;
    min-height:360px
  }
}
/* Where we start: centred */
.start-section {
  text-align:center
}
.start-section .start-track {
  justify-content:center
}

/* Document viewer */
.doc-viewer {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto 1fr;
  border:1px solid var(--line-medium);
  border-radius:12px;
  overflow:hidden;
  background:#e4e6ea
}
.doc-toolbar {
  display:flex;
  align-items:center;
  gap:14px;
  height:42px;
  padding:0 8px 0 12px;
  border-bottom:1px solid #d3d6dc;
  background:#f7f8fa;
  color:#3a3d44;
  font-size:13px
}
.doc-file {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.doc-badge {
  flex:none;
  padding:2px 5px;
  border-radius:4px;
  background:#d93025;
  color:#fff;
  font:700 9.5px var(--body);
  font-style:normal;
  letter-spacing:.04em
}
.doc-badge-step {
  background:#0696d7
}
.doc-pages {
  margin-left:auto;
  color:#6b6f78;
  font-variant-numeric:tabular-nums
}
.doc-zoom,.doc-actions {
  display:flex;
  align-items:center;
  gap:2px
}
.doc-zoom {
  padding-left:12px;
  border-left:1px solid #d3d6dc
}
.doc-zoom output {
  min-width:44px;
  text-align:center;
  font-variant-numeric:tabular-nums
}
.doc-actions {
  padding-left:10px;
  border-left:1px solid #d3d6dc
}
.doc-toolbar button {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:7px;
  background:none;
  color:#3a3d44;
  cursor:pointer
}
.doc-toolbar button:hover {
  background:#e7e9ed
}
.doc-toolbar button[aria-pressed="true"] {
  background:#fff36b;
  color:#111
}
.doc-toolbar svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.doc-canvas {
  position:relative;
  overflow:auto;
  padding:20px;
  display:grid;
  justify-content:center;
  align-content:start
}
.doc-model .doc-canvas {
  padding:0;
  background:linear-gradient(180deg,#d7e0ea,#fbfcfd)
}
.doc-sizer {
  position:relative
}
.doc-page {
  --ink-line:#1d1d22;
  position:absolute;
  top:0;
  left:0;
  width:612px;
  min-height:792px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:36px 40px 28px;
  background:#fff;
  color:#1d1d22;
  box-shadow:0 1px 3px #0000001f,0 10px 30px #00000024;
  transform-origin:top left
}
.doc-landscape {
  width:792px;
  min-height:612px
}
.doc-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:16px;
  border-bottom:2px solid #1d1d22;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#55585f
}
.doc-head strong {
  color:#1d1d22;
  letter-spacing:0;
  text-transform:none;
  font-size:13px
}
.doc-body {
  min-height:0
}
.doc-foot {
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  padding-top:8px;
  border-top:1px solid #d3d6dc;
  font:10px monospace;
  color:#7a7d85
}
/* Pages keep their print colours whatever the site theme */
.doc-page table {
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.doc-page th {
  position:static;
  background:none;
  color:#55585f;
  border-bottom:1.5px solid #1d1d22
}
.doc-page td {
  border-bottom:1px solid #e3e5e9;
  color:#1d1d22
}
.doc-page tr.table-group td {
  color:#1d1d22;
  background:#f4f5f7;
  border-bottom:1px solid #c9ccd2
}
.doc-page td b {
  background:#fff36b;
  color:#111
}
.doc-page .sheet {
  color:#1d1d22
}
.doc-page .sheet-dim {
  fill:#55585f;
  stroke:#55585f
}
.doc-page .sheet-line rect,.doc-page .sheet-iso .iso-top {
  fill:#fff
}
.doc-page .deliver-ga {
  height:640px;
  background:#1d1d22
}
.doc-landscape .deliver-ga {
  height:470px
}
.doc-note {
  position:absolute;
  top:120px;
  right:-12px;
  width:210px;
  padding:12px 14px;
  border-radius:4px 4px 4px 0;
  background:#fff36b;
  color:#1d1d22;
  font-size:12.5px;
  line-height:1.45;
  box-shadow:0 6px 18px #0000002e;
  transform:rotate(1.5deg)
}
.doc-note b {
  display:block;
  margin-bottom:4px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.doc-note[hidden] {
  display:none
}
@media(max-width:900px) {
  .doc-pages,.doc-actions {
    display:none
  }
}

/* CAD window */
.cad-window {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  border:1px solid #c5cbd3;
  border-radius:12px;
  overflow:hidden;
  background:#eef1f5;
  color:#24272d;
  font-size:12.5px
}
.cad-title {
  display:flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding:0 12px;
  background:#2b3240;
  color:#e9edf3
}
.cad-title span:last-child {
  margin-left:auto;
  opacity:.6
}
.cad-mark,.xl-mark {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:5px;
  background:#ffff00;
  color:#060607;
  font:800 10px var(--body)
}
.cad-ribbon {
  display:flex;
  gap:4px;
  padding:6px 8px 2px;
  border-bottom:1px solid #cfd5dd;
  background:linear-gradient(#fbfcfd,#eef1f5);
  overflow-x:auto;
  scrollbar-width:none
}
.cad-group {
  display:grid;
  justify-items:center;
  gap:2px;
  padding:0 8px;
  border-right:1px solid #d7dce3
}
.cad-group:last-child {
  border-right:0
}
.cad-tools {
  display:flex;
  gap:2px
}
.cad-tools button,.cad-slider {
  display:grid;
  justify-items:center;
  gap:3px;
  min-width:50px;
  padding:5px 6px;
  border:1px solid transparent;
  border-radius:6px;
  background:none;
  color:#24272d;
  font:500 11px var(--body);
  cursor:pointer
}
.cad-tools button:hover {
  background:#e2e7ee;
  border-color:#cfd5dd
}
.cad-tools button[aria-pressed="true"] {
  background:#fff7a8;
  border-color:#e6d800
}
.cad-tools svg,.cad-tree svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:#3b5bdb;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.cad-slider input {
  width:96px;
  accent-color:#3b5bdb
}
.cad-group-name {
  font-size:10.5px;
  color:#7a818c
}
.cad-main {
  display:grid;
  grid-template-columns:190px 1fr;
  min-height:0
}
.cad-tree {
  overflow:auto;
  padding:8px;
  border-right:1px solid #cfd5dd;
  background:#f7f8fa
}
.cad-tree p {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 6px;
  font-weight:600
}
.cad-tree p svg {
  stroke:#24272d;
  width:16px;
  height:16px
}
.cad-tree ul {
  list-style:none;
  margin:0;
  padding:0 0 0 6px;
  border-left:1px dotted #b4bbc5
}
.cad-tree li>* {
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:5px 6px;
  border:0;
  border-radius:5px;
  background:none;
  color:#24272d;
  font:500 12.5px var(--body);
  text-align:left
}
.cad-tree li svg {
  width:15px;
  height:15px;
  flex:none
}
.cad-tree button {
  cursor:pointer
}
.cad-tree button:hover,.cad-tree button[aria-pressed="true"] {
  background:#dfe6f3
}
.cad-viewport {
  position:relative;
  min-height:0;
  background:linear-gradient(180deg,#b9c8da 0%,#d6e0eb 40%,#eef2f6 75%,#fbfcfd 100%)
}
.cad-viewport .deliver-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.cad-axes {
  position:absolute;
  left:12px;
  bottom:10px;
  display:flex;
  gap:6px;
  font:700 10px monospace;
  pointer-events:none
}
.cad-axes i {
  font-style:normal;
  padding:2px 5px;
  border-radius:3px;
  color:#fff
}
.cad-axes i:nth-child(1) { background:#e03131 }
.cad-axes i:nth-child(2) { background:#2f9e44 }
.cad-axes i:nth-child(3) { background:#3b5bdb }
.cad-status {
  display:flex;
  gap:18px;
  height:26px;
  align-items:center;
  padding:0 12px;
  border-top:1px solid #cfd5dd;
  background:#f7f8fa;
  color:#5f6670;
  font-size:11.5px
}
.cad-status span:first-child {
  margin-right:auto
}
/* Spreadsheet window */
.xl-window {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  border:1px solid #c8ccd2;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  color:#1f1f1f;
  font:12.5px Calibri,Carlito,"Segoe UI",Arial,sans-serif
}
.xl-title {
  display:flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding:0 12px;
  background:#217346;
  color:#fff;
  font-family:var(--body)
}
.xl-title .xl-mark {
  background:#fff;
  color:#217346
}
.xl-title span:last-child {
  margin-left:auto;
  opacity:.75;
  font-size:12px
}
.xl-ribbon {
  display:flex;
  gap:2px;
  padding:0 8px;
  background:#f3f3f3;
  border-bottom:1px solid #d6d6d6;
  font-family:var(--body);
  font-size:12px
}
.xl-ribbon span {
  padding:7px 10px;
  color:#444
}
.xl-ribbon .is-on {
  color:#217346;
  font-weight:600;
  box-shadow:inset 0 -2px 0 #217346
}
.xl-formula {
  display:grid;
  grid-template-columns:64px 34px 1fr;
  align-items:center;
  height:28px;
  border-bottom:1px solid #d6d6d6
}
.xl-ref {
  padding:0 8px;
  border-right:1px solid #d6d6d6;
  font-weight:600
}
.xl-fx {
  text-align:center;
  font-style:italic;
  color:#666;
  border-right:1px solid #d6d6d6
}
.xl-value {
  padding:0 10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.xl-grid-wrap {
  overflow:auto;
  min-height:0;
  background:#fff
}
.xl-grid {
  border-collapse:collapse;
  min-width:100%;
  font-size:12.5px
}
.xl-grid th {
  position:sticky;
  top:0;
  z-index:1;
  min-width:36px;
  padding:3px 6px;
  border:1px solid #d6d6d6;
  background:#f3f3f3;
  color:#555;
  font-weight:400;
  text-align:center
}
.xl-grid tbody th {
  position:sticky;
  left:0;
  top:auto
}
.xl-grid td {
  padding:3px 8px;
  height:22px;
  border:1px solid #e1e1e1;
  white-space:nowrap;
  cursor:cell
}
.xl-grid .xl-head {
  background:#e7f1ea;
  font-weight:700;
  color:#1f1f1f
}
.xl-grid .xl-num {
  text-align:right;
  font-variant-numeric:tabular-nums
}
.xl-grid .xl-group td {
  background:#f6f8f7;
  font-weight:700;
  color:#217346
}
.xl-grid .xl-total td {
  font-weight:700;
  border-top:2px solid #217346
}
.xl-grid td.is-selected {
  outline:2px solid #217346;
  outline-offset:-2px;
  background:#f1f8f4
}
.xl-sheets {
  display:flex;
  align-items:center;
  gap:2px;
  height:30px;
  padding:0 8px;
  border-top:1px solid #d6d6d6;
  background:#f3f3f3;
  font-family:var(--body);
  font-size:12px
}
.xl-sheets span {
  padding:5px 14px;
  color:#444
}
.xl-sheets .is-on {
  background:#fff;
  color:#217346;
  font-weight:600;
  box-shadow:inset 0 -2px 0 #217346
}
.xl-sheets .xl-status {
  margin-left:auto;
  color:#666
}
@media(max-width:900px) {
  .cad-main {
    grid-template-columns:1fr
  }
  .cad-tree {
    display:none
  }
  .cad-tools button span,.cad-slider span {
    display:none
  }
  .cad-tools button,.cad-slider {
    min-width:36px
  }
}

/* Interactive demo: the window sits in the page; buttons move it forward */
.flow-track {
  height:auto
}
.flow-sticky {
  position:static;
  height:auto;
  display:block
}
.flow-stage {
  height:min(720px,calc(100vh - 120px));
  min-height:600px
}
.flow-progress i {
  transition:width .5s ease
}
.demo-scene {
  justify-content:flex-start;
  gap:16px;
  padding:clamp(16px,2.6vw,32px) clamp(16px,4vw,48px) 18px
}
.demo-scene .flow-files {
  flex:1;
  align-content:center
}
.demo-avatar {
  flex:none;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#060607;
  color:#ffff00;
  font:700 11px var(--body)
}
.demo-chat {
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 8px 8px 10px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 8px 24px #0000000f
}
.demo-chat input,.demo-type {
  flex:1;
  min-width:0;
  border:0;
  background:none;
  color:var(--paper);
  font:500 15px var(--body);
  outline:none
}
.demo-send,.demo-primary,.demo-secondary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:11px;
  font:600 14px var(--body);
  cursor:pointer;
  transition:transform .15s,filter .2s,opacity .2s
}
.demo-send,.demo-primary {
  border:0;
  background:var(--yellow);
  color:#060607
}
.demo-secondary {
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--paper)
}
.demo-send:hover,.demo-primary:hover,.demo-secondary:hover {
  transform:translateY(-1px)
}
.demo-primary:disabled {
  opacity:.4;
  cursor:not-allowed;
  transform:none
}
.demo-send svg,.demo-primary svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linejoin:round
}
.demo-send {
  animation:demo-nudge 2.4s ease-in-out infinite
}
@keyframes demo-nudge {
  0%,70%,100% { box-shadow:0 0 0 0 #ffff0000 }
  80% { box-shadow:0 0 0 6px #ffff0055 }
}
.demo-message {
  display:flex;
  align-items:flex-start;
  gap:12px
}
.demo-message p {
  margin:0;
  padding:10px 14px;
  border-radius:4px 14px 14px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:15px;
  line-height:1.5
}
.demo-conflicts {
  display:grid;
  gap:10px;
  margin-left:44px
}
.demo-conflict {
  display:grid;
  grid-template-columns:200px 1fr;
  align-items:center;
  gap:12px;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line-medium);
  border-radius:12px;
  background:var(--panel)
}
.demo-conflict legend {
  float:left;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  font-weight:600;
  font-size:15px
}
.demo-conflict legend b {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ff8a00;
  color:#fff;
  font-size:12px
}
.demo-options {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.demo-options label,.demo-chip {
  cursor:pointer
}
.demo-options input,.demo-chip input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.demo-options span {
  display:grid;
  gap:1px;
  min-width:150px;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  font:600 14px monospace;
  transition:background .2s,border-color .2s
}
.demo-options small {
  font:500 11.5px var(--body);
  color:var(--subtle)
}
.demo-options input:checked+span,.demo-chip input:checked+span {
  background:#fff7a8;
  border-color:#e6d800;
  color:#060607
}
.demo-options input:focus-visible+span,.demo-chip input:focus-visible+span {
  outline:2px solid var(--focus);
  outline-offset:2px
}
.demo-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px
}
.demo-rev {
  margin-right:auto;
  color:var(--subtle);
  font-size:13px
}
.demo-rev b {
  color:var(--paper)
}
.demo-scene .flow-build {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(14px,3vw,36px)
}
.demo-build {
  display:grid;
  justify-items:center;
  gap:12px;
  padding-bottom:6px
}
.demo-bar {
  width:min(420px,80%);
  height:6px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden
}
.demo-bar i {
  display:block;
  width:0;
  height:100%;
  background:var(--yellow)
}
.demo-build.is-running .demo-bar i {
  width:100%;
  transition:width 2.3s cubic-bezier(.4,0,.2,1)
}
.demo-build p {
  margin:0;
  font-size:15px;
  color:var(--muted)
}
.demo-build.is-done p {
  color:var(--paper);
  font-weight:600
}
.approve-scene.demo-scene {
  flex-direction:row;
  align-items:stretch;
  gap:16px
}
.approve-scene .approve-sheet {
  flex:1;
  min-width:0;
  height:auto
}
.demo-review {
  flex:0 0 270px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.demo-review .demo-message p {
  font-size:14px
}
.demo-chips {
  display:grid;
  gap:8px
}
.demo-chips>span {
  display:contents
}
.demo-chip span {
  display:block;
  padding:9px 12px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  font-size:13.5px;
  line-height:1.35;
  transition:background .2s,border-color .2s
}
.demo-chip span::before {
  content:"+ ";
  color:var(--subtle)
}
.demo-chip input:checked+span::before {
  content:"✓ ";
  color:#060607
}
.demo-type {
  flex:none;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--panel)
}
.demo-review .demo-actions {
  margin-top:auto
}
.demo-review .demo-actions button {
  flex:1;
  justify-content:center
}
.flow-track .hx-only.demo-chips-hx {
  display:none
}
@media(max-width:900px) {
  .flow-stage {
    height:auto;
    min-height:640px
  }
  .demo-conflict {
    grid-template-columns:1fr
  }
  .demo-conflicts {
    margin-left:0
  }
  .approve-scene.demo-scene {
    flex-direction:column
  }
  .demo-review {
    flex:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .demo-send {
    animation:none
  }
}
.cad-slider input:disabled {
  opacity:.35
}

/* Revision block beside the review panel */
.approve-scene .approve-row {
  grid-template-columns:26px 62px 1fr 34px 44px 44px 44px;
  font-size:11px
}
.approve-scene .approve-title {
  font-size:10.5px
}
.approve-scene .approve-title span:first-child {
  white-space:normal
}

/* Drafting viewer */
.dwg-window {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  border:1px solid #11151b;
  border-radius:12px;
  overflow:hidden;
  background:#212830;
  color:#c9d1dc;
  font:12px var(--body)
}
.dwg-titlebar {
  display:flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding:0 12px;
  background:#2b333d;
  border-bottom:1px solid #151a20
}
.dwg-titlebar strong {
  color:#eef2f7
}
.dwg-titlebar span {
  margin-left:auto;
  opacity:.6
}
.doc-badge-dwg {
  background:#0696d7
}
.dwg-space {
  position:relative;
  overflow:hidden;
  cursor:none;
  touch-action:none;
  background-color:#212830;
  background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px
}
.dwg-sheet {
  position:absolute;
  top:0;
  left:0;
  width:1000px;
  height:707px;
  background:#fff;
  box-shadow:0 0 0 1px #0006,6px 8px 0 #00000059;
  transform-origin:0 0
}
.dwg-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#1d1d22;
  stroke-width:1.2;
  font:10px monospace;
  pointer-events:none
}
.dwg-frame .dwg-inner {
  stroke-width:2
}
.dwg-frame text {
  fill:#1d1d22;
  stroke:none;
  text-anchor:middle;
  dominant-baseline:middle
}
.dwg-title text {
  text-anchor:start;
  dominant-baseline:auto;
  font-size:11px;
  font-weight:600
}
.dwg-title .dwg-company {
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em
}
.dwg-title .dwg-small {
  font-size:7.5px;
  font-weight:400;
  fill:#55585f
}
.dwg-content {
  position:absolute;
  left:44px;
  top:44px;
  right:44px;
  bottom:44px;
  color:#1d1d22
}
.dwg-area {
  position:absolute;
  inset:0;
  display:grid;
  gap:22px
}
.dwg-area-ga {
  grid-template-columns:1fr 330px;
  bottom:130px
}
.dwg-area-wide {
  grid-template-rows:1fr auto;
  right:340px
}
.dwg-area-detail {
  grid-template-columns:1fr 260px;
  bottom:130px
}
.dwg-area-full {
  bottom:130px
}
.dwg-area-full .sheet {
  width:100%;
  height:100%;
  color:#1d1d22
}
.dwg-area-full .sheet-dim {
  fill:#55585f;
  stroke:#55585f
}
.dwg-area-full .sheet-line rect,.dwg-area-full .iso-top {
  fill:#fff
}
.dwg-ink {
  min-height:0;
  background:#1d1d22;
  -webkit-mask:center/contain no-repeat;
  mask:center/contain no-repeat
}
.dwg-ink-vertical {
  -webkit-mask-image:url(/images/vessels/vertical-elevation.png);
  mask-image:url(/images/vessels/vertical-elevation.png)
}
.dwg-ink-e101 {
  -webkit-mask-image:url(/images/vessels/e101-elevation.png);
  mask-image:url(/images/vessels/e101-elevation.png)
}
.dwg-ink-section {
  -webkit-mask-image:url(/images/vessels/e101-section.png);
  mask-image:url(/images/vessels/e101-section.png)
}
.dwg-side {
  display:grid;
  align-content:start;
  gap:12px
}
.dwg-side-row {
  grid-template-columns:1fr 1fr
}
.dwg-table {
  width:100%;
  border:1.4px solid #1d1d22;
  border-collapse:collapse;
  font:10.5px/1.25 monospace;
  color:#1d1d22
}
.dwg-table caption {
  caption-side:top;
  padding:5px 7px;
  border:1.4px solid #1d1d22;
  border-bottom:0;
  text-align:left;
  font-weight:700
}
.dwg-table td {
  padding:2px 7px;
  border-top:.5px solid #c9ccd2;
  white-space:nowrap
}
.dwg-cross {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s
}
.dwg-space:hover .dwg-cross {
  opacity:1
}
.dwg-cross i {
  position:absolute;
  background:#e8eef6
}
.dwg-h {
  left:0;
  right:0;
  top:var(--y);
  height:1px
}
.dwg-v {
  top:0;
  bottom:0;
  left:var(--x);
  width:1px
}
.dwg-box {
  left:calc(var(--x) - 5px);
  top:calc(var(--y) - 5px);
  width:11px;
  height:11px;
  background:none!important;
  border:1px solid #e8eef6
}
.dwg-command {
  display:flex;
  gap:8px;
  height:26px;
  align-items:center;
  padding:0 12px;
  background:#1a2027;
  border-top:1px solid #151a20;
  font:11.5px monospace;
  color:#9fb0c3
}
.dwg-command span:first-child {
  color:#6d7c8c
}
.dwg-status {
  display:flex;
  gap:18px;
  height:26px;
  align-items:center;
  padding:0 12px;
  background:#2b333d;
  font:11px monospace;
  color:#9fb0c3
}
.dwg-status span:first-child {
  min-width:170px
}
.dwg-tabs {
  display:flex;
  gap:2px;
  margin-right:auto
}
.dwg-tabs b {
  padding:3px 10px;
  border-radius:4px 4px 0 0;
  font-weight:500
}
.dwg-tabs .is-on {
  background:#3a4552;
  color:#fff
}

/* Deliver: no centring gap; the caption band is tighter and the window taller */
.flow-scene.flow-deliver {
  justify-content:flex-start;
  padding:10px clamp(14px,2vw,24px) 14px
}
.flow-captions {
  height:84px
}
.flow-captions>div {
  padding-top:12px
}
.flow-scene {
  inset:132px 0 0
}
.flow-stage {
  height:min(820px,calc(100vh - 80px));
  min-height:660px
}
.deliver-tabs {
  flex-wrap:wrap;
  justify-content:center;
  overflow:visible
}
.deliver-tabs button {
  flex:0 1 auto
}
/* PDF pages: text wraps inside the page */
.doc-page {
  overflow:hidden
}
.doc-page table {
  table-layout:auto
}
.doc-page td,.doc-page th {
  white-space:normal;
  overflow-wrap:anywhere
}
.doc-page td:nth-child(n+3) {
  white-space:normal
}
/* Build: choose COMPRESS or PV Elite; the "+" tile is shown but not selectable */
.build-pick {
  position:relative;
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s
}
.build-pick input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.build-pick:hover {
  transform:translateY(-2px)
}
.build-pick:has(input:checked) {
  border-color:#e6d800;
  box-shadow:0 0 0 3px #fff36b
}
.build-pick:has(input:focus-visible) {
  outline:2px solid var(--focus);
  outline-offset:3px
}
.build-check {
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--yellow);
  color:#060607;
  font-size:12px;
  font-weight:700;
  opacity:0;
  transition:opacity .2s
}
.build-pick:has(input:checked) .build-check {
  opacity:1
}
.build-other {
  opacity:.5;
  cursor:not-allowed
}

/* Drawing sheets letter in an ISO 3098 CAD font (osifont, LGPL with font exception) */
@font-face {
  font-family:"DMX CAD";
  src:url(/assets/fonts/osifont.ttf) format("truetype");
  font-display:swap
}
.dwg-sheet,.dwg-sheet text,.dwg-sheet table,.dwg-sheet td,.dwg-sheet caption,.dwg-sheet tspan {
  font-family:"DMX CAD",monospace
}
.dwg-sheet text {
  letter-spacing:.02em
}
.deliver-panel .dwg-table {
  font-size:11px;
  line-height:1.2
}
.deliver-panel .dwg-table caption {
  padding:4px 7px;
  font-size:11.5px
}
.deliver-panel .dwg-table td {
  padding:1.5px 7px;
  border-bottom:0;
  border-top:.5px solid #d2d5da;
  font-size:11px;
  white-space:nowrap
}
.dwg-side-row {
  align-items:start
}

/* HX GA: drawing on top, schedule and parts list in the band left of the title block */
.dwg-area-wide {
  right:0;
  bottom:0;
  grid-template-rows:1fr 150px
}
.dwg-area-wide .dwg-side-row {
  margin-right:350px;
  overflow:hidden
}
/* PDF tables: headers and badges stay on one line; long text wraps */
.doc-page th {
  white-space:nowrap
}
.doc-page td b {
  white-space:nowrap;
  display:inline-block
}
.doc-page td:first-child {
  min-width:110px
}

/* Multi-document PDF viewer */
.doc-files {
  display:flex;
  gap:4px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none
}
.doc-files button {
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:auto!important;
  height:30px;
  padding:0 10px!important;
  border:1px solid transparent!important;
  border-radius:8px;
  white-space:nowrap;
  font:600 12.5px var(--body)!important;
  color:#5b5f68!important
}
.doc-files button[aria-pressed="true"] {
  background:#fff!important;
  border-color:#d3d6dc!important;
  color:#1d1d22!important;
  box-shadow:0 1px 2px #0000000f
}
.doc-download {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:7px;
  color:#3a3d44
}
.doc-download:hover {
  background:#e7e9ed
}
.doc-download[hidden] {
  display:none
}
.doc-multi .doc-canvas {
  display:block;
  text-align:center
}
.doc-stack[hidden] {
  display:none
}
.doc-img {
  display:block;
  height:auto;
  margin:0 auto 18px;
  background:#fff;
  box-shadow:0 1px 3px #0000001f,0 10px 30px #00000024
}

/* ===== Chat demo ===== */
.flow-stage {
  height:min(900px,calc(110vh - 88px));
  min-height:726px
}
.flow-scene,.flow-scene.flow-deliver {
  inset:50px 0 0
}
.chat-scene {
  display:grid!important;
  grid-template-rows:1fr auto;
  padding:0!important;
  gap:0!important;
  font-family:var(--body)
}
.chat-thread {
  overflow-y:auto;
  padding:28px max(24px,calc(50% - 400px)) 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  scrollbar-width:thin
}
.chat-msg {
  display:flex;
  gap:12px;
  animation:chat-in .35s ease both
}
@keyframes chat-in {
  from { opacity:0; transform:translateY(6px) }
  to { opacity:1; transform:none }
}
.chat-ai .chat-body {
  flex:1;
  min-width:0;
  color:var(--paper);
  font-size:15.5px;
  line-height:1.6
}
.chat-user {
  justify-content:flex-end
}
.chat-user .chat-body {
  max-width:78%;
  padding:11px 16px;
  border-radius:18px 18px 4px 18px;
  background:var(--raised);
  color:var(--paper);
  font-size:15px;
  line-height:1.55
}
.chat-body p {
  margin:0
}
.chat-body p+* {
  margin-top:12px
}
.chat-avatar {
  flex:none;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-top:-2px;
  border-radius:9px;
  background:#060607;
  color:#ffff00;
  font:700 11px var(--head);
  letter-spacing:.02em
}
.chat-typing {
  display:inline-flex;
  gap:5px;
  padding-top:9px
}
.chat-typing i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--subtle);
  animation:chat-dot 1s ease-in-out infinite
}
.chat-typing i:nth-child(2) { animation-delay:.15s }
.chat-typing i:nth-child(3) { animation-delay:.3s }
@keyframes chat-dot {
  0%,80%,100% { opacity:.25; transform:none }
  40% { opacity:1; transform:translateY(-3px) }
}
.chat-files,.chat-attachments {
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.chat-file {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 10px 5px 5px;
  border:1px solid var(--line-medium);
  border-radius:9px;
  background:var(--panel);
  font-size:13px;
  font-weight:500;
  color:var(--paper)
}
.chat-file i {
  padding:2px 5px;
  border-radius:5px;
  background:var(--badge,#6b7280);
  color:#fff;
  font:700 9px var(--body);
  font-style:normal;
  letter-spacing:.03em
}
.chat-file-xlsx { --badge:#1d6f42 } .chat-file-docx { --badge:#2b579a } .chat-file-pdf { --badge:#d93025 }
.chat-file-dwg { --badge:#0696d7 } .chat-file-eml { --badge:#0078d4 } .chat-file-png { --badge:#7b4fd6 }
.chat-file-jpg { --badge:#e8711a } .chat-file-gif { --badge:#d63384 }
/* Decision cards */
.chat-card {
  border:1px solid var(--line-medium);
  border-radius:16px;
  background:var(--panel);
  overflow:hidden
}
.chat-decide fieldset {
  display:grid;
  gap:10px;
  margin:0;
  padding:14px 16px;
  border:0;
  border-bottom:1px solid var(--line)
}
.chat-decide legend {
  float:left;
  width:100%;
  padding:0;
  font-weight:600;
  font-size:14.5px;
  color:var(--paper)
}
.chat-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.chat-options label {
  cursor:pointer
}
.chat-options input,.chat-tool input {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.chat-options span {
  display:grid;
  gap:2px;
  padding:10px 12px;
  border:1px solid var(--line-medium);
  border-radius:11px;
  font-size:14.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--paper);
  transition:border-color .15s,background .15s
}
.chat-options small {
  font-size:12px;
  font-weight:500;
  color:var(--subtle)
}
.chat-options label:hover span {
  border-color:var(--line-strong)
}
.chat-options input:checked+span {
  border-color:#d4c400;
  background:#fffbd1;
  box-shadow:inset 0 0 0 1px #d4c400
}
.chat-options input:focus-visible+span {
  outline:2px solid var(--focus);
  outline-offset:2px
}
.chat-decide.is-locked {
  opacity:.75
}
.chat-card-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:var(--wash)
}
.chat-card-foot span {
  font-size:13px;
  color:var(--subtle)
}
.chat-primary,.chat-secondary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 16px;
  border-radius:10px;
  font:600 14px var(--body);
  cursor:pointer;
  transition:filter .15s,opacity .15s
}
.chat-primary {
  border:0;
  background:#060607;
  color:#fff
}
.chat-primary:hover {
  filter:brightness(1.3)
}
.chat-secondary {
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--paper)
}
.chat-primary:disabled,.chat-secondary:disabled {
  opacity:.35;
  cursor:not-allowed;
  filter:none
}
/* Tool picker */
.chat-tools {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px
}
.chat-tool {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line-medium);
  border-radius:12px;
  background:var(--panel);
  cursor:pointer;
  transition:border-color .15s,background .15s
}
.chat-tool img {
  width:36px;
  height:36px;
  border-radius:8px
}
.chat-tool span {
  display:grid;
  line-height:1.25
}
.chat-tool strong {
  font-size:14px
}
.chat-tool small {
  font-size:12px;
  color:var(--subtle)
}
.chat-tool:has(input:checked) {
  border-color:#d4c400;
  background:#fffbd1;
  box-shadow:inset 0 0 0 1px #d4c400
}
.chat-tool:has(input:disabled):not(:has(input:checked)) {
  opacity:.45
}
.chat-tool.is-off {
  opacity:.45;
  cursor:not-allowed
}
.chat-tool.is-off i {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1.5px dashed var(--line-strong);
  border-radius:8px
}
.chat-tool.is-off i .icon {
  width:16px;
  height:16px
}
.chat-progress p {
  margin:8px 0 0;
  font-size:14px;
  color:var(--muted)
}
.chat-progress.is-done p {
  color:var(--paper);
  font-weight:600
}
.chat-bar {
  height:5px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden
}
.chat-bar i {
  display:block;
  width:0;
  height:100%;
  background:#060607
}
.chat-progress.is-running .chat-bar i {
  width:100%;
  transition:width 2.3s cubic-bezier(.4,0,.2,1)
}
/* The drawing inside the conversation */
.chat-body .approve-sheet {
  position:relative;
  height:430px;
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:1fr auto;
  column-gap:14px
}
/* Dock: review roll-up above the composer */
.chat-dock {
  padding:0 max(24px,calc(50% - 400px)) 12px;
  background:linear-gradient(transparent,var(--panel) 18px)
}
.chat-rollup {
  margin-bottom:-14px;
  padding:14px 14px 26px;
  border:1px solid var(--line-medium);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:var(--surface);
  box-shadow:0 -8px 24px #0000000d;
  animation:chat-roll .35s ease both
}
@keyframes chat-roll {
  from { transform:translateY(16px); opacity:0 }
  to { transform:none; opacity:1 }
}
.chat-rollup[hidden] {
  display:none
}
.chat-rollup-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
  font-size:14px
}
.chat-rollup-head span {
  font-size:13px;
  color:var(--subtle)
}
.chat-rollup ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
  max-height:190px;
  overflow-y:auto
}
.chat-rollup li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px 8px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  font-size:14px;
  transition:border-color .15s,background .15s
}
.chat-rollup li.is-accept {
  border-color:#8fd19e;
  background:#f1fbf3
}
.chat-rollup li.is-resolve {
  border-color:#f5b971;
  background:#fff7ec
}
.chat-row-text {
  flex:1;
  min-width:0
}
.chat-row-text em {
  margin-left:6px;
  padding:1px 6px;
  border-radius:5px;
  background:var(--line);
  font-size:11.5px;
  font-style:normal;
  color:var(--subtle)
}
.chat-row-actions {
  display:flex;
  gap:4px
}
.chat-row-actions button {
  height:30px;
  padding:0 12px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--panel);
  color:var(--paper);
  font:600 13px var(--body);
  cursor:pointer
}
.chat-row-actions [data-decide="accept"][aria-pressed="true"] {
  border-color:#2f9e44;
  background:#2f9e44;
  color:#fff
}
.chat-row-actions [data-decide="resolve"][aria-pressed="true"] {
  border-color:#e8711a;
  background:#e8711a;
  color:#fff
}
.chat-rollup-foot {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px
}
.chat-composer {
  position:relative;
  display:grid;
  gap:8px;
  padding:10px 10px 10px 14px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:var(--panel);
  box-shadow:0 4px 18px #0000000f
}
.chat-attachments[hidden] {
  display:none
}
.chat-input-row {
  display:flex;
  align-items:flex-end;
  gap:10px
}
.chat-composer textarea {
  flex:1;
  min-height:24px;
  max-height:120px;
  padding:6px 0;
  border:0;
  outline:none;
  resize:none;
  background:none;
  color:var(--paper);
  font:15px/1.5 var(--body)
}
.chat-send {
  display:grid;
  place-items:center;
  flex:none;
  width:36px;
  height:36px;
  border:0;
  border-radius:11px;
  background:#060607;
  color:#ffff00;
  cursor:pointer
}
.chat-send svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.chat-send:disabled {
  opacity:.3;
  cursor:not-allowed
}
.chat-foot {
  margin:7px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--subtle)
}
.flow-icons button:disabled {
  opacity:.35;
  cursor:not-allowed
}
@media(max-width:900px) {
  .chat-options,.chat-tools {
    grid-template-columns:1fr
  }
  .chat-body .approve-sheet {
    height:auto;
    grid-template-columns:1fr
  }
  .chat-rollup li {
    flex-wrap:wrap
  }
}
/* ===== Drafting sheets: dark paper, white linework, nothing crosses the border ===== */
.dwg-space {
  background-color:#11161c
}
.dwg-sheet {
  background:#1e252d;
  box-shadow:0 0 0 1px #000,6px 8px 0 #00000080
}
.dwg-frame {
  stroke:#e9edf2
}
.dwg-frame text {
  fill:#e9edf2
}
.dwg-title .dwg-small {
  fill:#9aa6b4
}
.dwg-content {
  color:#e9edf2;
  overflow:hidden
}
.dwg-ink {
  background:#eef2f6
}
.dwg-table,.deliver-panel .dwg-table {
  table-layout:fixed;
  border-color:#e9edf2;
  color:#e9edf2;
  font-size:10px
}
.dwg-table caption {
  border-color:#e9edf2
}
.dwg-table td,.deliver-panel .dwg-table td {
  border-top-color:#4a5562;
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.dwg-table td:first-child {
  width:16%
}
.dwg-side {
  min-width:0;
  overflow:hidden;
  gap:9px
}
.dwg-area-full .sheet,.dwg-area-full .sheet-line {
  color:#e9edf2
}
.dwg-area-full .sheet-dim {
  fill:#aab4c0;
  stroke:#aab4c0
}
.dwg-area-full .sheet-line rect,.dwg-area-full .iso-top {
  fill:#1e252d
}
.dwg-area-full .iso-side {
  fill:#3a4552
}
.dwg-area-full .iso-front {
  fill:#2b333d
}
.dwg-area-full .sheet-hatch {
  fill:#4a5562
}
.dwg-area-full .sheet-table {
  stroke:#e9edf2
}
.dwg-orient {
  margin:0;
  border:1.4px solid #e9edf2
}
.dwg-orient svg {
  display:block;
  width:100%;
  height:150px;
  font:9px "DMX CAD",monospace
}
.dwg-orient figcaption {
  padding:3px 7px;
  border-top:1px solid #4a5562;
  font:600 10px "DMX CAD",monospace;
  color:#e9edf2
}
.o-axis path {
  stroke:#7f8b99;
  stroke-width:.6;
  stroke-dasharray:8 3 2 3
}
.o-shell {
  fill:none;
  stroke:#e9edf2;
  stroke-width:1.6
}
.o-thin {
  stroke-width:.6
}
.o-lug path {
  fill:#2b333d;
  stroke:#e9edf2;
  stroke-width:1
}
.o-noz path,.o-noz circle {
  fill:none;
  stroke:#e9edf2;
  stroke-width:1.4
}
.o-noz text,.o-ang text {
  fill:#e9edf2;
  stroke:none
}
.o-ang text {
  fill:#9aa6b4
}

/* Tighter space around Where we start */
.stack-section {
  padding-block:clamp(20px,2.5vw,36px)
}
.start-section {
  padding-block:clamp(18px,2vw,28px) 4px
}

/* Pricing: one card per SuperAgent */
.pricing-two {
  grid-template-columns:1fr 1fr!important;
  gap:20px
}
.pricing-two .hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px
}
.pricing-note {
  text-align:center
}
.pricing-note p {
  margin:14px auto 0
}
@media(max-width:900px) {
  .pricing-two {
    grid-template-columns:1fr!important
  }
}
/* Labels read as plain sentence-case text, not tracked capitals */
.eyebrow,.small-label,.start-kicker,.nav-menu p,.uc-group h2,.hx-label,.deliver-note {
  text-transform:none!important;
  letter-spacing:0!important;
  font-family:var(--body)
}
.eyebrow {
  font-size:15px;
  font-weight:600;
  color:var(--paper)
}
.small-label {
  font-size:14px;
  font-weight:600;
  color:var(--muted)
}
.plan-card>.small-label {
  font-size:15px;
  color:var(--paper)
}

/* PV hero intro */
.intro-sheet {
  position:absolute;
  z-index:2;
  top:8%;
  right:3%;
  width:min(44%,300px);
  padding:16px 16px 12px;
  border:1px solid var(--line-medium);
  border-radius:14px;
  background:var(--panel);
  box-shadow:0 18px 40px #0000001f;
  overflow:hidden;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease,transform .6s ease
}
.vessel-figure.is-scan .intro-sheet {
  opacity:1;
  transform:none
}
.vessel-figure.is-settle .intro-sheet,.vessel-figure[data-intro-done] .intro-sheet {
  opacity:0;
  transform:translateX(16px)
}
.intro-title {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--paper)
}
.intro-sheet dl {
  display:grid;
  margin:0
}
.intro-sheet dl>div {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:7px 8px;
  border-top:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
  transition:background .3s
}
.intro-sheet dt {
  color:var(--muted)
}
.intro-sheet dd {
  margin:0;
  font-weight:600;
  color:var(--paper);
  text-align:right;
  font-variant-numeric:tabular-nums
}
/* The laser sweeps down and back up; each row lights as it is read */
.intro-laser {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:#ff2d2d;
  box-shadow:0 0 12px 3px #ff2d2d88,0 0 30px 8px #ff2d2d33;
  opacity:0
}
.vessel-figure.is-scan .intro-laser {
  animation:intro-laser 2.4s ease-in-out .3s both
}
@keyframes intro-laser {
  0% { top:0; opacity:0 }
  8% { opacity:1 }
  50% { top:calc(100% - 2px) }
  92% { opacity:1 }
  100% { top:0; opacity:0 }
}
.vessel-figure.is-scan .intro-sheet dl>div {
  animation:intro-read .5s ease forwards;
  animation-delay:calc(.45s + var(--row) * .17s)
}
.intro-sheet dl>div:nth-child(1) { --row:0 } .intro-sheet dl>div:nth-child(2) { --row:1 } .intro-sheet dl>div:nth-child(3) { --row:2 }
.intro-sheet dl>div:nth-child(4) { --row:3 } .intro-sheet dl>div:nth-child(5) { --row:4 } .intro-sheet dl>div:nth-child(6) { --row:5 }
.intro-sheet dl>div:nth-child(7) { --row:6 }
@keyframes intro-read {
  to { background:#fff6a3 }
}
.intro-sheet dl>div:not([data-target]) {
  animation-name:none!important
}
/* Leader lines from each value to its place on the drawing */
.intro-links {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease
}
.vessel-figure.is-link .intro-links {
  opacity:1
}
.vessel-figure.is-settle .intro-links {
  opacity:0
}
.intro-links path {
  fill:none;
  stroke:#d4a900;
  stroke-width:1.5;
  stroke-dasharray:900;
  stroke-dashoffset:900
}
.intro-links circle {
  fill:#ffff00;
  stroke:#060607;
  stroke-width:1.5;
  opacity:0
}
.vessel-figure.is-link .intro-links path {
  animation:intro-draw 1s ease forwards;
  animation-delay:calc(var(--i) * .22s)
}
.vessel-figure.is-link .intro-links circle {
  animation:intro-dot .3s ease forwards;
  animation-delay:calc(.8s + var(--i) * .22s)
}
@keyframes intro-draw { to { stroke-dashoffset:0 } }
@keyframes intro-dot { to { opacity:1 } }
/* While the intro runs, the drawing is shown full strength; it settles behind once the model takes over */
.vessel-figure[data-intro] .vessel-blueprint {
  opacity:0;
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.4,0,.2,1)
}
.vessel-figure[data-intro].is-scan .vessel-blueprint {
  opacity:.2
}
.vessel-figure[data-intro].is-link .vessel-blueprint {
  opacity:.75;
  transform:translateX(-14%)
}
.vessel-figure[data-intro].is-settle .vessel-blueprint {
  opacity:.4;
  transform:translate(-22%,-4%) scale(.86)
}
.vessel-figure[data-intro] .vessel-canvas {
  transition:opacity 1.2s ease
}
@media(prefers-reduced-motion:reduce) {
  .intro-sheet,.intro-links {
    display:none
  }
}

/* Real drawing sheets fill the sheet; our title block sits in the corner they leave clear */
.dwg-content-raw {
  inset:6px 8px;
  left:6px;
  top:6px;
  right:6px;
  bottom:6px
}
.dwg-content-raw .dwg-ink {
  position:absolute;
  inset:0
}
.dwg-ink-ga-sheet { -webkit-mask-image:url(/images/vessels/vertical-ga-sheet.png); mask-image:url(/images/vessels/vertical-ga-sheet.png) }
.dwg-ink-details { -webkit-mask-image:url(/images/vessels/agitated-details.png); mask-image:url(/images/vessels/agitated-details.png) }
.dwg-ink-hx-sheet { -webkit-mask-image:url(/images/vessels/e101-ga-sheet.png); mask-image:url(/images/vessels/e101-ga-sheet.png) }
.dwg-content-raw+.dwg-frame,.dwg-sheet>.dwg-frame {
  z-index:1
}
.dwg-sheet .dwg-title rect {
  fill:#1e252d
}

.chat-avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  background:#060607
}
.chat-avatar img {
  width:15px;
  height:auto
}

/* The drawing in the review: the real sheet on cream paper with a drafted title strip */
.chat-body .review-sheet {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  height:auto;
  padding:10px;
  gap:0;
  font-family:"DMX CAD",monospace;
  color:#1d1d22
}
.review-paper {
  position:relative;
  aspect-ratio:2000/1388;
  overflow:hidden
}
.review-ink {
  position:absolute;
  inset:0;
  background:#1d1d22;
  -webkit-mask:url(/images/vessels/vertical-ga-sheet.png) center/100% 100% no-repeat;
  mask:url(/images/vessels/vertical-ga-sheet.png) center/100% 100% no-repeat
}
.review-ink-hx {
  -webkit-mask-image:url(/images/vessels/e101-ga-sheet.png);
  mask-image:url(/images/vessels/e101-ga-sheet.png)
}
.review-sheet .approve-stamp {
  top:auto;
  right:auto;
  left:8%;
  bottom:12%;
  font-family:var(--head)
}
.review-strip {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  border:1.6px solid #1d1d22;
  border-top-width:2px
}
.review-title {
  display:grid;
  align-content:start;
  gap:2px;
  padding:7px 10px;
  border-right:1.6px solid #1d1d22;
  font-size:12px;
  letter-spacing:.03em
}
.review-title b {
  font-size:14px;
  letter-spacing:.08em
}
.review-title dl {
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:space-between;
  gap:2px 10px;
  margin:6px 0 0;
  padding-top:5px;
  border-top:.8px solid #1d1d22
}
.review-title dt {
  font-size:8.5px;
  color:#5b5f68
}
.review-title dd {
  margin:0;
  font-size:11.5px
}
.review-revs {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-size:11.5px;
  letter-spacing:.02em
}
.review-revs th,.review-revs td {
  height:26px;
  padding:0 5px;
  border-left:.8px solid #1d1d22;
  border-bottom:.8px solid #1d1d22;
  text-align:center;
  white-space:nowrap;
  overflow:hidden
}
.review-revs th:first-child,.review-revs td:first-child {
  border-left:0
}
.review-revs th {
  font-size:9.5px;
  font-weight:400;
  color:#5b5f68
}
.review-revs th:nth-child(1) { width:38px } .review-revs th:nth-child(2) { width:66px }
.review-revs th:nth-child(4) { width:40px } .review-revs th:nth-child(n+5) { width:52px }
.review-revs td:nth-child(3),.review-revs th:nth-child(3) {
  text-align:left
}
.review-revs tbody tr:last-child td {
  border-bottom:0
}
.review-final {
  background:#fff36b55
}
.review-ai {
  color:#6b6b00
}
.review-revs .approve-sig {
  width:40px;
  height:17px
}
@media(max-width:900px) {
  .review-strip {
    grid-template-columns:1fr
  }
  .review-title {
    border-right:0;
    border-bottom:1.6px solid #1d1d22
  }
}

.flow-track[data-product="pv"] .review-ink-hx,.flow-track[data-product="hx"] .review-ink-pv {
  display:none
}
/* The dossier hand-off is a card you open */
.chat-dossier {
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin-top:12px;
  padding:14px 14px 14px 14px;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:var(--panel);
  color:var(--paper);
  text-align:left;
  font-family:var(--body);
  cursor:pointer;
  box-shadow:0 6px 20px #00000012;
  transition:transform .15s,box-shadow .15s,border-color .15s
}
.chat-dossier:hover {
  transform:translateY(-2px);
  border-color:#d4c400;
  box-shadow:0 10px 26px #0000001c
}
.chat-dossier-icon {
  display:grid;
  place-items:center;
  flex:none;
  width:46px;
  height:46px;
  border-radius:12px;
  background:var(--yellow)
}
.chat-dossier-icon svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:#060607;
  stroke-width:1.8;
  stroke-linejoin:round
}
.chat-dossier-text {
  display:grid;
  gap:3px;
  flex:1;
  min-width:0
}
.chat-dossier-text strong {
  font-size:15px
}
.chat-dossier-text small {
  font-size:12.5px;
  color:var(--subtle);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.chat-dossier-go {
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  height:38px;
  padding:0 16px;
  border-radius:10px;
  background:#060607;
  color:#fff;
  font-weight:600;
  font-size:14px
}
.chat-dossier-go svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}
/* CAD viewport: a right-handed axis triad */
svg.cad-axes {
  display:block;
  width:62px;
  height:62px;
  left:10px;
  bottom:8px
}
.chat-avatar img {
  width:21px
}

/* Intro, second half: the drawing is scanned, then stays behind while the model is built */
.vessel-figure[data-intro].is-settle .vessel-blueprint,.vessel-figure[data-intro].is-gadscan .vessel-blueprint {
  opacity:.85;
  transform:none
}
.intro-gad-laser {
  position:absolute;
  z-index:2;
  left:12%;
  right:12%;
  top:4%;
  height:2px;
  background:#ff2d2d;
  box-shadow:0 0 12px 3px #ff2d2d88,0 0 34px 10px #ff2d2d2e;
  opacity:0;
  pointer-events:none
}
.vessel-figure.is-gadscan .intro-gad-laser {
  animation:intro-gad 1.9s ease-in-out both
}
@keyframes intro-gad {
  0% { top:4%; opacity:0 }
  8% { opacity:1 }
  50% { top:86% }
  92% { opacity:1 }
  100% { top:4%; opacity:0 }
}
.vessel-figure[data-intro].is-ready .vessel-blueprint {
  opacity:.22;
  transform:translate(-22%,-4%) scale(.86)
}
.vessel-figure[data-intro].is-ready .vessel-canvas {
  opacity:1
}

/* Drawing sheets are transparent over model space; the grid sits under the linework, thinner and fainter */
.dwg-space {
  background-color:#161b21;
  background-image:linear-gradient(#ffffff17 1px,transparent 1px),linear-gradient(90deg,#ffffff17 1px,transparent 1px),linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);
  background-size:var(--major,100px) var(--major,100px),var(--major,100px) var(--major,100px),var(--minor,20px) var(--minor,20px),var(--minor,20px) var(--minor,20px);
  background-position:var(--gx,0) var(--gy,0)
}
.dwg-sheet {
  background:transparent;
  box-shadow:none
}
.dwg-sheet .dwg-title rect {
  fill:#161b21cc
}
.dwg-frame {
  stroke-width:1.6
}

/* Intro lasers: brand yellow, glowing, down and back up at 80 % speed */
.intro-laser,.intro-gad-laser {
  height:3px;
  background:#ffff00;
  box-shadow:0 0 6px 2px #ffff00,0 0 18px 6px #ffff00aa,0 0 42px 14px #ffe60055
}
.vessel-figure.is-scan .intro-laser {
  animation:intro-laser 3s ease-in-out .3s both
}
.vessel-figure.is-gadscan .intro-gad-laser {
  animation:intro-gad 2.4s ease-in-out both
}
.vessel-figure.is-scan .intro-sheet dl>div {
  animation-delay:calc(.56s + var(--row) * .21s)
}

/* Cost estimation: a stacked total and a priced breakdown */
.uc-cost-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px
}
.uc-cost-head span {
  color:var(--muted);
  font-size:14px
}
.uc-cost-head strong {
  font-family:var(--head);
  font-size:30px;
  letter-spacing:-.02em
}
.uc-coststack {
  display:flex;
  height:14px;
  margin-bottom:16px;
  border-radius:7px;
  overflow:hidden;
  background:var(--line)
}
.uc-coststack i {
  height:100%;
  transform-origin:left;
  animation:uc-stack 9s ease-out infinite both
}
@keyframes uc-stack {
  0% { transform:scaleX(0) }
  10%,88% { transform:scaleX(1) }
  100% { transform:scaleX(0) }
}
.uc-cost-rows {
  gap:9px
}
.uc-cost-rows>div {
  grid-template-columns:200px 1fr 84px;
  font-size:13.5px
}
.uc-cost-rows span {
  display:grid;
  line-height:1.25
}
.uc-cost-rows small {
  font-size:12px;
  color:var(--subtle)
}
.uc-cost-rows>div>i::after {
  background:var(--c)
}
.uc-coststack i:nth-child(1) { flex:0 0 17.7%; background:#1d2530; animation-delay:0.00s }
.uc-cost-rows>div:nth-child(1)>i { --w:49%; --c:#1d2530 }
.uc-coststack i:nth-child(2) { flex:0 0 10.3%; background:#3b5bdb; animation-delay:0.08s }
.uc-cost-rows>div:nth-child(2)>i { --w:28%; --c:#3b5bdb }
.uc-coststack i:nth-child(3) { flex:0 0 2.5%; background:#7b8794; animation-delay:0.16s }
.uc-cost-rows>div:nth-child(3)>i { --w:7%; --c:#7b8794 }
.uc-coststack i:nth-child(4) { flex:0 0 36.3%; background:#e6c200; animation-delay:0.24s }
.uc-cost-rows>div:nth-child(4)>i { --w:100%; --c:#e6c200 }
.uc-coststack i:nth-child(5) { flex:0 0 8.4%; background:#2f9e44; animation-delay:0.32s }
.uc-cost-rows>div:nth-child(5)>i { --w:23%; --c:#2f9e44 }
.uc-coststack i:nth-child(6) { flex:0 0 4.0%; background:#e8711a; animation-delay:0.40s }
.uc-cost-rows>div:nth-child(6)>i { --w:11%; --c:#e8711a }
.uc-coststack i:nth-child(7) { flex:0 0 7.8%; background:#7b4fd6; animation-delay:0.48s }
.uc-cost-rows>div:nth-child(7)>i { --w:21%; --c:#7b4fd6 }
.uc-coststack i:nth-child(8) { flex:0 0 13.0%; background:#b5b9c2; animation-delay:0.56s }
.uc-cost-rows>div:nth-child(8)>i { --w:36%; --c:#b5b9c2 }

/* Drawing sheet: real drawing, our border and zones, drafted title block */
.dsheet {
  position:absolute;
  inset:0;
  color:#e9edf2
}
.dsheet-ink {
  position:absolute;
  left:2.6%;
  top:3.68%;
  width:94.8%;
  height:92.65%;
  background:currentColor;
  -webkit-mask:center/100% 100% no-repeat;
  mask:center/100% 100% no-repeat
}
.dsheet-ink-vertical { -webkit-mask-image:url(/images/vessels/vertical-ga-sheet.png); mask-image:url(/images/vessels/vertical-ga-sheet.png) }
.dsheet-ink-details { -webkit-mask-image:url(/images/vessels/agitated-details.png); mask-image:url(/images/vessels/agitated-details.png) }
.dsheet-ink-e101 { -webkit-mask-image:url(/images/vessels/e101-ga-sheet.png); mask-image:url(/images/vessels/e101-ga-sheet.png) }
.dsheet-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  font:9px "DMX CAD",monospace
}
.dsheet-frame .ds-inner {
  stroke-width:2
}
.dsheet-frame text {
  fill:currentColor;
  stroke:none;
  text-anchor:middle
}
.tblock path,.tblock .tb-edge {
  stroke:currentColor;
  stroke-width:.9;
  fill:none
}
.tblock .tb-edge {
  stroke-width:2
}
.tblock .tb-bg {
  fill:var(--sheet-paper,#161b21);
  stroke:none
}
.tblock .tb-final {
  fill:#ffff0026;
  stroke:none
}
.tblock text {
  text-anchor:start;
  font-size:9.5px;
  letter-spacing:.02em
}
.tblock .tb-small {
  font-size:6.6px;
  opacity:.75
}
.tblock .tb-title {
  font-size:13px;
  letter-spacing:.04em
}
.tblock .tb-value {
  font-size:11px
}
.tblock .tb-ai {
  fill:#e6d800
}
.tblock .tb-mark {
  fill:currentColor;
  stroke:none
}
.tblock .tb-mark-text {
  fill:var(--sheet-paper,#161b21);
  font-size:11px;
  font-weight:700
}
.tblock .approve-sig path {
  stroke:#7aa2ff;
  stroke-width:3.6
}
.dwg-sheet .approve-sig path {
  stroke-dashoffset:0
}
/* The same sheet on paper in the chat review */
.chat-body .review-sheet {
  display:block;
  height:auto;
  padding:0
}
.review-sheet-pv,.review-sheet-hx {
  position:relative;
  aspect-ratio:1000/707;
  --sheet-paper:#f6f5ef
}
.review-sheet .dsheet {
  color:#1d1d22
}
.review-sheet .tblock .tb-ai {
  fill:#6b6b00
}
.review-sheet .tblock .approve-sig path {
  stroke:#1b3fa0
}
.flow-track[data-product="pv"] .review-sheet-hx,.flow-track[data-product="hx"] .review-sheet-pv {
  display:none
}
.review-sheet .approve-stamp {
  left:6%;
  bottom:22%
}

/* Use-case windows: the same chrome as the dossier viewers */
.uc-split-doc {
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch
}
.ucw {
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:0;
  border:1px solid #cfd3d9;
  border-radius:10px;
  overflow:hidden;
  background:#e4e6ea;
  box-shadow:0 8px 22px #00000014
}
.ucw-bar {
  display:flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 10px;
  border-bottom:1px solid #d3d6dc;
  background:#f7f8fa;
  color:#3a3d44;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden
}
.ucw-bar span {
  overflow:hidden;
  text-overflow:ellipsis
}
.doc-badge-docx { background:#2b579a }
.ucw-body {
  position:relative;
  min-height:0;
  overflow:hidden;
  padding:12px
}
.ucw-page {
  display:block;
  width:100%;
  height:auto;
  background:#fff;
  box-shadow:0 1px 3px #0000001f,0 6px 16px #00000024
}
.ucw-pdf .ucw-body,.ucw-docx .ucw-body {
  max-height:360px
}
/* Yellow scanning laser over a document */
.uc-laser {
  position:absolute;
  left:6px;
  right:6px;
  top:12px;
  height:3px;
  background:#ffff00;
  box-shadow:0 0 6px 2px #ffff00,0 0 18px 6px #ffff00aa,0 0 36px 12px #ffe60044;
  animation:uc-laser 4.5s ease-in-out infinite
}
@keyframes uc-laser {
  0%,100% { top:12px }
  50% { top:calc(100% - 14px) }
}
.uc-fields strong {
  white-space:normal;
  text-align:right
}
/* Highlights stepping down a calculation page */
.uc-mark {
  position:absolute;
  left:9%;
  width:82%;
  border:2px solid #e6c200;
  background:#ffff0026;
  border-radius:3px;
  opacity:0;
  animation:uc-markin 9s infinite both
}
.uc-mark-1 { top:13%; height:17%; animation-delay:.4s }
.uc-mark-2 { top:37%; height:13%; animation-delay:1.6s }
.uc-mark-3 { top:57%; height:16%; animation-delay:2.8s }
@keyframes uc-markin {
  0% { opacity:0; transform:scale(.97) }
  5%,85% { opacity:1; transform:none }
  95%,100% { opacity:0 }
}
/* Drawing on paper */
.uc-paper {
  position:relative;
  aspect-ratio:1000/707;
  background:#f6f5ef;
  box-shadow:0 1px 3px #0000001f,0 6px 16px #00000024;
  --sheet-paper:#f6f5ef
}
.uc-paper .dsheet {
  color:#1d1d22
}
.uc-paper .tblock .approve-sig path {
  stroke:#1b3fa0;
  stroke-dashoffset:0
}
.uc-paper .tblock .tb-ai {
  fill:#6b6b00
}
.ucw-dwg .ucw-body {
  display:grid;
  align-content:center;
  background:#dfe2e7
}
.uc-pin2 {
  position:absolute;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#ff8a00;
  color:#fff;
  font-size:11px;
  font-weight:700;
  box-shadow:0 0 0 5px #ff8a0040;
  transform:translate(-50%,-50%) scale(0);
  animation:uc-pin2 9s infinite both
}
.uc-pin2-1 { left:84%; top:10%; animation-delay:.5s }
.uc-pin2-2 { left:66%; top:27%; animation-delay:1.1s }
.uc-pin2-3 { left:86%; top:44%; animation-delay:1.7s }
@keyframes uc-pin2 {
  0% { transform:translate(-50%,-50%) scale(0) }
  5%,85% { transform:translate(-50%,-50%) scale(1) }
  95%,100% { transform:translate(-50%,-50%) scale(0) }
}
.uc-comments span em {
  background:#ff8a00;
  color:#fff
}
/* Vessel model in software */
.ucw-cad {
  background:#eef1f5
}
.ucw-status {
  margin-left:auto;
  color:#2f9e44;
  font-weight:600
}
.ucw-cadbody {
  display:grid;
  grid-template-columns:200px 1fr;
  min-height:330px
}
.uc-tree2 {
  list-style:none;
  margin:0;
  padding:10px;
  display:grid;
  align-content:start;
  gap:4px;
  border-right:1px solid #cfd5dd;
  background:#f7f8fa;
  font-size:12.5px;
  color:#24272d
}
.uc-tree2 li {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 6px;
  border-radius:5px
}
.uc-tree2 li::before {
  content:"✓";
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#2f9e44;
  color:#fff;
  font-size:9px
}
.uc-tree2 li:last-child {
  background:#e6f6ea;
  font-weight:600
}
.uc-cadview {
  position:relative;
  background:linear-gradient(180deg,#b9c8da,#eef2f6 70%,#fbfcfd)
}
/* Document pages (proposal, WPS, procedure) */
.uc-docpage {
  padding:18px 20px;
  background:#fff;
  color:#1d1d22;
  box-shadow:0 1px 3px #0000001f,0 6px 16px #00000024;
  font-size:12.5px;
  line-height:1.5
}
.uc-docpage header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:8px;
  margin-bottom:10px;
  border-bottom:2px solid #1d1d22;
  font-size:10.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#55585f
}
.uc-yourlogo {
  padding:4px 10px;
  border:1.5px dashed #9aa3ae;
  border-radius:4px;
  color:#7a818c;
  text-transform:none;
  letter-spacing:0
}
.uc-docpage h4 {
  margin:0 0 8px;
  font-size:15px
}
.uc-docpage h5 {
  margin:0;
  font-size:12.5px
}
.uc-docpage p {
  margin:0 0 8px;
  color:#3d434d
}
.uc-docpage>div {
  margin-bottom:6px
}
.uc-form dl {
  display:grid;
  margin:0;
  border:1px solid #1d1d22
}
.uc-form dl>div {
  display:grid;
  grid-template-columns:42% 1fr;
  border-bottom:.6px solid #c8ccd2
}
.uc-form dl>div:last-child {
  border-bottom:0
}
.uc-form dt {
  padding:4px 8px;
  background:#f4f5f7;
  color:#55585f;
  font-size:11.5px
}
.uc-form dd {
  margin:0;
  padding:4px 8px;
  font-weight:600;
  font-size:12px
}
.uc-matched {
  display:inline-block;
  margin-top:10px;
  padding:4px 10px;
  border:2px solid #2f9e44;
  border-radius:4px;
  color:#2f9e44;
  font-weight:700;
  font-size:11px;
  transform:rotate(-2deg)
}
.uc-mtr-head {
  margin:0 0 4px;
  font-weight:600;
  font-size:14px
}
/* Dossier deck */
.uc-deck {
  position:relative;
  min-height:330px
}
.uc-card2 {
  position:absolute;
  top:6%;
  left:8%;
  width:52%;
  margin:0;
  animation:uc-deal 9s infinite both;
  transform-origin:bottom left
}
.uc-card2 img,.uc-card2 .uc-paper {
  display:block;
  width:100%;
  box-shadow:0 1px 3px #0000001f,0 8px 18px #00000026
}
.uc-card2 figcaption {
  position:absolute;
  left:6px;
  bottom:6px;
  padding:2px 7px;
  border-radius:4px;
  background:#060607;
  color:#fff;
  font-size:10.5px;
  font-weight:600
}
.uc-card2:nth-child(1) { --r:-9deg; --x:0%; animation-delay:0s }
.uc-card2:nth-child(2) { --r:-3deg; --x:14%; animation-delay:.35s }
.uc-card2:nth-child(3) { --r:2deg; --x:30%; width:66%; top:30%; animation-delay:.7s }
.uc-card2:nth-child(4) { --r:7deg; --x:44%; animation-delay:1.05s }
@keyframes uc-deal {
  0% { opacity:0; transform:translate(120%,-10%) rotate(20deg) }
  8%,84% { opacity:1; transform:translateX(var(--x)) rotate(var(--r)) }
  94%,100% { opacity:0; transform:translateX(var(--x)) rotate(var(--r)) }
}
.uc-binder {
  position:absolute;
  left:4%;
  right:4%;
  bottom:0;
  display:grid;
  gap:2px;
  padding:10px 14px;
  border-radius:10px;
  background:#060607;
  color:#fff;
  box-shadow:0 10px 24px #0000002e;
  animation:uc-in 9s 1.6s infinite both
}
.uc-binder b {
  color:#ffff00
}
.uc-binder span {
  font-size:12px;
  opacity:.8
}
@media(max-width:900px) {
  .uc-split-doc {
    grid-template-columns:1fr
  }
  .ucw-cadbody {
    grid-template-columns:1fr
  }
  .uc-tree2 {
    display:none
  }
}