:root {
  --ink: #1f2f46;
  --muted: #8090a7;
  --line: #d8e4f4;
  --panel: #ffffff;
  --page: #eef6ff;
  --nav: #15306f;
  --nav-strong: #0f2458;
  --blue: #2f6df6;
  --blue-dark: #1e50d8;
  --blue-soft: #e7f0ff;
  --green: #0f766e;
  --orange: #d97706;
  --shadow: 0 14px 36px rgba(37, 70, 120, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html.marketing-loading .marketing-site {
  visibility: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

a,
button {
  color: inherit;
}

a {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

i,
svg {
  width: 18px;
  height: 18px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 80px;
  padding: 0 48px;
  color: #fff;
  background: linear-gradient(90deg, #214bc2, #2f72f5);
  box-shadow: 0 10px 28px rgba(27, 71, 170, 0.2);
}

.brand,
.top-nav,
.header-actions,
.header-action,
.contact-chip {
  display: inline-flex;
  align-items: center;
}

.brand {
  gap: 12px;
  min-width: 170px;
  font-size: 22px;
  font-weight: 800;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--blue);
  background: #fff;
  border-radius: 9px;
  font-weight: 900;
}

.top-nav {
  flex: 1;
  gap: 10px;
  min-width: 0;
}

.top-nav a {
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.top-nav a.active,
.top-nav a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.header-actions {
  gap: 10px;
}

.contact-chip,
.header-action {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.header-action {
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.app-shell {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 80px);
}

.side-nav {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
  color: #e9f0ff;
  background: linear-gradient(180deg, var(--nav-strong), #214bb6);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.side-title {
  padding: 26px 18px 20px;
  font-size: 20px;
  font-weight: 800;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-group {
  display: grid;
  gap: 7px;
  padding: 20px 13px 10px;
}

.nav-group p {
  margin: 0 0 4px 10px;
  color: #aebde1;
  font-size: 14px;
  font-weight: 800;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  color: #eaf1ff;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.nav-item.muted {
  color: #d6e1ff;
}

.work-area {
  padding: 45px 40px 70px;
}

.view-panel {
  display: none;
}

.view-panel.active-view {
  display: block;
}

.order-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1126px;
  margin: 0 auto;
}

.panel-title,
.form-row.wide,
.button-row {
  grid-column: 1 / -1;
}

.panel-title {
  text-align: center;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel-title h1,
.run-header h2,
.guide-card h2 {
  margin: 0;
  letter-spacing: 0;
}

.panel-title h1 {
  font-size: 30px;
  line-height: 1.25;
}

.panel-title p:last-child {
  margin: 10px auto 0;
  max-width: 680px;
  color: #8da0b8;
  font-size: 16px;
}

.form-row {
  display: grid;
  gap: 8px;
}

label {
  color: #283a55;
  font-size: 16px;
  font-weight: 800;
}

.required {
  color: #e23a3a;
}

.hint {
  margin-left: 4px;
  color: #91a3bc;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  color: #1f2f46;
  background: #fff;
  border: 1px solid #cfe0f5;
  border-radius: 8px;
  outline: none;
  box-shadow: 0 3px 10px rgba(42, 80, 130, 0.04);
  transition: border-color .18s ease, box-shadow .18s ease;
}

input,
select {
  min-height: 52px;
  padding: 0 16px;
}

textarea {
  min-height: 154px;
  padding: 16px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #4e83f7;
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: #98a8bc;
}

.counter {
  color: #8da0b8;
  font-size: 14px;
}

.upload-box {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 172px;
  padding: 28px;
  color: #8da0b8;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px dashed #bacbe0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.upload-box:hover {
  background: #fff;
  border-color: var(--blue);
}

.upload-box svg {
  width: 30px;
  height: 30px;
  color: #94a3b8;
}

.upload-box strong {
  color: var(--blue);
}

.upload-box small {
  display: block;
  max-width: 620px;
  line-height: 1.7;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.file-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-top: 18px;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
}

.primary-button {
  color: #fff;
  background: linear-gradient(135deg, #3c78fb, #2559de);
  box-shadow: 0 16px 30px rgba(47, 109, 246, 0.22);
}

.ghost-button {
  color: var(--blue-dark);
  background: #e8f0ff;
  border: 1px solid #c9d9ff;
}

.guide-card,
.personal-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.guide-card,
.personal-section {
  padding: 24px;
}

.guide-card h2,
.personal-section h2 {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
}

.panel-note {
  margin: 10px 0 0;
  color: #8da0b8;
  line-height: 1.7;
}

.guide-steps {
  display: grid;
  gap: 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.guide-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 10px;
  row-gap: 4px;
}

.guide-steps span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 28px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 6px;
  font-weight: 900;
}

.guide-steps strong {
  align-self: center;
  font-size: 16px;
}

.guide-steps p {
  margin: 0;
  color: #8da0b8;
  line-height: 1.7;
}

.personal-page {
  padding: 45px 40px 70px;
}

.personal-heading {
  max-width: 1126px;
  margin: 0 auto 24px;
}

.personal-heading h1 {
  margin: 0;
  font-size: 32px;
}

.personal-heading p:last-child {
  margin: 10px 0 0;
  color: #8da0b8;
  line-height: 1.7;
}

.personal-grid {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  max-width: 1126px;
  margin: 0 auto;
}

.personal-tabs {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.personal-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 12px;
  color: #50627a;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.personal-tab:hover,
.personal-tab.active {
  color: var(--blue-dark);
  background: var(--blue-soft);
}

.personal-content {
  min-width: 0;
}

.personal-section {
  display: none;
}

.personal-section.active-section {
  display: grid;
  gap: 16px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.section-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
}

.section-head p {
  margin: 8px 0 0;
  color: #8da0b8;
  line-height: 1.7;
}

.task-list {
  display: grid;
  gap: 10px;
}

.empty-task,
.empty-mini {
  padding: 14px;
  color: #8b949e;
  background: #f8f9fa;
  border: 1px dashed #d6dbe0;
  border-radius: 8px;
  line-height: 1.7;
}

.task-item {
  display: grid;
  gap: 6px;
  padding: 13px;
  background: #f8f9fa;
  border: 1px solid #e4e7eb;
  border-left: 4px solid #9da6af;
  border-radius: 8px;
}

.task-item.is-done,
.task-item.is-failed,
.task-item.is-paused {
  border-left-color: #9da6af;
}

.task-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.task-item-head strong {
  font-size: 15px;
  line-height: 1.45;
}

.task-item-time {
  flex: 0 0 auto;
  margin-left: auto !important;
  color: #9aa3ad !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.task-item-head span {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #5f6b76;
  background: #eef0f2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.task-item.is-done .task-item-head span,
.task-item.is-failed .task-item-head span,
.task-item.is-paused .task-item-head span {
  color: #5f6b76;
  background: #eef0f2;
}

.task-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-clear-button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e4e7eb;
  border-radius: 999px;
  color: #5f6b76;
  background: #f5f6f7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.task-clear-button:hover {
  color: #3f4851;
  border-color: #d6dbe0;
  background: #eef1f3;
}

.task-item p,
.task-item small {
  margin: 0;
  color: #8b949e;
  line-height: 1.6;
}

.task-item small {
  font-size: 12px;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 2px;
}

.task-pause-button {
  width: auto;
  min-width: 76px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #d6dbe0;
  border-radius: 8px;
  color: #5f6b76;
  background: #f5f6f7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.task-pause-button:hover {
  background: #eef1f3;
}

.task-delete-button {
  width: auto;
  min-width: 76px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #b91c1c;
  background: #fff1f2;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.task-delete-button:hover {
  background: #ffe4e6;
}

.task-delete-button:disabled,
.task-pause-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


.account-card {
  display: grid;
  gap: 14px;
}

.recharge-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.recharge-options button {
  min-height: 48px;
  color: var(--blue-dark);
  background: #f3f7ff;
  border: 1px solid #c9d9ff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.profile-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f8;
}

.profile-line span {
  color: #7f8fa6;
}

.profile-line strong {
  color: #1f2f46;
}

.mini-button {
  justify-self: start;
  min-height: 38px;
  padding: 0 14px;
  color: var(--blue-dark);
  background: #e8f0ff;
  border: 1px solid #c9d9ff;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.primary-mini {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.run-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.run-header h2 {
  font-size: 20px;
}

.status-pill {
  align-self: start;
  padding: 6px 10px;
  color: #5f6b76;
  background: #f0f2f4;
  border: 1px solid #e1e4e7;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.progress-track {
  height: 10px;
  margin: 20px 0;
  background: #eef0f2;
  border-radius: 999px;
  overflow: hidden;
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  background: #7d8791;
  transition: width .28s ease;
}

.step-list {
  counter-reset: step;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.step-list li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  color: #7d8791;
  background: #f8f9fa;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  font-size: 14px;
}

.step-list li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #68737e;
  background: #eef0f2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.step-list li.active {
  color: #4f5963;
  background: #f0f2f4;
  border-color: #cdd3d8;
  font-weight: 900;
}

.step-list li.active::before {
  color: #fff;
  background: #7d8791;
}

.stage-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.stage-header span,
.stage-header strong {
  font-size: 14px;
  font-weight: 900;
}

.stage-header strong {
  color: var(--blue-dark);
}

.stage-card pre {
  max-height: 320px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: #334155;
  background: #fbfdff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 40px;
  color: #71839a;
  background: #fff;
  border-top: 1px solid var(--line);
}

[hidden] {
  display: none !important;
}

@media (max-width: 1160px) {
  .site-header {
    padding: 0 24px;
  }

  .contact-chip {
    display: none;
  }

  .app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .work-area,
  .personal-page {
    padding: 36px 32px 28px;
  }
}

@media (max-width: 1380px) and (min-width: 1161px) {
  .work-area {
    padding-left: 32px;
    padding-right: 32px;
  }

  .order-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .top-nav {
    display: none;
  }

  .site-header {
    min-height: 68px;
  }

  .brand {
    min-width: auto;
  }

  .app-shell {
    display: block;
  }

  .side-nav {
    position: static;
    height: auto;
    display: flex;
    gap: 10px;
    padding: 12px;
    overflow-x: auto;
  }

  .side-title {
    display: none;
  }

  .nav-group {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0;
  }

  .nav-group p {
    display: none;
  }

  .nav-item {
    width: auto;
    min-height: 42px;
    white-space: nowrap;
    font-size: 15px;
  }

  .order-panel {
    grid-template-columns: 1fr;
  }

  .personal-page,
  .work-area {
    padding-left: 20px;
    padding-right: 20px;
  }

  .personal-grid {
    grid-template-columns: 1fr;
  }

  .personal-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-header {
    padding: 0 16px;
  }

  .header-action {
    display: none;
  }

  .brand {
    font-size: 18px;
  }

  .panel-title {
    text-align: left;
  }

  .button-row {
    flex-direction: column;
  }

  .section-head {
    display: grid;
  }

  .personal-tabs,
  .recharge-options {
    grid-template-columns: 1fr;
  }

  .primary-button,
  .ghost-button {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Marketing landing page — keeps the existing project workspace intact behind a guided entry point. */
.marketing-site { --navy:#091b36; --ink:#162743; --blue:#2f63ff; --aqua:#39d8cb; --paper:#f6f8fc; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
.marketing-site * { box-sizing:border-box; }
.marketing-site a { text-decoration:none; }
.marketing-header { position:sticky; top:0; z-index:50; height:76px; padding:0 clamp(24px,5vw,82px); display:flex; align-items:center; justify-content:space-between; gap:30px; color:#122440; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border-bottom:1px solid rgba(20,40,73,.08); }
.marketing-brand { display:flex; align-items:center; gap:9px; color:#172844; font-size:20px; font-weight:800; letter-spacing:-.5px; white-space:nowrap; }.marketing-brand span { display:grid; place-items:center; width:32px; height:32px; color:white; background:#275dff; border-radius:9px; font-weight:900; }.marketing-brand em { color:#2b61ff; font-style:normal; }
.marketing-header nav { display:flex; gap:clamp(16px,2.4vw,38px); margin-left:auto; }.marketing-header nav a,.marketing-login { color:#52617a; font-size:14px; font-weight:700; }.marketing-header nav a:hover { color:#265bff; }.marketing-header>div { display:flex; align-items:center; gap:18px; }.marketing-header-cta { padding:12px 17px; color:#fff; background:#285dff; border-radius:8px; font-size:14px; font-weight:800; box-shadow:0 8px 20px rgba(39,93,255,.19); }
.hero-section { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(400px,.95fr); align-items:center; min-height:670px; overflow:hidden; padding:80px clamp(24px,9vw,150px) 85px; color:#fff; background:radial-gradient(circle at 76% 36%,rgba(60,139,255,.36),transparent 27%),linear-gradient(125deg,#07142a 0%,#0b2450 56%,#112b58 100%); }.hero-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size:55px 55px; mask-image:linear-gradient(90deg,#000,transparent 88%); }.hero-orbit { position:absolute; border:1px solid rgba(95,226,255,.22); border-radius:50%; }.orbit-one { width:730px;height:730px;right:-210px;top:-145px; }.orbit-two { width:460px;height:460px;right:-70px;top:25px;border-style:dashed; }
.hero-copy,.hero-visual { position:relative; z-index:1; }.hero-kicker,.section-label { margin:0 0 20px; color:#5679ff; font-size:12px; font-weight:900; letter-spacing:1.5px; }.hero-kicker { color:#6be6e0; }.hero-kicker span { display:inline-block; width:24px; height:2px; margin:0 8px 4px 0; background:#6be6e0; }.hero-copy h1 { margin:0; font-size:clamp(42px,4.5vw,68px); line-height:1.2; letter-spacing:-3px; }.hero-copy h1 strong { color:#68e5db; font-weight:800; }.hero-lede { max-width:570px; margin:27px 0; color:#b7c9e5; font-size:16px; line-height:1.9; }.hero-actions { display:flex; align-items:center; gap:27px; }.primary-cta { display:inline-flex; align-items:center; gap:11px; padding:15px 21px; color:white; background:#356aff; border-radius:8px; font-size:15px; font-weight:800; box-shadow:0 12px 28px rgba(27,88,255,.26); }.text-cta,.line-cta { display:inline-flex; align-items:center; gap:8px; color:#d3e0ff; font-size:14px; font-weight:800; }.proof-row { display:flex; gap:24px; margin-top:48px; color:#c0cde3; font-size:13px; }.proof-row b { margin-right:7px; color:#69e3db; font-size:11px; }
.hero-visual { height:440px; }.visual-status { position:absolute; top:9px; right:7%; display:flex; gap:7px; align-items:center; padding:8px 11px; color:#8df2dc; background:rgba(13,44,80,.75); border:1px solid rgba(111,236,215,.28); border-radius:6px; font-size:11px; }.visual-panel { position:absolute; padding:19px; background:linear-gradient(145deg,rgba(236,250,255,.96),rgba(189,221,255,.87)); border:1px solid rgba(255,255,255,.75); border-radius:10px; box-shadow:0 24px 45px rgba(0,9,35,.28); color:#173252; }.visual-panel small,.visual-card small { display:block; color:#6280a5; font-size:9px; font-weight:900; letter-spacing:1px; }.visual-panel b,.visual-panel span { display:block; margin-top:8px; font-size:12px; }.visual-panel span { margin-top:3px; color:#6b829e; font-size:10px; }.panel-model { width:250px; height:240px; top:68px; left:4%; transform:rotate(-5deg); }.panel-result { width:250px; height:220px; right:1%; bottom:35px; transform:rotate(5deg); }.wireframe-shape { height:124px; margin-top:13px; border:1px solid #8ac3e8; background:linear-gradient(135deg,transparent 47%,#77b9e7 48%,transparent 50%),linear-gradient(45deg,transparent 47%,#77b9e7 48%,transparent 50%),radial-gradient(ellipse at 50% 60%,#9fd3ed 0 20%,transparent 21%); background-size:39px 39px,39px 39px,100% 100%; }.result-map { display:flex; align-items:end; gap:7px; height:116px; margin-top:13px; padding:13px; background:linear-gradient(135deg,#2645b6,#40bbdd,#d8ed65,#ff513a); }.result-map span { width:14%; height:var(--h); margin:0; background:rgba(255,255,255,.62); }.result-map span:nth-child(1){--h:36%}.result-map span:nth-child(2){--h:77%}.result-map span:nth-child(3){--h:52%}.result-map span:nth-child(4){--h:91%}.result-map span:nth-child(5){--h:63%}.visual-card { position:absolute; left:28%; bottom:0; display:flex; align-items:center; gap:11px; padding:13px 17px; color:#14304d; background:#fff; border-radius:8px; box-shadow:0 18px 34px rgba(0,12,44,.27); }.visual-card svg { color:#295efb; }.visual-card b { display:block; margin-top:3px; font-size:13px; }
.trust-strip { display:grid; grid-template-columns:.8fr 1.45fr 1.4fr; align-items:center; gap:24px; padding:26px clamp(24px,9vw,150px); background:white; border-bottom:1px solid #e5eaf1; }.trust-strip p { margin:0; color:#7a889d; font-size:13px; }.trust-strip strong { font-size:16px; line-height:1.55; }.trust-strip div { display:flex; flex-wrap:wrap; gap:10px; justify-content:end; }.trust-strip span { padding:7px 9px; color:#5a6b84; background:#f1f4f9; border-radius:4px; font-size:11px; font-weight:800; }
.content-section { padding:110px clamp(24px,9vw,150px); }.capability-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; background:#f6f8fc; }.section-intro h2,.workflow-top h2,.scenario-heading h2,.deliverables-copy h2 { margin:0; color:#132743; font-size:clamp(32px,3.4vw,50px); line-height:1.25; letter-spacing:-2px; }.section-intro h2 em,.scenario-heading em { color:#2c62ff; font-style:normal; }.section-intro>p:last-child { max-width:350px; margin:25px 0 0; color:#71819a; font-size:15px; line-height:1.9; }.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.capability-card { min-height:245px; padding:25px; background:#fff; border:1px solid #e5eaf2; border-radius:8px; transition:transform .2s,box-shadow .2s; }.capability-card:hover { transform:translateY(-5px); box-shadow:0 17px 35px rgba(37,60,101,.1); }.capability-card>span { display:block; color:#9baac0; font-size:12px; font-weight:800; }.capability-card svg { width:25px;height:25px; margin-top:27px; color:#2b61ff; }.capability-card h3 { margin:14px 0 8px; font-size:18px; }.capability-card p { margin:0; color:#71819a; font-size:13px; line-height:1.75; }.capability-card b { display:block; margin-top:16px; color:#285ef9; font-size:11px; }.feature-card { color:white; background:linear-gradient(145deg,#1b50d8,#0b2e84); border:none; }.feature-card>span,.feature-card p { color:#bcd0ff; }.feature-card svg,.feature-card b { color:#6ee1d7; }
.deliverables-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; padding:110px clamp(24px,9vw,150px); color:white; background:#10294e; }.light-label { color:#72e8d9; }.deliverables-copy h2 { color:white; }.deliverables-copy>p:not(.section-label) { max-width:390px; margin:25px 0 30px; color:#b4c5dd; line-height:1.9; }.line-cta { color:#75e4d9; }.deliverable-stack { display:grid; gap:11px; }.deliverable-stack article { display:grid; grid-template-columns:46px 1fr 24px; gap:16px; align-items:center; padding:19px 0; border-bottom:1px solid rgba(255,255,255,.14); }.deliverable-stack article>span { color:#6ee0d6; font-size:12px; font-weight:900; }.deliverable-stack b { font-size:16px; }.deliverable-stack p { margin:5px 0 0; color:#9eb2ce; font-size:13px; }.deliverable-stack svg { color:#70e1d6; }
.workflow-top { display:flex; justify-content:space-between; align-items:end; gap:40px; }.workflow-top>p { max-width:370px; margin:0; color:#71819a; line-height:1.85; }.workflow-steps { display:grid; grid-template-columns:repeat(4,1fr); margin-top:64px; border-top:1px solid #dce4ef; }.workflow-steps article { position:relative; min-height:180px; padding:22px 24px 0 0; border-right:1px solid #dce4ef; }.workflow-steps article:not(:first-child){padding-left:24px}.workflow-steps span { display:block; color:#2a60ff; font-size:13px; font-weight:900; }.workflow-steps h3 { margin:22px 0 10px; font-size:17px; }.workflow-steps p { margin:0; color:#71819a; font-size:13px; line-height:1.7; }
.scenario-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:105px clamp(24px,9vw,150px); background:#edf3ff; }.scenario-list { align-self:end; }.scenario-list a { display:grid; grid-template-columns:165px 1fr 24px; gap:18px; align-items:center; padding:19px 0; color:#172d4d; border-bottom:1px solid #d1dced; }.scenario-list a:first-child { border-top:1px solid #d1dced; }.scenario-list span { color:#61738e; font-size:13px; }.scenario-list b { font-size:15px; }.scenario-list svg { color:#3063fa; }.final-cta { padding:115px 24px; color:white; text-align:center; background:radial-gradient(circle at 50% 5%,#295ccf,#0b1d3b 62%); }.final-cta p { margin:0 0 15px; color:#6ee1d6; font-size:11px; font-weight:900; letter-spacing:1.5px; }.final-cta h2 { margin:0 0 30px; font-size:clamp(35px,4vw,55px); line-height:1.25; letter-spacing:-2px; }.inverted { color:#16345e; background:#78e4db; box-shadow:none; }
.marketing-site + .site-header,.marketing-site ~ .app-shell,.marketing-site ~ .site-footer { display:none; }.marketing-site.app-open { display:none; }.marketing-site.app-open + .site-header,.marketing-site.app-open ~ .app-shell,.marketing-site.app-open ~ .site-footer { display:flex; }.marketing-site.app-open ~ .app-shell { display:grid; }.marketing-site.app-open ~ .app-shell .view-panel.active-view { display:block; }
@media(max-width:900px){.marketing-header nav{display:none}.hero-section{grid-template-columns:1fr;min-height:auto;padding-top:85px}.hero-visual{margin-top:35px;transform:scale(.85);transform-origin:left top;margin-bottom:-55px}.trust-strip,.capability-section,.deliverables-section,.scenario-section{grid-template-columns:1fr}.trust-strip div{justify-content:start}.capability-section,.deliverables-section,.scenario-section{gap:45px}.workflow-steps{grid-template-columns:repeat(2,1fr)}.workflow-steps article:nth-child(2){border-right:0}.scenario-list{width:100%}}
@media(max-width:560px){.marketing-header{height:66px;padding:0 16px}.marketing-login{display:none}.marketing-header-cta{padding:10px 12px}.hero-section{padding:65px 24px}.hero-copy h1{font-size:39px;letter-spacing:-2px}.hero-actions,.proof-row{gap:15px;flex-wrap:wrap}.hero-visual{height:340px;transform:scale(.65);margin-bottom:-120px}.trust-strip{padding:24px}.trust-strip strong{font-size:15px}.capability-grid{grid-template-columns:1fr}.content-section,.deliverables-section,.scenario-section{padding:72px 24px}.workflow-top{display:block}.workflow-top>p{margin-top:22px}.workflow-steps{grid-template-columns:1fr;margin-top:36px}.workflow-steps article,.workflow-steps article:not(:first-child){padding:18px 0;border-right:0;border-bottom:1px solid #dce4ef;min-height:0}.scenario-list a{grid-template-columns:1fr 20px;gap:6px}.scenario-list span{grid-column:1}.scenario-list b{grid-column:1;grid-row:2}.scenario-list svg{grid-column:2;grid-row:1 / span 2}.deliverable-stack article{grid-template-columns:28px 1fr 20px}.deliverable-stack p{line-height:1.6}.final-cta{padding:75px 22px}}

/* Rich case-study treatment and app-to-landing navigation. */
.project-showcase { display:grid; grid-template-columns:.72fr 1.28fr; gap:60px; align-items:end; padding:118px clamp(24px,9vw,150px); color:#102747; background:#fff; }.showcase-title h2 { margin:0; font-size:clamp(34px,3.8vw,54px); line-height:1.2; letter-spacing:-2.5px; }.showcase-title h2 em { color:#2a61ff; font-style:normal; }.showcase-title>p:not(.section-label) { max-width:355px; margin:24px 0 30px; color:#71819a; font-size:15px; line-height:1.9; }.showcase-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; max-width:390px; }.showcase-metrics span { padding-right:8px; color:#77869c; font-size:11px; line-height:1.45; border-right:1px solid #dce4ef; }.showcase-metrics span:last-child { border:0; }.showcase-metrics b { display:block; margin-bottom:5px; color:#255bfa; font-size:22px; }.showcase-gallery { display:grid; grid-template-columns:1.15fr .85fr; gap:16px; }.showcase-gallery article { position:relative; overflow:hidden; min-height:390px; border-radius:10px; background:#e8effb; }.showcase-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }.showcase-gallery article:hover img { transform:scale(1.045); }.gallery-main img { object-position:46% center; mix-blend-mode:multiply; }.gallery-side img { object-position:52% center; mix-blend-mode:multiply; }.showcase-gallery article::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(6,24,55,.9)); }.showcase-gallery article>div { position:absolute; z-index:1; right:22px; bottom:22px; left:22px; color:#fff; }.showcase-gallery article>div span { color:#80e6dc; font-size:10px; font-weight:900; letter-spacing:1px; }.showcase-gallery h3 { margin:8px 0 4px; font-size:19px; }.showcase-gallery p { margin:0; color:#c3d1e2; font-size:12px; line-height:1.6; }.showcase-gallery article>b { position:absolute; z-index:1; top:18px; right:20px; color:#2a61ff; background:#fff; border-radius:999px; padding:7px 10px; font-size:11px; }.gallery-side { min-height:390px !important; }.back-to-landing { position:fixed; z-index:80; top:93px; left:22px; display:none; align-items:center; gap:7px; padding:11px 14px; color:#20478e; background:rgba(255,255,255,.96); border:1px solid #d7e3f5; border-radius:8px; box-shadow:0 10px 25px rgba(28,64,117,.13); font-size:13px; font-weight:800; }.back-to-landing:hover { color:#fff; background:#285dff; border-color:#285dff; }.back-to-landing svg { width:15px; height:15px; }.marketing-site.app-open + .back-to-landing { display:inline-flex; }
@media(max-width:900px){.project-showcase{grid-template-columns:1fr;gap:38px}.showcase-gallery{max-width:760px}.gallery-main,.gallery-side{min-height:330px!important}.back-to-landing{top:84px;left:12px}}
@media(max-width:560px){.project-showcase{padding:75px 24px}.showcase-gallery{grid-template-columns:1fr}.showcase-gallery article,.gallery-main,.gallery-side{min-height:260px!important}.showcase-metrics{max-width:100%}.back-to-landing{top:76px;padding:9px 11px;font-size:12px}}

.gallery-main img { object-position:46% center; mix-blend-mode:normal; }
.gallery-side img { object-position:72% center; mix-blend-mode:normal; }
.showcase-credit { grid-column:1 / -1; margin:-35px 0 0; color:#8a99ad; font-size:11px; }.showcase-credit a { color:#61799f; text-decoration:underline; text-underline-offset:3px; }

/* Third-level account surface: standalone from the project workspace. */
body.is-personal-surface { background:#f5f8fd; }
body.is-personal-surface .app-shell { display:block; min-height:calc(100vh - 80px); }
body.is-personal-surface .side-nav { display:none; }
body.is-personal-surface .personal-page { padding:0 0 76px; }
body.is-personal-surface .site-footer { display:none; }
.personal-hero { padding:42px max(30px,calc((100vw - 1126px) / 2)) 0; color:white; background:radial-gradient(circle at 88% 5%,rgba(84,183,255,.34),transparent 26%),linear-gradient(125deg,#0c1d3d,#113c82); }
.personal-breadcrumb { display:inline-flex; align-items:center; gap:5px; color:#adcaee; font-size:13px; font-weight:800; }.personal-breadcrumb:hover { color:#fff; }.personal-breadcrumb svg { width:16px; height:16px; }
.personal-hero-main { display:flex; align-items:end; justify-content:space-between; gap:32px; padding:35px 0 32px; }.personal-hero-main .eyebrow { color:#70e1d7; }.personal-hero-main h1 { margin:8px 0; font-size:36px; letter-spacing:-1px; }.personal-hero-main p:last-child { margin:0; color:#b7cae6; font-size:14px; }.member-badge { display:flex; align-items:center; gap:10px; min-width:195px; padding:12px 14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:10px; }.member-badge>span { display:grid; place-items:center; width:37px; height:37px; color:#174184; background:#74e5da; border-radius:9px; font-size:13px; font-weight:900; }.member-badge small,.member-badge b { display:block; }.member-badge small { color:#b7cae6; font-size:11px; }.member-badge b { margin-top:3px; font-size:13px; }.account-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.14); border-bottom:0; border-radius:10px 10px 0 0; overflow:hidden; }.account-overview article { position:relative; min-height:108px; padding:19px 22px; background:rgba(6,26,65,.27); }.account-overview i { position:absolute; top:19px; right:19px; width:19px; height:19px; color:#6ee2d7; }.account-overview span,.account-overview small { display:block; color:#aec4e4; font-size:12px; }.account-overview b { display:inline-block; margin:8px 0 3px; font-size:27px; }.account-overview small { color:#84a4d0; }
body.is-personal-surface .personal-heading { display:none; }
body.is-personal-surface .personal-grid { max-width:1126px; margin:30px auto 0; grid-template-columns:246px minmax(0,1fr); }
body.is-personal-surface .personal-tabs { padding:12px; border:0; box-shadow:0 8px 25px rgba(27,55,103,.07); }
body.is-personal-surface .personal-content { padding:25px; background:#fff; border-radius:12px; box-shadow:0 8px 25px rgba(27,55,103,.07); }
body.is-personal-surface .personal-tab { min-height:48px; border-radius:7px; }
body.is-personal-surface .personal-section.active-section { min-height:410px; }
@media(max-width:860px){.personal-hero{padding:28px 20px 0}.personal-hero-main{align-items:start;flex-direction:column;padding:25px 0}.account-overview{grid-template-columns:repeat(2,1fr)}body.is-personal-surface .personal-grid{margin:20px;padding:0;grid-template-columns:1fr}body.is-personal-surface .personal-tabs{grid-template-columns:repeat(2,1fr)}.personal-hero-main h1{font-size:30px}}

/* Account and administrator surfaces */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top right,#d9ecff,transparent 35%),#f3f7fc;color:#15213d}.auth-card{width:min(100%,430px);padding:40px;border:1px solid #e3eaf4;border-radius:18px;background:#fff;box-shadow:0 22px 70px rgba(24,52,91,.14)}.auth-brand,.admin-header>a{font-weight:900;color:#1a4dbe;text-decoration:none}.auth-brand span,.admin-header span{margin-left:7px;color:#172543}.auth-card h1{margin:8px 0;font-size:30px}.auth-note,.admin-subtitle{color:#65718a;line-height:1.7}.auth-card form{display:grid;gap:16px;margin-top:26px}.auth-card label{display:grid;gap:7px;font-size:14px;font-weight:700}.auth-card input{padding:13px;border:1px solid #ccd7e7;border-radius:8px;font:inherit}.auth-submit{padding:13px;border:0;border-radius:8px;background:#285dff;color:#fff;font:inherit;font-weight:800;cursor:pointer}.auth-submit:disabled{opacity:.6}.auth-error{min-height:20px;margin:0;color:#bf2525;font-size:13px}.auth-switch,.auth-back{display:block;margin:18px auto 0;border:0;background:transparent;color:#285dff;font:inherit;cursor:pointer;text-align:center}.auth-back{color:#6d7890;text-decoration:none}.admin-page{margin:0;background:#f4f7fb;color:#17213a}.admin-header{height:66px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e3eaf4}.admin-header>div{display:flex;gap:16px;align-items:center}.admin-header button,.panel-title button,.user-status{padding:8px 12px;border:1px solid #cdd9ec;border-radius:7px;background:#fff;color:#264f9d;font:inherit;cursor:pointer}.admin-main{max-width:1180px;margin:0 auto;padding:46px 24px 80px}.admin-main h1{margin:7px 0;font-size:34px}.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}.admin-stats article,.admin-panel{padding:22px;background:#fff;border:1px solid #e3eaf4;border-radius:12px;box-shadow:0 8px 25px rgba(28,52,91,.04)}.admin-stats span{display:block;color:#6d7890;font-size:13px}.admin-stats b{display:block;margin-top:10px;font-size:30px}.admin-panel{margin-top:18px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-title h2{margin:0;font-size:18px}.admin-table-wrap{overflow:auto}.admin-panel table{width:100%;border-collapse:collapse;font-size:14px}.admin-panel th,.admin-panel td{padding:12px;text-align:left;border-bottom:1px solid #edf1f7;white-space:nowrap}.admin-panel th{color:#71809a;font-weight:700}@media(max-width:640px){.auth-card{padding:28px 23px}.admin-main{padding:32px 16px}.admin-stats{grid-template-columns:1fr}.admin-header{padding:0 16px}.admin-header>div{gap:9px}.admin-header #adminName{max-width:100px;overflow:hidden;text-overflow:ellipsis}}

/* Override the workspace grid with a full-width account route. */
body.is-personal-surface .marketing-site.app-open ~ .app-shell {
  display: block !important;
  width: 100% !important;
  min-width: 0;
  grid-template-columns: 1fr !important;
}
body.is-personal-surface .marketing-site.app-open ~ .app-shell .personal-page.active-view {
  display: block !important;
  width: 100% !important;
  min-width: 0;
}
body.is-personal-surface .personal-hero {
  width: 100%;
  padding: 42px 8vw 0;
}
body.is-personal-surface .personal-grid {
  display: grid !important;
  width: min(1126px, calc(100% - 48px));
  max-width: none;
  min-width: 0;
  margin: 30px auto 0;
}
body.is-personal-surface .personal-content,
body.is-personal-surface .personal-section,
body.is-personal-surface .personal-section.active-section {
  min-width: 0;
}

/* Announcement center on the public landing page. */
.notice-section { display:grid; grid-template-columns:.72fr 1.28fr; gap:78px; padding:112px clamp(24px,9vw,150px); color:#162b4a; background:#fff; }.notice-intro { align-self:start; position:sticky; top:112px; }.notice-intro h2 { margin:0; font-size:clamp(35px,3.8vw,54px); line-height:1.2; letter-spacing:-2px; }.notice-intro h2 em { color:#2c62ff; font-style:normal; }.notice-intro>p:not(.section-label) { max-width:340px; margin:24px 0 29px; color:#71819a; font-size:14px; line-height:1.9; }.notice-cta { color:#285ef9; }.notice-content { display:grid; gap:18px; }.notice-feed { padding:23px 25px 4px; background:#0e2855; border-radius:11px; color:#fff; }.notice-feed-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }.notice-feed-head b { font-size:17px; }.notice-feed-head span { padding:5px 8px; color:#77e3d9; background:rgba(117,228,218,.12); border-radius:999px; font-size:10px; font-weight:800; }.notice-update { position:relative; display:grid; grid-template-columns:65px 1fr 23px; gap:13px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.12); }.notice-update:last-child { border:0; }.notice-update time { color:#71e1d8; font-size:11px; font-weight:900; }.notice-update span { color:#a8bfdf; font-size:9px; font-weight:900; letter-spacing:1px; }.notice-update h3 { margin:5px 0; font-size:15px; }.notice-update p { margin:0; color:#b9c9df; font-size:12px; line-height:1.65; }.notice-update>svg { margin-top:4px; color:#6ee1d7; width:19px; height:19px; }.policy-list { display:grid; background:#f7f9fd; border:1px solid #e0e7f1; border-radius:11px; overflow:hidden; }.policy-list details { background:#fff; border-bottom:1px solid #e6ebf3; }.policy-list details:last-child { border:0; }.policy-list summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 21px; list-style:none; cursor:pointer; font-size:14px; font-weight:800; }.policy-list summary::-webkit-details-marker { display:none; }.policy-list summary span { display:flex; align-items:center; gap:10px; }.policy-list summary span svg { width:18px; height:18px; color:#2b61ff; }.policy-list summary>svg { width:17px; height:17px; color:#7f90a9; transition:transform .2s; }.policy-list details[open] summary>svg { transform:rotate(45deg); color:#2b61ff; }.policy-list details p { margin:0; padding:0 53px 18px; color:#6e7e96; font-size:13px; line-height:1.8; }
@media(max-width:900px){.notice-section{grid-template-columns:1fr;gap:38px}.notice-intro{position:static}}@media(max-width:560px){.notice-section{padding:75px 24px}.notice-feed{padding:19px}.notice-update{grid-template-columns:1fr 20px}.notice-update time{grid-column:1}.notice-update>div{grid-column:1}.notice-update>svg{grid-column:2;grid-row:1 / span 2}.policy-list summary{padding:16px}.policy-list details p{padding:0 17px 17px}}

/* Administrator date analytics */
.admin-filter { display:flex; align-items:end; gap:10px; margin-top:26px; padding:16px 18px; background:#fff; border:1px solid #e3eaf4; border-radius:12px; box-shadow:0 8px 25px rgba(28,52,91,.04); }
.admin-filter>div { display:grid; gap:6px; }
.admin-filter label { color:#66738c; font-size:12px; font-weight:800; }
.admin-filter input { min-height:38px; padding:0 11px; border:1px solid #cdd9e8; border-radius:7px; font:inherit; }
.admin-filter button { min-height:38px; padding:0 14px; border:1px solid #cdd9ec; border-radius:7px; background:#fff; color:#264f9d; font:inherit; font-weight:700; cursor:pointer; }
.admin-filter #queryButton { border-color:#285dff; background:#285dff; color:#fff; }
.admin-filter span { margin-left:auto; align-self:center; color:#52617a; font-size:13px; font-weight:700; }
.admin-stats { grid-template-columns:repeat(5,1fr); gap:14px; margin:18px 0; }
.admin-stats .period-stat { border-color:#cfe0ff; background:linear-gradient(145deg,#fff,#f3f7ff); }
.admin-shell { display:grid; grid-template-columns:238px minmax(0,1fr); gap:24px; max-width:1280px; }
.admin-sidebar { position:sticky; top:86px; align-self:start; min-height:calc(100vh - 132px); padding:18px; border:1px solid #e0e8f4; border-radius:14px; background:#fff; box-shadow:0 12px 30px rgba(26,52,91,.06); }
.admin-sidebar-brand { padding:4px 4px 16px; border-bottom:1px solid #edf2f8; }
.admin-sidebar-brand span { display:block; color:#285dff; font-size:11px; font-weight:900; letter-spacing:.9px; }
.admin-sidebar-brand strong { display:block; margin-top:7px; color:#17213a; font-size:18px; }
.admin-side-nav { display:grid; gap:7px; padding:16px 0; }
.admin-side-nav button { width:100%; min-height:42px; padding:0 13px; border:0; border-radius:8px; background:transparent; color:#4d5d77; font:inherit; font-weight:800; text-align:left; cursor:pointer; }
.admin-side-nav button:hover { background:#f2f6ff; color:#285dff; }
.admin-side-nav button.active { background:#285dff; color:#fff; box-shadow:0 8px 18px rgba(40,93,255,.22); }
.admin-side-links { display:grid; gap:8px; padding-top:14px; border-top:1px solid #edf2f8; }
.admin-side-links a { display:block; padding:10px 12px; border:1px solid #d8e3f2; border-radius:8px; color:#264f9d; background:#fff; text-decoration:none; font-size:13px; font-weight:800; }
.admin-side-links a:hover { border-color:#adc3e8; background:#f7faff; }
.admin-content { min-width:0; }
.admin-content-head { margin-bottom:22px; }
.admin-content-head h1 { margin:7px 0; font-size:34px; }
.admin-view[hidden] { display:none !important; }
.admin-view.active { display:block; }
.admin-content .admin-filter { margin-top:0; }
.admin-content .admin-panel { margin-top:0; }
.ops-panel { border-color:#d8e4f5; }
.ops-tools { display:flex; align-items:center; gap:8px; }
.ops-tools button,.ops-tools a { padding:8px 12px; border:1px solid #cdd9ec; border-radius:7px; background:#fff; color:#264f9d; font:inherit; cursor:pointer; text-decoration:none; }
.ops-tools button:disabled { opacity:.55; cursor:wait; }
.ops-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.ops-summary article { padding:13px; border:1px solid #e1e8f2; border-radius:8px; background:#f9fbff; }
.ops-summary span,.ops-summary b { display:block; }
.ops-summary span { color:#697891; font-size:12px; font-weight:800; }
.ops-summary b { margin-top:6px; color:#172a48; font-size:22px; }
.ops-alerts { display:grid; gap:8px; margin-bottom:16px; }
.ops-alert { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 13px; border:1px solid #dbe6f4; border-radius:8px; background:#fff; }
.ops-alert strong { color:#172a48; font-size:12px; }
.ops-alert span { color:#53627a; font-size:13px; }
.ops-alert.warning { border-color:#f1d38a; background:#fffaf0; }
.ops-alert.danger { border-color:#e7a7a7; background:#fff6f6; }
.ops-alert.ok { border-color:#bfe1d2; background:#f3fbf7; }
.ops-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.ops-grid h3 { margin:0 0 10px; font-size:15px; color:#172a48; }
.ops-issue-list { display:grid; gap:8px; }
.ops-issue { display:block; padding:12px 13px; border:1px solid #e1e8f2; border-radius:8px; color:#172a48; background:#fff; text-decoration:none; }
.ops-issue strong,.ops-issue span { display:block; }
.ops-issue span { margin-top:5px; color:#687790; font-size:12px; }
.ops-issue.warning { border-left:4px solid #d89a17; }
.ops-issue.danger { border-left:4px solid #d24b4b; }
.audit-refresh { width:auto; min-width:92px; }
.audit-detail { max-width:520px; max-height:160px; margin:0; white-space:pre-wrap; overflow:auto; color:#45546d; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.pricing-card { display:grid; gap:10px; padding:22px; border:1px solid #e1e8f2; border-radius:10px; background:#fff; box-shadow:0 8px 25px rgba(28,52,91,.04); }
.pricing-card span { color:#6c7890; font-size:12px; font-weight:900; text-transform:uppercase; }
.pricing-card h2 { margin:0; font-size:19px; }
.pricing-card strong { color:#285dff; font-size:28px; }
.pricing-card p { margin:0; color:#61708a; line-height:1.7; }
.pricing-card b { color:#172a48; }
.pricing-card ul { min-height:92px; margin:0; padding-left:18px; color:#53627a; line-height:1.8; }
.pricing-card button { min-height:40px; border-radius:8px; background:#285dff; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.plan-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.plan-form input,.plan-form select,.plan-form textarea { min-width:0; padding:10px 11px; border:1px solid #cdd9e8; border-radius:8px; font:inherit; }
.plan-form textarea { grid-column:span 3; resize:vertical; }
.plan-form button { grid-column:1 / -1; }
.compact-rule-form { grid-template-columns:minmax(180px,260px) minmax(140px,180px); align-items:center; }
.compact-rule-form button { grid-column:auto; }
.legal-main { max-width:920px; }
.legal-section { margin-top:24px; padding:28px; border:1px solid #e1e8f2; border-radius:10px; background:#fff; line-height:1.9; }
.legal-section h2 { margin:22px 0 8px; font-size:18px; }
.legal-section h2:first-child { margin-top:0; }
.legal-section p { margin:0; color:#4f5f77; }
.site-footer a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.company-disclosure { margin:0 0 16px; color:#8fece4; font-size:12px; letter-spacing:.2px; }
.site-footer span { line-height:1.7; }
@media(max-width:900px) {
  .admin-shell { display:block; }
  .admin-sidebar { position:static; min-height:0; margin-bottom:18px; }
  .admin-side-nav { grid-template-columns:repeat(3,1fr); }
  .admin-side-nav button { text-align:center; }
  .admin-side-links { grid-template-columns:repeat(3,1fr); }
  .admin-side-links a { text-align:center; }
  .admin-stats { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ops-summary { grid-template-columns:repeat(2,1fr); }
  .ops-grid { grid-template-columns:1fr; }
  .admin-filter { align-items:stretch; flex-wrap:wrap; }
  .admin-filter span { width:100%; margin:4px 0 0; }
}
@media(max-width:640px) {
  .admin-side-nav,.admin-side-links { grid-template-columns:1fr 1fr; }
  .admin-stats { grid-template-columns:1fr; }
  .pricing-grid,.plan-form { grid-template-columns:1fr; }
  .plan-form textarea { grid-column:auto; }
}

/* Points ledger and allocation controls */
.points-rate { color:#64738d; font-size:13px; font-weight:700; }
.admin-user-tools { display:flex; align-items:center; gap:14px; }
.admin-user-tools input { min-width:200px; padding:8px 10px; border:1px solid #cdd9e8; border-radius:7px; font:inherit; }
.points-balance { color:#285dff; font-size:16px; }
.points-grant { display:flex; gap:7px; }
.points-grant input { width:92px; padding:7px 9px; border:1px solid #cdd9e8; border-radius:7px; font:inherit; }

/* Unified administrator console */
.admin-page .admin-main { max-width:1440px; padding-top:28px; }
.admin-page .admin-shell { grid-template-columns:248px minmax(0,1fr); gap:28px; }
.admin-page .admin-sidebar { top:80px; padding:20px 16px; }
.admin-page .admin-side-nav { gap:4px; }
.admin-page .admin-side-nav button { min-height:40px; font-size:13px; }
.admin-page .admin-side-nav button.active { background:#eef3fb; color:#233a5a; box-shadow:none; border:1px solid #d2deee; }
.admin-page .admin-side-nav button:hover { background:#f5f8fc; color:#233a5a; }
.admin-page .admin-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-page .admin-stats article { min-height:112px; }
.admin-inline-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-inline-tools input,.admin-inline-tools select,.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea { min-width:0; padding:10px 11px; border:1px solid #cdd9e8; border-radius:8px; background:#fff; color:#20314c; font:inherit; }
.admin-inline-tools button,.admin-form-actions button,.admin-panel td button { padding:8px 12px; border:1px solid #cdd9e8; border-radius:7px; background:#fff; color:#2b4d79; font:inherit; cursor:pointer; }
.admin-inline-tools button:hover,.admin-panel td button:hover { border-color:#9ab3d4; background:#f6f9fd; }
.admin-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:18px 0 22px; padding:18px; border:1px solid #e7edf5; border-radius:10px; background:#fbfcfe; }
.admin-form-grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-form-grid { align-items:start; }
.admin-form-grid label { display:grid; align-content:start; gap:6px; color:#596a84; font-size:12px; font-weight:800; }
.admin-form-grid .wide { grid-column:span 2; }
.admin-form-grid textarea { min-height:72px; resize:vertical; }
.admin-form-actions { display:flex; align-items:end; gap:8px; }
.admin-form-actions .primary { border-color:#536d8d; background:#536d8d; color:#fff; font-weight:800; }
.admin-section-title { margin-top:30px; padding-top:22px; border-top:1px solid #e7edf5; }
.admin-note { color:#70809a; font-size:12px; line-height:1.6; }
.admin-panel small { display:block; margin-top:4px; color:#8492a6; font-size:11px; }
.empty-cell { padding:28px !important; color:#8a96a8; text-align:center !important; }
.generated-codes { margin:12px 0 20px; padding:14px 16px; border:1px solid #d9e4f2; border-radius:9px; background:#f7faff; color:#334b6c; line-height:2; }
.generated-codes code { display:inline-block; margin:3px 6px 3px 0; padding:2px 6px; border-radius:5px; background:#eaf0f8; color:#1c456e; letter-spacing:1px; }
.admin-toast { position:fixed; right:24px; bottom:24px; z-index:100; padding:11px 16px; border:1px solid #c9d7ea; border-radius:8px; background:#fff; color:#2b4d79; box-shadow:0 10px 30px rgba(31,56,91,.16); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
.admin-toast.show { opacity:1; transform:translateY(0); }
.admin-toast.error { border-color:#e1b8b8; color:#a93f3f; }
.redeem-code-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; margin-top:18px; padding-top:16px; border-top:1px solid #e7edf5; }
.redeem-code-form label { display:grid; gap:6px; color:#64738d; font-size:12px; font-weight:800; }
.redeem-code-form input { padding:9px 10px; border:1px solid #cdd9e8; border-radius:7px; font:inherit; }
.redeem-code-form small { grid-column:1 / -1; min-height:18px; color:#667690; }
.library-download.is-unlocked { border-color:#bcd8cc; background:#f3fbf7; color:#2d715b; }
.billing-help,.library-help { margin:4px 0 14px; padding:10px 12px; border:1px solid #e7edf5; border-radius:8px; background:#f8fafc; }
.admin-rule-form { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-rule-form .wide { grid-column:span 2; }
.admin-page [data-admin-panel="billing"] .admin-table-wrap { border:1px solid #e7edf5; border-radius:10px; }
.admin-page [data-admin-panel="billing"] table th { background:#f8fafc; }
.membership-discount-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 16px; }
.membership-discount-card { display:grid; gap:9px; padding:15px; border:1px solid #e0e8f2; border-radius:10px; background:linear-gradient(145deg,#fff,#f8fbff); }
.membership-discount-card>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.membership-discount-card span { color:#536781; font-size:13px; font-weight:800; }
.membership-discount-card strong { color:#2b4d79; font-size:20px; }
.membership-discount-card small { color:#7a899f; line-height:1.5; }
.membership-discount-card button { justify-self:start; padding:7px 10px; border:1px solid #cdd9e8; border-radius:7px; background:#fff; color:#2b4d79; font:inherit; cursor:pointer; }
.library-admin-form { grid-template-columns:repeat(4,minmax(0,1fr)); }
.library-admin-form .library-description-field { grid-column:1 / -1; }
.library-admin-form .library-description-field textarea { min-height:70px; max-height:130px; }
.library-admin-form .admin-form-actions { align-items:center; }
.library-image-upload { grid-column:1 / -1; }
.library-image-upload input[type="file"] { width:100%; padding:9px; border:1px dashed #cdd9e8; background:#fff; color:#596a84; cursor:pointer; }
.library-image-upload small { margin-top:0; font-weight:500; }
.admin-library-image-preview,.admin-library-thumbs { display:flex; align-items:center; gap:8px; min-height:42px; color:#8492a6; font-size:12px; }
.admin-library-image-preview img,.admin-library-thumbs img { display:block; width:88px; height:54px; object-fit:cover; border:1px solid #dfe6ef; border-radius:6px; background:#f6f8fb; }
.admin-library-image-preview img { width:112px; height:70px; }
.library-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; }
.library-filters button { padding:8px 14px; border:1px solid #d9e0e7; border-radius:999px; background:#fff; color:#6d7782; font:inherit; font-size:12px; cursor:pointer; transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease; }
.library-filters button:hover { border-color:#aeb9c4; color:#3e4a57; transform:translateY(-1px); }
.library-filters button.active { border-color:#7b8792; background:#68737e; color:#fff; }
.library-filter-row { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:18px 0 20px; }
.library-filter-row .library-filters { margin:0; }
.library-keyword-search { display:flex; align-items:center; gap:8px; min-width:250px; color:#596a84; font-size:12px; font-weight:800; }
.library-keyword-search input { width:230px; min-width:0; padding:9px 11px; border:1px solid #cdd9e8; border-radius:8px; background:#fff; color:#20314c; font:inherit; font-weight:500; }
.library-empty { margin:0 0 20px; padding:28px; border:1px dashed #d8e1ec; border-radius:10px; color:#8492a6; text-align:center; }
.secondary-credential-result { border-color:#cbdcf3; background:#f5f9ff; }
.secondary-credential { display:flex; align-items:center; gap:7px; min-width:136px; white-space:nowrap; }
.secondary-credential code { color:#2b4d79; letter-spacing:1px; }
.secondary-credential button { padding:5px 8px; }
.secondary-credential-missing span { color:#a07a55; font-size:12px; }
.password-note { color:#8492a6; font-size:12px; }
.library-item[hidden] { display:none; }
.admin-page.partner-page .partner-shell { display:grid; grid-template-columns:248px minmax(0,1fr); align-items:start; gap:28px; }
.admin-page.partner-page .partner-shell .admin-sidebar { position:sticky; top:80px; min-height:0; height:fit-content; }
.admin-page.partner-page .partner-shell .admin-content { min-width:0; }
@media(max-width:1000px) { .membership-discount-summary { grid-template-columns:1fr; } .admin-rule-form,.library-admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1000px) { .admin-page .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-form-grid,.admin-form-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .admin-page .admin-stats { grid-template-columns:1fr; } .admin-form-grid,.admin-form-grid.compact { grid-template-columns:1fr; } .admin-form-grid .wide { grid-column:auto; } .admin-page .admin-main { padding:20px 12px 60px; } .panel-title { align-items:flex-start; flex-direction:column; gap:10px; } }
.library-filter-row { flex-wrap:wrap; }
@media(max-width:640px) { .library-keyword-search { width:100%; align-items:stretch; flex-direction:column; } .library-keyword-search input { width:100%; } }
.points-grant button { padding:7px 11px; border:0; border-radius:7px; background:#285dff; color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.points-grant button:disabled { opacity:.55; cursor:wait; }
.admin-actions { display:flex; align-items:center; gap:7px; }
.admin-actions button,.admin-actions a { display:inline-flex; align-items:center; min-height:31px; padding:7px 9px; border:1px solid #cdd9ec; border-radius:7px; background:#fff; color:#264f9d; font:inherit; font-size:12px; line-height:1; cursor:pointer; text-decoration:none; }
.admin-actions button:disabled,.detail-actions button:disabled { opacity:.55; cursor:wait; }
.batch-test-panel { margin:0 0 20px; padding:18px; border:1px solid #cfe0ff; border-radius:10px; background:linear-gradient(145deg,#f8fbff,#fff); }
.batch-test-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.batch-test-head h3 { margin:4px 0 5px; font-size:18px; }
.batch-test-head p { margin:0; color:#66738c; font-size:13px; }
.batch-test-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.batch-test-primary,.batch-test-secondary { min-height:40px; padding:0 16px; border-radius:7px; font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }
.batch-test-primary { border:0; background:#285dff; color:#fff; }
.batch-test-secondary { border:1px solid #285dff; background:#fff; color:#285dff; }
.batch-test-primary:disabled,.batch-test-secondary:disabled { opacity:.6; cursor:wait; }
.batch-test-controls { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-top:16px; }
.batch-test-controls label { display:grid; gap:6px; color:#52617a; font-size:12px; font-weight:800; }
.batch-test-controls select,.batch-test-controls input { min-height:36px; min-width:150px; padding:0 10px; border:1px solid #cdd9e8; border-radius:7px; background:#fff; color:#17213a; font:inherit; }
.batch-test-controls small { color:#7b879b; font-weight:500; }
.batch-test-status { margin-top:16px; padding:13px; border:1px solid #e1e8f2; border-radius:8px; background:#fff; }
.batch-test-summary { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:#52617a; font-size:13px; }
.batch-test-summary strong { color:#172a48; }
.batch-test-progress { height:7px; margin:11px 0 8px; overflow:hidden; border-radius:5px; background:#e8eef8; }
.batch-test-progress i { display:block; height:100%; border-radius:5px; background:#285dff; transition:width .3s ease; }
.batch-test-status small { color:#697891; }
.batch-test-failures { margin-top:14px; padding-top:14px; border-top:1px solid #e5ebf4; }
.batch-test-failures h4 { margin:0 0 8px; color:#b42318; font-size:14px; }
.batch-test-failures .batch-ok { color:#147a4b; font-weight:800; }
.batch-test-failures .batch-error { min-width:260px; max-width:520px; white-space:normal; color:#b42318; }
@media(max-width:640px){.batch-test-head{display:grid}.batch-test-buttons,.batch-test-primary,.batch-test-secondary{width:100%}.batch-test-controls label,.batch-test-controls select,.batch-test-controls input{width:100%}.batch-test-controls select,.batch-test-controls input{min-width:0}.batch-test-summary{display:grid;gap:5px}}
.recharge-form { display:grid; grid-template-columns:76px 82px auto; gap:7px; align-items:center; }
.recharge-form input { min-width:0; padding:7px 9px; border:1px solid #cdd9e8; border-radius:7px; font:inherit; }
.recharge-form button,.detail-actions button { padding:8px 11px; border:0; border-radius:7px; background:#285dff; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.admin-back-link { align-self:center; padding:10px 13px; color:#285dff; border:1px solid #cdd9ec; border-radius:8px; background:#fff; text-decoration:none; font-weight:800; }
.detail-title-row { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.detail-stats { grid-template-columns:repeat(4,1fr); }
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.detail-list { display:grid; grid-template-columns:96px 1fr; gap:10px 14px; margin:0; }
.detail-list dt { color:#697891; font-weight:800; }
.detail-list dd { margin:0; color:#1a2944; white-space:pre-wrap; line-height:1.7; }
.detail-feed { display:grid; gap:10px; }
.detail-feed article { padding:12px 14px; border:1px solid #e2e9f3; border-radius:8px; background:#f9fbff; }
.detail-feed strong,.detail-feed span,.detail-feed small { display:block; }
.detail-feed span,.detail-feed small { margin-top:4px; color:#66758d; overflow-wrap:anywhere; }
.points-transaction-list { display:grid; gap:8px; margin-top:14px; }
.points-transaction { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:13px 15px; border:1px solid #e1e8f2; border-radius:9px; background:#fff; }
.points-transaction strong,.points-transaction small { display:block; }
.points-transaction small { margin-top:4px; color:#78869c; }
.points-transaction span { font-size:16px; font-weight:900; }
.points-transaction .is-credit { color:#168565; }
.points-transaction .is-debit { color:#d04b44; }
.points-transaction time { color:#8491a5; font-size:12px; }
.task-delivery-hint { color:#68737e !important; font-weight:800; }
.task-download-button,
.workspace-progress-panel .task-refresh-button { padding:7px 10px; border:1px solid #d6dbe0; border-radius:7px; color:#5f6b76; background:#f5f6f7; font:inherit; cursor:pointer; }
.task-download-button { color:#fff; background:#68737e; border-color:#68737e; }
.task-download-button:hover { background:#4f5963; border-color:#4f5963; }
.workspace-progress-panel .task-refresh-button:hover { background:#eef1f3; }
.task-download-button:disabled { opacity:.6; cursor:wait; }
.task-detail-head { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:14px; }
.task-detail-head span { display:block; color:#6b7890; font-size:12px; font-weight:800; }
.task-detail-head strong { display:block; margin-top:4px; color:#172a48; font-size:17px; }
.task-detail-head button { padding:7px 10px; border:1px solid #cdd9ec; border-radius:7px; color:#274f9b; background:#fff; font:inherit; cursor:pointer; }
.task-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.task-detail-grid article { padding:12px; border:1px solid #e1e9f5; border-radius:8px; background:#fff; }
.task-detail-grid span,.task-detail-grid strong { display:block; }
.task-detail-grid span { color:#6b7890; font-size:12px; }
.task-detail-grid strong { margin-top:5px; color:#172a48; font-size:13px; overflow-wrap:anywhere; }
.delivery-files { margin-top:16px; }
.delivery-files h3 { margin:0 0 10px; font-size:15px; }
.delivery-files-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.delivery-files-head h3 { margin:0; }
.download-all-button { padding:8px 11px; color:#fff; background:#285dff; border-radius:7px; text-decoration:none; font-size:13px; font-weight:800; white-space:nowrap; }
.delivery-file-list { display:grid; gap:8px; }
.delivery-file { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 13px; border:1px solid #e1e9f5; border-radius:8px; background:#fff; }
.delivery-file strong,.delivery-file span,.delivery-file small { display:block; }
.delivery-file span,.delivery-file small { margin-top:4px; color:#738097; font-size:12px; white-space:pre-wrap; }
.delivery-file a { padding:8px 11px; color:#fff; background:#285dff; border-radius:7px; text-decoration:none; font-size:13px; font-weight:800; }
.task-event-list { display:grid; gap:9px; }
.task-event { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; padding:12px 13px; border:1px solid #e1e9f5; border-radius:8px; background:#fff; }
.task-event-dot { width:18px; height:18px; margin-top:2px; border-radius:50%; background:conic-gradient(#285dff var(--progress,0%), #dfe8f5 0); border:3px solid #fff; box-shadow:0 0 0 1px #ccd9ec; }
.task-event strong,.task-event span,.task-event small { display:block; }
.task-event strong { color:#172a48; font-size:13px; }
.task-event span { margin-top:4px; color:#53627a; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.task-event small { margin-top:5px; color:#7b879a; font-size:11px; }
@media(max-width:640px) {
  .points-transaction { grid-template-columns:1fr auto; }
  .points-transaction time { grid-column:1 / -1; }
  .detail-title-row { display:block; }
  .detail-stats,.detail-grid { grid-template-columns:1fr; }
  .detail-list { grid-template-columns:1fr; }
  .recharge-form { grid-template-columns:1fr; }
  .task-detail-grid { grid-template-columns:1fr; }
  .delivery-files-head { align-items:flex-start; flex-direction:column; }
  .delivery-file { align-items:flex-start; flex-direction:column; }
}

/* Workspace refresh: quiet neutral UI inspired by the supplied references. */
.site-header {
  min-height: 64px;
  padding: 0 28px;
  color: #28313d;
  background: #fff;
  border-bottom: 1px solid #e8eaee;
  box-shadow: 0 2px 12px rgba(31, 41, 55, .04);
}

.brand {
  gap: 10px;
  min-width: 190px;
  color: #202832;
  font-size: 19px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  color: #fff;
  background: #56616d;
  border-radius: 50%;
  font-size: 15px;
}

.top-nav {
  gap: 4px;
}

.top-nav a {
  padding: 9px 13px;
  color: #727b87;
  border-radius: 6px;
  font-size: 14px;
}

.top-nav a.active,
.top-nav a:hover {
  color: #2f3742;
  background: #f1f2f4;
}

.header-action {
  min-height: 36px;
  padding: 0 12px;
  color: #4c5662;
  border-color: #e2e5e9;
  background: #fafbfc;
  font-size: 13px;
}

.app-shell {
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
  background: #f7f8fa;
}

.side-nav {
  top: 64px;
  height: calc(100vh - 64px);
  color: #5e6874;
  background: #fff;
  border-right: 1px solid #e7e9ed;
}

.side-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 15px 18px;
  color: #202832;
  border-bottom: 1px solid #eef0f2;
}

.side-title-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: #626c77;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

.side-title strong,
.side-title small {
  display: block;
}

.side-title strong {
  font-size: 14px;
  line-height: 1.2;
}

.side-title small {
  margin-top: 3px;
  color: #99a1ab;
  font-size: 11px;
  font-weight: 700;
}

.nav-group {
  gap: 3px;
  padding: 18px 11px 10px;
}

.nav-group p {
  margin: 0 0 8px 10px;
  color: #a0a7b0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-item {
  position: relative;
  min-height: 41px;
  padding: 0 10px;
  color: #66717d;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  color: #87919c;
  stroke-width: 1.8;
}

.nav-item:hover,
.nav-item.active {
  color: #2d3640;
  background: #f3f4f5;
  border-color: #e3e6e9;
}

.nav-item.active::before {
  position: absolute;
  left: -1px;
  width: 2px;
  height: 18px;
  border-radius: 2px;
  background: #69737e;
  content: "";
}

.nav-item.active svg,
.nav-item:hover svg {
  color: #66717d;
}

.nav-item-badge {
  margin-left: auto;
  padding: 3px 5px;
  color: #707982;
  background: #eef0f2;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.side-nav-foot {
  display: grid;
  gap: 10px;
  margin: 15px 17px 0;
  padding-top: 15px;
  border-top: 1px solid #eef0f2;
}

.side-nav-foot a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #68727d;
  font-size: 12px;
  font-weight: 800;
}

.side-nav-foot a svg {
  width: 15px;
  height: 15px;
  color: #87919c;
}

.side-nav-foot small {
  color: #a1a8b1;
  font-size: 11px;
  line-height: 1.6;
}

.work-area {
  min-width: 0;
  padding: 42px 46px 70px;
  background: #f7f8fa;
}

.workspace-hub,
.workspace-editor,
.library-view {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.workspace-hub-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 27px;
}

.workspace-hub-head h1,
.library-head h1 {
  margin: 0;
  color: #252d37;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.04em;
}

.workspace-hub-head p:not(.eyebrow),
.library-head p:not(.eyebrow) {
  max-width: 610px;
  margin: 11px 0 0;
  color: #89929d;
  font-size: 14px;
  line-height: 1.75;
}

.workspace-hub .eyebrow,
.library-view .eyebrow {
  color: #8a949f;
  font-size: 11px;
  letter-spacing: .14em;
}

.workspace-hub-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 11px;
  color: #737d88;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.workspace-hub-account svg {
  width: 15px;
  height: 15px;
  color: #7d8792;
}

/* The selected service keeps its setup fields in the second rail and shows progress in the third column. */
.workspace-progress-panel {
  width: 100%;
  min-height: calc(100vh - 64px);
  margin: 0;
  padding: 42px clamp(24px, 4vw, 60px) 70px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workspace-progress-panel .section-head {
  align-items: flex-start;
}

.workspace-progress-panel .section-head h2 {
  margin-top: 4px;
  color: #252d37;
  font-size: 24px;
}

.workspace-progress-panel .section-head p:last-child {
  max-width: 520px;
  color: #89929d;
}

.workspace-progress-panel .stage-card {
  border-color: #e4e7eb;
}

.workspace-progress-panel .stage-header {
  border-bottom-color: #e4e7eb;
}

.workspace-progress-panel .stage-header strong {
  color: #5f6b76;
}

.workspace-progress-panel .stage-card pre {
  color: #7d8791;
  background: #f8f9fa;
}

.usage-guide {
  margin: 0 0 28px;
  padding-top: 0;
  border-top: 0;
}

.usage-guide h3,
.task-list-heading h3 {
  margin: 0;
  color: #303a45;
  font-size: 16px;
}

.usage-steps {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.usage-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid #eef0f2;
}

.usage-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  color: #59636e;
  background: #eef0f2;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.usage-step strong {
  display: block;
  color: #3f4851;
  font-size: 14px;
  line-height: 1.5;
}

.usage-step p,
.usage-step ul,
.usage-faq p {
  margin: 5px 0 0;
  color: #89929d;
  font-size: 13px;
  line-height: 1.7;
}

.usage-step ul {
  padding-left: 17px;
}

.usage-step li + li {
  margin-top: 3px;
}

.usage-faq {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #eceef1;
}

.usage-faq p + p {
  margin-top: 14px;
}

.usage-faq p strong {
  color: #515b66;
}

.task-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}

.task-list-heading span {
  color: #a0a8b1;
  font-size: 12px;
}

.task-progress {
  display: grid;
  gap: 6px;
  margin: 4px 0 1px;
}

.task-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #68737e;
  font-size: 12px;
  font-weight: 800;
}

.task-progress-meta b {
  color: #7d8791;
  font-size: 12px;
}

.task-progress-actions {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.task-progress-actions .task-download-button {
  white-space: nowrap;
}

.task-progress-track {
  height: 7px;
  overflow: hidden;
  background: #e9ecef;
  border-radius: 999px;
}

.task-progress-track span {
  display: block;
  height: 100%;
  background: #7d8791;
  border-radius: inherit;
  transition: width .35s ease;
}

.task-progress-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.task-progress-step {
  position: relative;
  min-width: 0;
  padding-top: 16px;
  color: #a0a8b1;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.task-progress-step::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 8px;
  height: 8px;
  background: #e3e7ea;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9dee3;
  content: "";
  transform: translateX(-50%);
}

.task-progress-step:not(:last-child)::after {
  position: absolute;
  top: 3px;
  left: calc(50% + 6px);
  width: calc(100% - 12px);
  height: 2px;
  background: #e3e7ea;
  content: "";
}

.task-progress-step.is-complete,
.task-progress-step.is-current {
  color: #68737e;
  font-weight: 800;
}

.task-progress-step.is-complete::before,
.task-progress-step.is-current::before {
  background: #7d8791;
  box-shadow: 0 0 0 1px #7d8791;
}

.task-progress-step.is-complete:not(:last-child)::after {
  background: #aeb6bd;
}

.task-progress small {
  color: #9aa3ad;
  font-size: 11px;
  line-height: 1.5;
}

.outline-panel {
  display: grid;
  gap: 16px;
  grid-column: 1;
  margin: 0;
  padding: 22px;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 10px;
}

.outline-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.outline-panel-head h3 {
  margin: 0;
  color: #303a45;
  font-size: 18px;
}

.outline-panel-head p {
  max-width: 720px;
  margin: 7px 0 0;
  color: #89929d;
  font-size: 13px;
  line-height: 1.7;
}

.outline-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #68737e;
  background: #f1f3f4;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.outline-panel textarea {
  width: 100%;
  min-height: 280px;
  padding: 14px;
  color: #3f4851;
  background: #fbfcfd;
  border: 1px solid #dfe4e8;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
}

.service-context > .workspace-editor .outline-panel {
  width: 100%;
}

.outline-panel textarea:focus {
  outline: 0;
  border-color: #aeb8c0;
  box-shadow: 0 0 0 3px rgba(125, 135, 145, .12);
}

.outline-panel textarea:disabled {
  opacity: .65;
  cursor: default;
}

.outline-actions {
  display: flex;
  gap: 10px;
}

.outline-actions .primary-button,
.outline-actions .ghost-button {
  min-width: 120px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 14px;
}

.outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  min-height: 56px;
  padding: 0 24px;
  color: #52606d;
  background: #f1f3f4;
  border: 1px solid #d7dde1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 800;
}

.outline-button:hover {
  background: #e9edef;
  border-color: #bfc8ce;
}

.outline-button:disabled {
  opacity: .65;
  cursor: default;
}

.workspace-service-card {
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.workspace-service-card:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(38, 50, 65, .08);
}

.workspace-service-card:focus-visible,
.nav-item:focus-visible,
.personal-nav-item:focus-visible,
.personal-tab:focus-visible,
.workspace-back-button:focus-visible,
.support-dialog-close:focus-visible {
  outline: 3px solid rgba(105, 115, 126, .2);
  outline-offset: 2px;
}

.upcoming-card {
  color: #8d969f;
  background: #f8f9fa;
  border-style: dashed;
  cursor: not-allowed;
  opacity: .78;
}

.upcoming-card .service-card-icon,
.upcoming-card .service-card-arrow {
  color: #a7afb7;
}

.upcoming-card:hover {
  transform: none;
  box-shadow: none;
}

.support-dialog {
  width: min(410px, calc(100% - 32px));
  padding: 0;
  color: #252d37;
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(26, 37, 51, .22);
}

.support-dialog::backdrop {
  background: rgba(30, 38, 48, .38);
  backdrop-filter: blur(3px);
}

.support-dialog-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 28px 28px 25px;
  background: #fff;
  border: 1px solid #e4e8ed;
  border-radius: 16px;
  text-align: center;
}

.support-dialog-card .eyebrow {
  margin: 0;
  color: #89929d;
  font-size: 10px;
  letter-spacing: .14em;
}

.support-dialog-card h2 {
  margin: 0;
  color: #252d37;
  font-size: 22px;
}

.support-dialog-card p:not(.eyebrow) {
  margin: 0 0 5px;
  color: #89929d;
  font-size: 13px;
  line-height: 1.7;
}

.support-dialog-card img {
  display: block;
  width: min(290px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid #edf0f3;
  border-radius: 8px;
}

.support-dialog-card small {
  color: #a0a8b1;
  font-size: 11px;
}

.support-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #7d8792;
  background: #f5f6f7;
  border: 1px solid #e5e8eb;
  border-radius: 50%;
  cursor: pointer;
}

.support-dialog-close svg {
  width: 15px;
  height: 15px;
}

.generation-confirm-dialog {
  width: min(430px, calc(100% - 32px));
}

.generation-confirm-card {
  justify-items: stretch;
  gap: 12px;
  padding: 28px 30px 25px;
  text-align: left;
}

.generation-confirm-card h2 {
  text-align: center;
}

.generation-confirm-card p:not(.eyebrow) {
  margin: 0;
}

.generation-confirm-card p strong {
  color: #2d6cdf;
  font-size: 20px;
}

.generation-confirm-warning {
  padding: 11px 13px;
  color: #68737f !important;
  background: #f6f8fa;
  border-radius: 7px;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

.generation-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 5px;
}

.generation-confirm-actions button {
  min-width: 96px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.generation-confirm-actions .ghost-button {
  color: #66717d;
  background: #f3f5f7;
  border: 1px solid #dde2e7;
}

.generation-confirm-actions .primary-button {
  color: #fff;
  background: #536f96;
  border: 1px solid #536f96;
}

.generation-confirm-actions button:hover {
  filter: brightness(.97);
}

.view-panel.active-view,
.service-context:not([hidden]),
.workspace-progress-panel:not([hidden]),
.workspace-hub:not([hidden]),
.workspace-editor:not([hidden]),
.library-view:not([hidden]) {
  animation: simuwrite-view-enter .28s ease both;
}

.service-context.is-view-leaving,
.workspace-progress-panel.is-view-leaving,
.workspace-hub.is-view-leaving,
.workspace-editor.is-view-leaving,
.library-view.is-view-leaving {
  pointer-events: none;
  animation: simuwrite-view-exit .28s ease both;
}

.support-dialog[open] .support-dialog-card {
  animation: simuwrite-dialog-enter .28s ease both;
}

@keyframes simuwrite-view-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes simuwrite-view-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-7px); }
}

@keyframes simuwrite-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.workspace-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workspace-service-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 13px;
  min-height: 108px;
  padding: 19px 17px;
  color: #313a45;
  text-align: left;
  background: #fff;
  border: 1px solid #e5e8ec;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(42, 50, 61, .035);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.workspace-service-card:hover,
.workspace-service-card:focus-visible {
  border-color: #bfc6ce;
  box-shadow: 0 11px 25px rgba(42, 50, 61, .09);
  outline: none;
  transform: translateY(-2px);
}

.workspace-service-card.featured {
  border-color: #c7cdd4;
}

.service-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #707b86;
  background: #f0f2f4;
  border-radius: 6px;
}

.service-card-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

.service-card-copy,
.service-card-copy strong,
.service-card-copy small {
  min-width: 0;
  display: block;
}

.service-card-copy strong {
  color: #29323c;
  font-size: 15px;
}

.service-card-copy small {
  margin-top: 6px;
  overflow: hidden;
  color: #929ba5;
  font-size: 11px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-card-arrow {
  width: 16px;
  height: 16px;
  color: #abb2ba;
}

.service-card-tag {
  position: absolute;
  top: 10px;
  right: 34px;
  padding: 3px 5px;
  color: #7a838d;
  background: #f0f2f4;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
}

.workspace-editor {
  padding: 23px 26px 30px;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  box-shadow: 0 9px 26px rgba(42, 50, 61, .05);
}

.workspace-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 14px;
  margin-bottom: 10px;
}

.workspace-back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #69737e;
  background: #f2f3f5;
  border: 1px solid #e5e7ea;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.workspace-back-button:hover {
  color: #303944;
  background: #e9ebee;
}

.workspace-back-button svg {
  width: 15px;
  height: 15px;
}

.workspace-editor-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a0a7b0;
  font-size: 12px;
}

.workspace-editor-note svg {
  width: 14px;
  height: 14px;
}

.workspace-editor .panel-title {
  display: block;
  padding: 10px 0 21px;
  text-align: left;
  border-bottom-color: #eceef1;
}

.workspace-editor .panel-title h1 {
  color: #252d37;
  font-size: 26px;
}

.workspace-editor .panel-title p:last-child {
  max-width: 700px;
  margin-left: 0;
  color: #8c959f;
  font-size: 13px;
  line-height: 1.7;
}

.workspace-editor .eyebrow {
  color: #929ba5;
}

.workspace-editor label {
  color: #515b66;
  font-size: 13px;
}

.workspace-editor input,
.workspace-editor select,
.workspace-editor textarea {
  color: #35404c;
  border-color: #dfe3e7;
  border-radius: 6px;
  box-shadow: none;
}

.workspace-editor input:focus,
.workspace-editor select:focus,
.workspace-editor textarea:focus {
  border-color: #9ba4ae;
  box-shadow: 0 0 0 3px rgba(113, 124, 136, .11);
}

.workspace-editor input::placeholder,
.workspace-editor textarea::placeholder {
  color: #adb5bd;
}

.workspace-editor .upload-box {
  min-height: 138px;
  background: #fafbfc;
  border-color: #d9dee3;
  border-radius: 6px;
}

.workspace-editor .upload-box:hover {
  background: #f6f7f8;
  border-color: #aab3bc;
}

.workspace-editor .upload-box strong,
.workspace-editor .upload-box svg {
  color: #75808b;
}

.workspace-editor .primary-button {
  color: #fff;
  background: #5e6874;
  box-shadow: 0 8px 18px rgba(71, 80, 91, .14);
}

.workspace-editor .primary-button:hover {
  background: #4b5662;
}

.workspace-editor .ghost-button {
  color: #626d78;
  background: #f0f2f4;
  border-color: #e0e4e8;
}

.library-view {
  padding: 3px 0 20px;
}

.library-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.library-head .workspace-back-button {
  margin-bottom: 28px;
}

.library-access-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 13px 15px;
  color: #6f7984;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 7px;
}

.library-access-card > svg {
  width: 20px;
  height: 20px;
  color: #7d8791;
}

.library-access-card strong,
.library-access-card span {
  display: block;
}

.library-access-card strong {
  color: #3a444f;
  font-size: 13px;
}

.library-access-card span {
  margin-top: 4px;
  color: #9aa2ab;
  font-size: 11px;
}

.library-notice {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 12px 14px;
  color: #77818b;
  background: #f0f2f4;
  border: 1px solid #e2e5e8;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  transition: background .18s ease, border-color .18s ease;
}

.library-notice svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #7c8791;
}

.library-notice.is-highlighted {
  background: #e8ebee;
  border-color: #bfc6cd;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.library-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 13px;
  min-height: 154px;
  padding: 19px;
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(42, 50, 61, .03);
}

.library-item-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #737e89;
  background: #f1f3f5;
  border-radius: 6px;
}

.library-item-icon svg {
  width: 19px;
  height: 19px;
}

.library-item-type {
  color: #9aa2ab;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.library-item h2 {
  margin: 7px 0 0;
  color: #333d48;
  font-size: 15px;
}

.library-item p {
  margin: 7px 0 0;
  color: #929ba5;
  font-size: 12px;
  line-height: 1.65;
}

.library-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: end;
  padding: 7px 9px;
  color: #747e88;
  background: #f1f3f5;
  border: 1px solid #e3e6e9;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.library-download:hover {
  color: #3d4752;
  background: #e9ecef;
}

.library-download svg {
  width: 13px;
  height: 13px;
}

.library-item-previews {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.library-preview-thumb {
  width: 88px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  background: #f4f6f8;
  border: 1px solid #dfe4e9;
  border-radius: 6px;
  cursor: zoom-in;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.library-preview-thumb:hover {
  border-color: #9ca7b2;
  box-shadow: 0 4px 12px rgba(42, 50, 61, .1);
  transform: translateY(-1px);
}

.library-preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-preview-dialog .library-preview-card {
  width: min(1240px, calc(100vw - 48px));
  max-width: 1240px;
  padding: 30px 32px 24px;
}

.library-preview-card > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 190px);
  margin: 16px auto 10px;
  object-fit: contain;
  background: #f5f6f7;
  border: 1px solid #e2e7ec;
  border-radius: 8px;
}

.library-preview-dialog {
  width: min(1280px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

.library-preview-card > p:last-child {
  margin: 0;
  color: #7c8792;
  font-size: 12px;
}

@media (max-width: 1160px) {
  .work-area { padding: 34px 30px 60px; }
  .workspace-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .site-header { min-height: 60px; }
  .app-shell { min-height: calc(100vh - 60px); }
  .side-nav { top: 60px; height: auto; }
  .side-title { display: flex; min-width: 170px; border-bottom: 0; }
  .nav-group-main { display: flex; align-items: center; overflow-x: auto; }
  .nav-group-main p { display: none; }
  .nav-item { min-width: max-content; }
  .side-nav-foot { display: none; }
  .workspace-hub-head,
  .library-head { display: block; }
  .workspace-hub-account,
  .library-access-card { margin-top: 17px; }
}

@media (max-width: 620px) {
  .site-header { padding: 0 15px; }
  .brand { min-width: auto; font-size: 17px; }
  .top-nav { display: none; }
  .work-area { padding: 25px 15px 44px; }
  .workspace-service-grid,
  .library-grid { grid-template-columns: 1fr; }
  .workspace-service-card { min-height: 95px; }
  .workspace-editor { padding: 17px 15px 23px; }
  .workspace-editor-head { align-items: flex-start; flex-direction: column; }
  .workspace-editor .panel-title h1 { font-size: 23px; }
  .library-head .workspace-back-button { margin-bottom: 22px; }
  .library-item { grid-template-columns: 40px minmax(0, 1fr); }
  .library-download { grid-column: 2; justify-self: start; }
}

/* Two-column workspace rail: all tools on the left, personal functions at the lower-left. */
.site-header {
  justify-content: flex-start;
}

.site-header .header-actions {
  margin-left: auto;
}

.app-shell {
  grid-template-columns: 390px minmax(0, 1fr);
}

.side-nav {
  display: grid;
  grid-template-columns: minmax(0, 224px) minmax(150px, 166px);
  align-items: stretch;
  overflow: hidden;
}

.side-column {
  min-width: 0;
  min-height: 100%;
}

.side-all-column {
  border-right: 1px solid #eef0f2;
}

.side-my-column {
  display: flex;
  flex-direction: column;
  padding: 0 12px 20px;
}

.side-my-panel {
  margin-top: auto;
}

.side-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 8px;
  color: #4d5864;
  border-bottom: 1px solid #eef0f2;
  font-size: 13px;
}

.side-section-title svg {
  width: 15px;
  height: 15px;
  color: #7f8994;
}

.personal-nav-group {
  gap: 3px;
  padding: 10px 0 15px;
}

.personal-nav-group .nav-item {
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

.personal-nav-group .nav-item svg {
  width: 15px;
  height: 15px;
}

.side-my-column .side-nav-foot {
  display: grid;
  margin: 0;
  padding: 15px 8px 0;
}

body.is-personal-surface .app-shell {
  display: grid !important;
  grid-template-columns: 390px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: calc(100vh - 64px);
}

body.is-personal-surface .side-nav {
  display: grid !important;
  grid-column: 1;
  grid-row: 1;
}

body.is-personal-surface .personal-page {
  display: block !important;
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  min-width: 0;
  padding: 32px 34px 70px !important;
}

body.is-personal-surface .personal-hero {
  padding: 28px 0 0;
}

body.is-personal-surface .personal-grid {
  width: 100%;
  max-width: 1080px;
  margin: 25px auto 0;
  grid-template-columns: 1fr !important;
}

body.is-personal-surface .personal-tabs {
  display: none !important;
}

body.is-personal-surface .personal-content {
  padding: 25px;
}

@media (max-width: 1100px) {
  .app-shell,
  body.is-personal-surface .app-shell {
    grid-template-columns: 342px minmax(0, 1fr) !important;
  }

  .side-nav,
  body.is-personal-surface .side-nav {
    grid-template-columns: minmax(0, 204px) minmax(130px, 138px);
  }
}

/* The third column becomes a true full-bleed work surface while a service is open. */
.work-area.is-editor-surface {
  padding: 0;
}

.work-area.is-editor-surface .workspace-progress-panel {
  min-height: calc(100vh - 64px);
}

.service-context > .workspace-editor .outline-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: 12px;
}

@media (max-width: 860px) {
  .work-area.is-editor-surface .workspace-progress-panel {
    min-height: calc(100vh - 60px);
    padding: 30px 20px 50px;
  }

  .outline-panel-head {
    flex-direction: column;
  }

  .outline-actions {
    flex-direction: column;
  }

  .outline-actions .primary-button,
  .outline-actions .ghost-button {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .app-shell,
  body.is-personal-surface .app-shell {
    display: block !important;
    min-height: 0;
  }

  .side-nav,
  body.is-personal-surface .side-nav {
    display: grid !important;
    position: static;
    grid-template-columns: minmax(0, 1.25fr) minmax(150px, .85fr);
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .side-all-column,
  .side-my-column {
    min-height: 0;
  }

  .side-my-column {
    padding-bottom: 14px;
  }

  .side-my-panel {
    margin-top: 0;
  }

  body.is-personal-surface .personal-page {
    width: 100% !important;
    padding: 28px 20px 60px !important;
  }

  body.is-personal-surface .personal-hero {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .side-nav,
  body.is-personal-surface .side-nav {
    grid-template-columns: minmax(0, 1.15fr) minmax(135px, .85fr);
  }

  .side-title {
    min-height: 64px;
    padding: 12px;
  }

  .side-title-mark {
    width: 28px;
    height: 28px;
  }

  .nav-group-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .nav-item {
    min-height: 38px;
    padding: 0 8px;
    font-size: 12px;
  }

  .side-my-column {
    padding-left: 8px;
    padding-right: 8px;
  }

  .side-section-title {
    padding: 0 5px;
  }

  .personal-nav-group .nav-item {
    padding: 0 5px;
    font-size: 11px;
  }
}

/* Keep the personal surface beside the two-column rail on desktop. */
body.is-personal-surface .marketing-site.app-open ~ .app-shell {
  display: grid !important;
  grid-template-columns: 390px minmax(0, 1fr) !important;
}

@media (max-width: 1100px) {
  body.is-personal-surface .marketing-site.app-open ~ .app-shell {
    grid-template-columns: 342px minmax(0, 1fr) !important;
  }
}

@media (max-width: 860px) {
  body.is-personal-surface .marketing-site.app-open ~ .app-shell {
    display: block !important;
  }
}

/* The first rail owns both all tools and personal tools; the second rail shows the selected service options. */
.side-all-column {
  display: flex;
  flex-direction: column;
}

.nav-group-personal {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eef0f2;
}

.side-all-column > .side-nav-foot {
  margin-top: 0;
}

.side-context-column {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  background: #fbfcfd;
}

.service-context {
  padding: 24px 12px 20px;
}

.service-context .side-section-title {
  min-height: 38px;
  padding: 0 6px 10px;
}

.service-context-note {
  margin: 12px 6px 14px;
  color: #9aa3ad;
  font-size: 11px;
  line-height: 1.6;
}

.service-context-options {
  display: grid;
  gap: 7px;
}

.service-context-option {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 11px 10px;
  color: #68737e;
  text-align: left;
  background: #f1f3f5;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.service-context-option:hover,
.service-context-option.active {
  color: #303a45;
  background: #fff;
  border-color: #cfd5db;
  box-shadow: 0 4px 12px rgba(42, 50, 61, .05);
}

.service-context-option strong {
  font-size: 12px;
}

.service-context-option small {
  display: -webkit-box;
  overflow: hidden;
  color: #9aa3ad;
  font-size: 10px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.service-context-option.active small,
.service-context-option:hover small {
  color: #818b96;
}

@media (max-width: 860px) {
  .nav-group-personal {
    margin-top: 0;
  }

  .service-context {
    padding-top: 17px;
  }
}

/* The second rail contains the real project controls, not a separate method picker. */
.app-shell {
  grid-template-columns: 430px minmax(0, 1fr);
}

.side-nav {
  grid-template-columns: minmax(0, 224px) minmax(0, 206px);
}

body.is-personal-surface .marketing-site.app-open ~ .app-shell {
  grid-template-columns: 430px minmax(0, 1fr) !important;
}

.service-context-fields {
  display: grid;
  gap: 12px;
}

.service-context-fields .form-row {
  display: grid;
  gap: 6px;
}

.service-context-fields label {
  color: #59636e;
  font-size: 12px;
  font-weight: 800;
}

.service-context-fields input,
.service-context-fields select,
.service-context-fields textarea {
  min-height: 38px;
  padding: 0 9px;
  color: #35404c;
  background: #fff;
  border: 1px solid #dfe3e7;
  border-radius: 6px;
  box-shadow: none;
  font-size: 12px;
}

.service-context-fields textarea {
  min-height: 80px;
  padding: 8px;
}

.service-context-fields .hint,
.service-context-fields .counter {
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .app-shell,
  body.is-personal-surface .app-shell,
  body.is-personal-surface .marketing-site.app-open ~ .app-shell {
    grid-template-columns: 380px minmax(0, 1fr) !important;
  }

  .side-nav,
  body.is-personal-surface .side-nav {
    grid-template-columns: minmax(0, 204px) minmax(0, 176px);
  }
}

@media (max-width: 860px) {
  .side-nav,
  body.is-personal-surface .side-nav {
    grid-template-columns: minmax(0, 1.25fr) minmax(150px, .85fr);
  }
}

@media (max-width: 560px) {
  .side-nav,
  body.is-personal-surface .side-nav {
    grid-template-columns: minmax(0, 1.15fr) minmax(135px, .85fr);
  }
}

/* Keep the title and uploads with the rest of the left-side project setup. */
.service-context-fields .upload-box {
  min-height: 104px;
  padding: 14px 8px;
  gap: 6px;
  color: #8b949e;
  background: #fff;
  border-color: #d9dee3;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.45;
}

.service-context-fields .upload-box svg {
  width: 23px;
  height: 23px;
  color: #7d8791;
}

.service-context-fields .upload-box strong {
  color: #65707b;
}

.service-context-fields .upload-box small {
  max-width: 170px;
  color: #a0a8b0;
  font-size: 10px;
  line-height: 1.4;
}

.service-context-fields .file-list {
  margin-top: 6px;
  padding-left: 15px;
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(260px, 1.45fr) minmax(150px, .75fr) minmax(290px, 1.6fr);
  align-items: start;
  gap: 30px;
  width: 100%;
  padding: 40px clamp(30px, 6vw, 96px) 18px;
  color: #6f7e94;
  background: #fff;
  border-top: 1px solid #e4eaf2;
}

.marketing-site.app-open ~ .site-footer {
  display: grid;
}

.footer-brand,
.footer-column {
  min-width: 0;
}

.footer-brand strong {
  display: block;
  color: #172743;
  font-size: 17px;
}

.footer-brand p,
.footer-brand small,
.footer-column p {
  display: block;
  margin: 10px 0 0;
  color: #73829a;
  font-size: 12px;
  line-height: 1.8;
}

.footer-brand small {
  margin-top: 20px;
  color: #9aa7ba;
}

.footer-column h3 {
  margin: 0 0 12px;
  color: #172743;
  font-size: 13px;
}

.footer-column p {
  margin-top: 6px;
}

.footer-column a {
  color: #73829a;
  text-decoration: none;
}

.footer-column a:hover {
  color: #2f63ff;
}

.footer-bottom {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  color: #9aa7ba;
  border-top: 1px solid #edf0f4;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 20px 16px;
  }

  .footer-bottom {
    display: grid;
    gap: 4px;
  }
}

/* The workspace home only needs the all-tools rail; a selected service expands the second rail. */
.app-shell:not(.has-context-column) {
  grid-template-columns: 224px minmax(0, 1fr);
}

.app-shell.has-context-column {
  grid-template-columns: 877px minmax(0, 1fr);
}

.side-nav:not(.has-context-column) {
  grid-template-columns: minmax(0, 1fr);
}

.side-nav:not(.has-context-column) .side-context-column {
  display: none;
}

.side-nav.has-context-column {
  grid-template-columns: minmax(0, 224px) minmax(0, 653px);
}

.side-nav.has-context-column .side-context-column {
  display: block;
}

.service-context > .workspace-editor {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
}

.service-context > .workspace-editor .workspace-editor-head,
.service-context > .workspace-editor .panel-title,
.service-context > .workspace-editor .button-row {
  grid-column: 1;
}

.service-context > .workspace-editor .workspace-editor-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.service-context > .workspace-editor .panel-title {
  padding-bottom: 16px;
  text-align: left;
}

.service-context > .workspace-editor .panel-title h1 {
  font-size: 22px;
}

.service-context > .workspace-editor .panel-title p:last-child {
  font-size: 11px;
  line-height: 1.55;
}

.service-context > .workspace-editor .button-row {
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.service-context > .workspace-editor .primary-button,
.service-context > .workspace-editor .ghost-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .app-shell.has-context-column {
    grid-template-columns: 755px minmax(0, 1fr) !important;
  }

  .app-shell:not(.has-context-column) {
    grid-template-columns: 204px minmax(0, 1fr) !important;
  }

  .side-nav.has-context-column {
    grid-template-columns: minmax(0, 204px) minmax(0, 551px);
  }

  .side-nav:not(.has-context-column) {
    grid-template-columns: minmax(0, 204px);
  }
}

@media (max-width: 860px) {
  .app-shell.has-context-column,
  .app-shell:not(.has-context-column) {
    grid-template-columns: 1fr !important;
  }

  .side-nav.has-context-column,
  .side-nav:not(.has-context-column) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.utility-parameter-panel {
  margin: 0 0 28px;
  padding: 22px 24px;
  border: 1px solid #e4e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(42, 50, 61, 0.05);
}

.utility-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.utility-panel-head h3 {
  margin: 0;
  color: #303a45;
  font-size: 21px;
}

.utility-panel-head p:not(.eyebrow) {
  margin: 7px 0 0;
  color: #89929d;
  font-size: 13px;
  line-height: 1.65;
}

.utility-panel-head > span {
  flex: 0 0 auto;
  max-width: 240px;
  padding: 7px 10px;
  color: #68737f;
  border: 1px solid #e2e6ea;
  border-radius: 999px;
  background: #f8f9fa;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.utility-tool-picker,
.utility-param-item {
  display: grid;
  gap: 7px;
  color: #59636e;
  font-size: 12px;
  font-weight: 800;
}

.utility-tool-picker {
  max-width: 360px;
}

.utility-tool-picker select,
.utility-param-item input,
.utility-param-item select {
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;
  padding: 0 10px;
  color: #35404c;
  border: 1px solid #dfe3e7;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.utility-param-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.utility-param-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  color: #7e8995;
  border: 1px dashed #d7dde2;
  border-radius: 6px;
  background: #f8f9fa;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .utility-param-fields {
    grid-template-columns: 1fr;
  }
}

/* Refined landing page: calm engineering palette, real project evidence, and restrained motion. */
.marketing-refresh {
  --landing-paper: #f4f7fa;
  --landing-white: #ffffff;
  --landing-ink: #24384e;
  --landing-muted: #738298;
  --landing-blue: #536f91;
  --landing-line: #dce4ec;
  color: var(--landing-ink);
  background: var(--landing-paper);
}

.marketing-refresh .marketing-header {
  height: 72px;
  color: var(--landing-ink);
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(54, 78, 105, .12);
}

.marketing-refresh .marketing-brand {
  gap: 10px;
  color: var(--landing-ink);
  font-size: 18px;
  letter-spacing: 0;
}

.marketing-refresh .marketing-brand > span {
  width: 31px;
  height: 31px;
  color: #fff;
  background: var(--landing-blue);
  border-radius: 8px;
  font-size: 14px;
}

.marketing-refresh .marketing-brand strong {
  font-weight: 800;
}

.marketing-refresh .marketing-header nav a,
.marketing-refresh .marketing-login {
  color: #68788d;
}

.marketing-refresh .marketing-header nav a:hover,
.marketing-refresh .marketing-login:hover {
  color: var(--landing-blue);
}

.marketing-refresh .marketing-header-cta,
.marketing-refresh .primary-cta {
  color: #fff;
  background: var(--landing-blue);
  box-shadow: 0 10px 22px rgba(68, 95, 126, .2);
}

.marketing-refresh .hero-section {
  min-height: min(720px, calc(100vh - 72px));
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  padding: 76px clamp(24px, 9vw, 150px) 86px;
  color: var(--landing-ink);
  background:
    radial-gradient(circle at 77% 45%, rgba(177, 203, 226, .34), transparent 27%),
    linear-gradient(135deg, #f7f9fb 0%, #eef3f7 100%);
}

.marketing-refresh .hero-grid {
  opacity: .34;
  background-image:
    linear-gradient(rgba(84, 111, 145, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 111, 145, .075) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 82%, transparent);
}

.marketing-refresh .hero-orbit {
  border-color: rgba(83, 111, 145, .14);
}

.marketing-refresh .orbit-one {
  width: 720px;
  height: 720px;
  right: -255px;
  top: -170px;
}

.marketing-refresh .orbit-two {
  width: 480px;
  height: 480px;
  right: -106px;
  top: 40px;
  border-style: solid;
  border-color: rgba(83, 111, 145, .1);
}

.marketing-refresh .hero-copy,
.marketing-refresh .hero-visual {
  z-index: 2;
}

.marketing-refresh .hero-copy {
  max-width: 580px;
}

.marketing-refresh .hero-kicker,
.marketing-refresh .section-label {
  color: var(--landing-blue);
}

.marketing-refresh .hero-kicker {
  margin-bottom: 23px;
  font-size: 12px;
  letter-spacing: 1px;
}

.marketing-refresh .hero-kicker span {
  width: 23px;
  height: 2px;
  background: var(--landing-blue);
}

.marketing-refresh .hero-copy h1 {
  max-width: 560px;
  color: var(--landing-ink);
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.18;
  letter-spacing: -2px;
}

.marketing-refresh .hero-copy h1 strong {
  color: #4e6f93;
}

.marketing-refresh .hero-actions {
  margin-top: 33px;
}

.marketing-refresh .text-cta,
.marketing-refresh .line-cta {
  color: var(--landing-blue);
}

.marketing-refresh .proof-row {
  gap: 18px;
  margin-top: 50px;
  color: #68788d;
}

.marketing-refresh .proof-row span {
  white-space: nowrap;
}

.marketing-refresh .proof-row b {
  color: var(--landing-blue);
}

.marketing-refresh .hero-visual {
  display: grid;
  place-items: center;
  height: auto;
  min-height: 500px;
}

.marketing-refresh .hero-network {
  position: relative;
  width: min(540px, 100%);
  aspect-ratio: 1;
  margin: auto;
}

.marketing-refresh .network-aura,
.marketing-refresh .network-links {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.marketing-refresh .network-aura {
  border: 1px solid rgba(83, 111, 145, .2);
}

.marketing-refresh .aura-one {
  inset: 8%;
  animation: landing-orbit 28s linear infinite;
}

.marketing-refresh .aura-two {
  inset: 20%;
  border-style: dashed;
  border-color: rgba(83, 111, 145, .23);
  animation: landing-orbit-reverse 22s linear infinite;
}

.marketing-refresh .network-links {
  inset: 25%;
  border: 1px solid rgba(83, 111, 145, .14);
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .25), 0 0 0 35px rgba(83, 111, 145, .07);
}

.marketing-refresh .network-links::before,
.marketing-refresh .network-links::after {
  position: absolute;
  content: "";
  inset: -23%;
  border-top: 1px solid rgba(83, 111, 145, .12);
  transform: rotate(30deg);
}

.marketing-refresh .network-links::after {
  transform: rotate(-30deg);
}

.marketing-refresh .network-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  padding: 21px;
  text-align: center;
  background: rgba(255, 255, 255, .93);
  border: 1px solid #d8e1ea;
  border-radius: 50%;
  box-shadow: 0 20px 48px rgba(65, 88, 112, .16);
  transform: translate(-50%, -50%);
  animation: landing-core-breathe 5s ease-in-out infinite;
}

.marketing-refresh .network-core small,
.marketing-refresh .network-core span {
  color: #8a98a9;
  font-size: 10px;
}

.marketing-refresh .network-core strong {
  color: var(--landing-ink);
  font-size: 22px;
  letter-spacing: 2px;
}

.marketing-refresh .network-node {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  width: 82px;
  height: 82px;
  padding: 8px;
  color: var(--landing-ink);
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #d4dfe9;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(65, 88, 112, .12);
  animation: landing-node-float 6s ease-in-out infinite;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.marketing-refresh .network-node:hover {
  z-index: 3;
  color: #fff;
  background: var(--landing-blue);
  border-color: var(--landing-blue);
  box-shadow: 0 16px 34px rgba(68, 95, 126, .25);
  transform: scale(1.08);
}

.marketing-refresh .network-node b {
  font-size: 12px;
}

.marketing-refresh .network-node small {
  margin-top: 3px;
  color: #8795a6;
  font-size: 10px;
}

.marketing-refresh .network-node:hover small {
  color: rgba(255, 255, 255, .78);
}

.marketing-refresh .node-solidworks b {
  font-size: 10px;
}

.marketing-refresh .node-spss { top: 7%; left: 50%; animation-delay: -.2s; }
.marketing-refresh .node-stata { top: 16.4%; left: 75.3%; animation-delay: -.9s; }
.marketing-refresh .node-excel { top: 36.7%; left: 90%; animation-delay: -1.6s; }
.marketing-refresh .node-matlab { top: 63.3%; left: 90%; animation-delay: -2.3s; }
.marketing-refresh .node-solidworks { top: 83.6%; left: 75.3%; animation-delay: -3s; }
.marketing-refresh .node-ansys { top: 93%; left: 50%; animation-delay: -3.7s; }
.marketing-refresh .node-simulink { top: 83.6%; left: 24.7%; animation-delay: -4.4s; }
.marketing-refresh .node-python { top: 63.3%; left: 10%; animation-delay: -5.1s; }
.marketing-refresh .node-library { top: 36.7%; left: 10%; animation-delay: -5.8s; }
.marketing-refresh .node-source { top: 16.4%; left: 24.7%; animation-delay: -6.5s; }

.marketing-refresh .trust-strip {
  padding: 26px clamp(24px, 9vw, 150px);
  color: var(--landing-ink);
  background: #fff;
  border-bottom-color: var(--landing-line);
}

.marketing-refresh .trust-strip p,
.marketing-refresh .trust-strip strong {
  color: var(--landing-ink);
}

.marketing-refresh .trust-strip p {
  color: var(--landing-muted);
}

.marketing-refresh .trust-strip span {
  color: #61758d;
  background: #f1f4f7;
  border: 1px solid #e4eaf0;
}

.marketing-refresh .project-showcase {
  display: block;
  padding: 106px clamp(24px, 9vw, 150px);
  background: #fff;
}

.marketing-refresh .showcase-heading {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 30px;
  max-width: 1160px;
  margin: 0 auto 38px;
}

.marketing-refresh .showcase-heading .section-label {
  grid-column: 1 / -1;
  margin: 0 0 -17px;
}

.marketing-refresh .showcase-heading h2 {
  margin: 0;
  color: var(--landing-ink);
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.22;
  letter-spacing: -1.8px;
}

.marketing-refresh .showcase-heading h2 em {
  color: var(--landing-blue);
  font-style: normal;
}

.marketing-refresh .showcase-heading > p:last-child {
  max-width: 420px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 14px;
  line-height: 1.85;
}

.marketing-refresh .showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

.marketing-refresh .showcase-card {
  overflow: hidden;
  background: #f7f9fb;
  border: 1px solid #e0e7ee;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(65, 88, 112, .05);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.marketing-refresh .showcase-card:hover {
  border-color: #bac9d8;
  box-shadow: 0 18px 36px rgba(65, 88, 112, .12);
  transform: translateY(-4px);
}

.marketing-refresh .showcase-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.9 / 1;
  object-fit: cover;
  object-position: center;
  background: #eef2f6;
  border-bottom: 1px solid #e0e7ee;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.marketing-refresh .showcase-card:hover img {
  transform: scale(1.025);
}

.marketing-refresh .showcase-card > div {
  padding: 16px 18px 18px;
}

.marketing-refresh .showcase-card span {
  color: #7188a1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.marketing-refresh .showcase-card h3 {
  margin: 7px 0 4px;
  color: var(--landing-ink);
  font-size: 16px;
}

.marketing-refresh .showcase-card p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 12px;
}

.marketing-refresh .capability-section {
  grid-template-columns: .7fr 1.3fr;
  gap: 70px;
  padding-top: 106px;
  padding-bottom: 106px;
  background: var(--landing-paper);
}

.marketing-refresh .section-intro h2,
.marketing-refresh .workflow-top h2,
.marketing-refresh .scenario-heading h2,
.marketing-refresh .deliverables-copy h2 {
  color: var(--landing-ink);
}

.marketing-refresh .section-intro h2 em,
.marketing-refresh .scenario-heading em {
  color: var(--landing-blue);
}

.marketing-refresh .section-intro > p:last-child,
.marketing-refresh .workflow-top > p,
.marketing-refresh .notice-intro > p:not(.section-label) {
  color: var(--landing-muted);
}

.marketing-refresh .capability-card {
  background: #fff;
  border-color: #e0e7ee;
  box-shadow: 0 8px 22px rgba(65, 88, 112, .04);
}

.marketing-refresh .capability-card:hover {
  border-color: #bdcbd9;
  box-shadow: 0 14px 30px rgba(65, 88, 112, .1);
}

.marketing-refresh .capability-card i,
.marketing-refresh .capability-card b {
  color: var(--landing-blue);
}

.marketing-refresh .capability-card h3 {
  color: var(--landing-ink);
}

.marketing-refresh .capability-card p {
  color: var(--landing-muted);
}

.marketing-refresh .deliverables-section {
  padding-top: 102px;
  padding-bottom: 102px;
  color: #fff;
  background: #314a67;
}

.marketing-refresh .deliverables-copy h2 {
  color: #fff;
}

.marketing-refresh .deliverables-copy > p:not(.section-label) {
  color: #c2d0df;
}

.marketing-refresh .light-label {
  color: #b8cbe0 !important;
}

.marketing-refresh .deliverable-stack article {
  border-bottom-color: rgba(255, 255, 255, .17);
}

.marketing-refresh .deliverable-stack article > span,
.marketing-refresh .deliverable-stack article > i {
  color: #b8cbe0;
}

.marketing-refresh .deliverable-stack article b {
  color: #fff;
}

.marketing-refresh .deliverable-stack article p {
  color: #c2d0df;
}

.marketing-refresh .workflow-section {
  color: var(--landing-ink);
  background: #fff;
}

.marketing-refresh .workflow-steps article {
  border-bottom-color: var(--landing-line);
}

.marketing-refresh .workflow-steps article > span {
  color: var(--landing-blue);
}

.marketing-refresh .workflow-steps article h3 {
  color: var(--landing-ink);
}

.marketing-refresh .workflow-steps article p {
  color: var(--landing-muted);
}

.marketing-refresh .notice-section {
  color: var(--landing-ink);
  background: var(--landing-paper);
}

.marketing-refresh .notice-feed {
  background: #405a77;
}

.marketing-refresh .notice-cta {
  color: var(--landing-blue);
}

.marketing-refresh .scenario-section {
  color: var(--landing-ink);
  background: #fff;
}

.marketing-refresh .scenario-list a {
  color: var(--landing-ink);
  border-bottom-color: var(--landing-line);
}

.marketing-refresh .scenario-list a:hover {
  color: var(--landing-blue);
}

.marketing-refresh .scenario-list b {
  color: var(--landing-muted);
}

.marketing-refresh .final-cta {
  color: #fff;
  background: #314a67;
}

.marketing-refresh .final-cta h2 {
  color: #fff;
}

.marketing-refresh .final-cta .primary-cta.inverted {
  color: #314a67;
  background: #fff;
  box-shadow: 0 12px 24px rgba(14, 33, 57, .2);
}

.marketing-refresh .landing-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease var(--reveal-delay), transform .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay);
}

.marketing-refresh .landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes landing-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-orbit-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes landing-node-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

@keyframes landing-core-breathe {
  0%, 100% { box-shadow: 0 20px 48px rgba(65, 88, 112, .16); }
  50% { box-shadow: 0 24px 58px rgba(65, 88, 112, .23); }
}

@media (max-width: 900px) {
  .marketing-refresh .hero-section {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 64px;
  }

  .marketing-refresh .hero-copy {
    max-width: 700px;
  }

  .marketing-refresh .hero-visual {
    min-height: 430px;
  }

  .marketing-refresh .hero-network {
    width: min(500px, 94vw);
  }

  .marketing-refresh .showcase-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .marketing-refresh .showcase-heading .section-label {
    margin-bottom: 0;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .marketing-header {
    padding: 0 18px;
  }

  .marketing-refresh .marketing-header nav,
  .marketing-refresh .marketing-login {
    display: none;
  }

  .marketing-refresh .hero-section {
    min-height: 0;
    padding: 58px 22px 66px;
  }

  .marketing-refresh .hero-copy h1 {
    font-size: 40px;
  }

  .marketing-refresh .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }

  .marketing-refresh .proof-row {
    display: grid;
    gap: 10px;
    margin-top: 34px;
  }

  .marketing-refresh .hero-visual {
    min-height: 350px;
  }

  .marketing-refresh .network-core {
    width: 132px;
    height: 132px;
  }

  .marketing-refresh .network-node {
    width: 68px;
    height: 68px;
  }

  .marketing-refresh .network-node b {
    font-size: 10px;
  }

  .marketing-refresh .network-node small {
    font-size: 9px;
  }

  .marketing-refresh .showcase-grid {
    grid-template-columns: 1fr;
  }

  .marketing-refresh .project-showcase,
  .marketing-refresh .capability-section,
  .marketing-refresh .deliverables-section,
  .marketing-refresh .workflow-section,
  .marketing-refresh .notice-section {
    padding-top: 74px;
    padding-bottom: 74px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-refresh .network-aura,
  .marketing-refresh .network-core,
  .marketing-refresh .network-node,
  .marketing-refresh .landing-reveal {
    animation: none !important;
    transition: none !important;
  }
}

/* Compact landing layout: evidence strips, one direction banner, and a visible company footer. */
.marketing-refresh .deliverables-section,
.marketing-refresh .workflow-section,
.marketing-refresh .notice-section,
.marketing-refresh .final-cta {
  display: none !important;
}

.marketing-refresh .project-showcase {
  padding-top: 92px;
  padding-bottom: 92px;
}

.marketing-refresh .showcase-heading {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: 42px;
  margin-bottom: 36px;
}

.marketing-refresh .showcase-heading .section-label {
  grid-column: 1 / -1;
  margin-bottom: -27px;
}

.marketing-refresh .showcase-heading h2 {
  margin: 0;
  font-size: clamp(32px, 3.2vw, 48px);
}

.marketing-refresh .showcase-heading > p:last-child {
  max-width: 500px;
  margin: 0;
}

.marketing-refresh .showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.marketing-refresh .showcase-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
  min-height: 246px;
  padding: 0;
  overflow: hidden;
  background: #f7fafc;
  border: 1px solid var(--landing-line);
  border-radius: 15px;
  box-shadow: 0 12px 28px rgba(55, 79, 103, .06);
  transition: transform .35s ease, box-shadow .35s ease;
}

.marketing-refresh .showcase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(55, 79, 103, .13);
}

.marketing-refresh .showcase-card img {
  width: 100%;
  height: 100%;
  min-height: 246px;
  object-fit: cover;
  object-position: center;
  background: #e8eef4;
  transition: transform .6s ease;
}

.marketing-refresh .showcase-card:hover img {
  transform: scale(1.025);
}

.marketing-refresh .showcase-card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 28px 32px;
  background: #f7fafc;
}

.marketing-refresh .showcase-card > div > span {
  margin-bottom: 12px;
  color: var(--landing-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.marketing-refresh .showcase-card h3 {
  margin: 0 0 9px;
  color: var(--landing-ink);
  font-size: 21px;
  line-height: 1.35;
}

.marketing-refresh .showcase-card p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.75;
}

.marketing-refresh .scenario-section {
  display: block;
  padding: 44px clamp(24px, 9vw, 150px);
  color: var(--landing-ink);
  background: #eef3f7;
  border-top: 1px solid var(--landing-line);
  border-bottom: 1px solid var(--landing-line);
}

.marketing-refresh .scenario-banner {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 30px;
  max-width: 1160px;
  margin: 0 auto;
}

.marketing-refresh .scenario-heading h2 {
  margin: 8px 0 0;
  color: var(--landing-ink);
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.35;
  letter-spacing: -.8px;
}

.marketing-refresh .scenario-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.marketing-refresh .scenario-tags span {
  padding: 10px 13px;
  color: #52677f;
  background: rgba(255, 255, 255, .78);
  border: 1px solid #d7e1ea;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.marketing-refresh .scenario-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #fff;
  background: var(--landing-blue);
  border-radius: 9px;
  box-shadow: 0 9px 18px rgba(68, 95, 126, .18);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .25s ease, background .25s ease;
}

.marketing-refresh .scenario-cta:hover {
  color: #fff;
  background: #466483;
  transform: translateY(-2px);
}

.marketing-refresh ~ .site-footer {
  display: grid;
  color: #738298;
  background: #fff;
  border-top-color: var(--landing-line);
}

.marketing-refresh ~ .site-footer .footer-brand strong,
.marketing-refresh ~ .site-footer .footer-column h3 {
  color: var(--landing-ink);
}

.marketing-refresh ~ .site-footer a {
  color: var(--landing-blue);
}

@media (max-width: 980px) {
  .marketing-refresh .showcase-heading {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .marketing-refresh .showcase-heading .section-label {
    grid-column: auto;
    margin-bottom: 0;
  }

  .marketing-refresh .showcase-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  }

  .marketing-refresh .scenario-banner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .marketing-refresh .scenario-cta {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .project-showcase {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .marketing-refresh .showcase-card {
    grid-template-columns: 1fr;
  }

  .marketing-refresh .showcase-card img {
    min-height: 188px;
  }

  .marketing-refresh .showcase-card > div {
    padding: 22px 23px 25px;
  }

  .marketing-refresh .scenario-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .marketing-refresh .scenario-tags span {
    font-size: 11px;
  }
}

/* Showcase rows: keep the engineering images compact on the right and magnify only the area under the pointer. */
.marketing-refresh .showcase-card {
  grid-template-columns: minmax(250px, .56fr) minmax(0, 1.44fr);
  align-items: stretch;
}

.marketing-refresh .showcase-card > .showcase-copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 28px 32px;
  background: #f7fafc;
}

.marketing-refresh .showcase-card > .showcase-media {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  min-height: 226px;
  overflow: hidden;
  padding: 0;
  background: #e8eef4;
  cursor: crosshair;
  isolation: isolate;
}

.marketing-refresh .showcase-card > .showcase-media > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 226px;
  object-fit: cover;
  object-position: center;
  transform: none !important;
  transition: none;
}

.marketing-refresh .magnifier-lens {
  position: absolute;
  z-index: 2;
  width: 146px;
  height: 146px;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  color: transparent;
  box-shadow: 0 8px 22px rgba(31, 54, 78, .28), 0 0 0 5px rgba(83, 111, 145, .22);
  transform: scale(.82);
  transition: opacity .16s ease, transform .16s ease;
}

.marketing-refresh .magnifier-lens.is-active {
  opacity: 1;
  transform: scale(1);
}

.marketing-refresh .magnifier-lens img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.marketing-refresh .showcase-card > .showcase-copy > span {
  margin-bottom: 12px;
  color: var(--landing-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.marketing-refresh .showcase-card > .showcase-copy h3 {
  margin: 0 0 10px;
  color: var(--landing-ink);
  font-size: 21px;
  line-height: 1.4;
}

.marketing-refresh .showcase-card > .showcase-copy p {
  max-width: 290px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 980px) {
  .marketing-refresh .showcase-card {
    grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
  }
}

@media (max-width: 560px) {
  .marketing-refresh .showcase-card {
    grid-template-columns: 1fr;
  }

  .marketing-refresh .showcase-card > .showcase-copy,
  .marketing-refresh .showcase-card > .showcase-media {
    grid-column: 1;
    grid-row: auto;
  }

  .marketing-refresh .showcase-card > .showcase-copy {
    padding: 23px;
  }

  .marketing-refresh .showcase-card > .showcase-media,
  .marketing-refresh .showcase-card > .showcase-media > img {
    min-height: 190px;
  }
}

/* Final sizing pass: compact right-side screenshots and a smooth orbit around the workbench core. */
.marketing-refresh {
  overflow-x: clip;
}

.marketing-refresh .showcase-card {
  overflow: visible;
}

.marketing-refresh .showcase-card > .showcase-media {
  overflow: visible;
}

.marketing-refresh .magnifier-lens {
  width: 440px;
  height: 440px;
}

.marketing-refresh .showcase-card {
  grid-template-columns: minmax(0, 1.58fr) minmax(210px, .72fr);
  min-height: 218px;
}

.marketing-refresh .showcase-card > .showcase-media {
  align-self: center;
  height: auto;
  min-height: 0;
  aspect-ratio: 1.9 / 1;
  margin: 22px 22px 22px 0;
}

.marketing-refresh .showcase-card > .showcase-media > img {
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

.marketing-refresh .magnifier-lens img {
  object-fit: contain;
  object-position: center;
  min-height: 0 !important;
}

.marketing-refresh .network-nodes-orbit {
  position: absolute;
  inset: 0;
  animation: landing-nodes-orbit 34s linear infinite;
}

.marketing-refresh .network-nodes-orbit .network-node {
  animation: landing-node-counter-orbit 34s linear infinite;
  animation-delay: 0s !important;
}

@keyframes landing-nodes-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-node-counter-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@media (max-width: 720px) {
  .marketing-refresh .showcase-card {
    grid-template-columns: 1fr;
  }

  .marketing-refresh .showcase-card > .showcase-copy,
  .marketing-refresh .showcase-card > .showcase-media {
    grid-column: 1;
    grid-row: auto;
  }

  .marketing-refresh .showcase-card > .showcase-copy {
    padding: 23px;
  }

  .marketing-refresh .showcase-card > .showcase-media {
    width: auto;
    margin: 0 23px 23px;
  }

  .marketing-refresh .magnifier-lens {
    width: min(440px, 82vw);
    height: min(440px, 82vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-refresh .network-nodes-orbit,
  .marketing-refresh .network-nodes-orbit .network-node {
    animation: none !important;
  }
}

/* All-subject landing pass: keep the first screen welcoming and leave service details below the fold. */
.marketing-refresh .hero-section {
  min-height: calc(100svh - 72px);
  align-items: center;
}

.marketing-refresh .hero-copy h1 {
  max-width: 620px;
  font-size: clamp(48px, 5.1vw, 76px);
  letter-spacing: -2.8px;
}

.marketing-refresh .hero-lede {
  max-width: 430px;
  margin: 26px 0 0;
  color: #68788d;
  font-size: 16px;
  line-height: 1.9;
}

.marketing-refresh .proof-row {
  display: none;
}

.marketing-refresh .hero-visual {
  min-height: 560px;
}

.marketing-refresh .hero-network {
  width: min(590px, 100%);
}

.marketing-refresh .network-core strong {
  letter-spacing: 1px;
}

.marketing-refresh .showcase-heading h2 {
  letter-spacing: -1.4px;
}

@media (max-width: 900px) {
  .marketing-refresh .hero-section {
    min-height: calc(100svh - 72px);
  }

  .marketing-refresh .hero-visual {
    min-height: 500px;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .hero-section {
    min-height: calc(100svh - 66px);
  }

  .marketing-refresh .hero-visual {
    min-height: 350px;
  }
}

/* Project reader layout: engineering evidence on the left, one flat paper page on the right. */
.marketing-refresh .project-showcase {
  padding-top: 96px;
  padding-bottom: 108px;
}

.marketing-refresh .showcase-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
}

.marketing-refresh .engineering-panel {
  min-width: 0;
}

.marketing-refresh .showcase-panel-heading,
.marketing-refresh .paper-reader-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.marketing-refresh .showcase-panel-heading span,
.marketing-refresh .paper-reader-head > div > span {
  display: block;
  margin-bottom: 7px;
  color: var(--landing-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.marketing-refresh .showcase-panel-heading h3,
.marketing-refresh .paper-reader-head h3 {
  margin: 0;
  color: var(--landing-ink);
  font-size: 22px;
  line-height: 1.3;
}

.marketing-refresh .showcase-panel-heading > small,
.marketing-refresh .paper-counter {
  color: #8a98a9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
}

.marketing-refresh .engineering-panel .showcase-grid {
  gap: 14px;
}

.marketing-refresh .engineering-panel .showcase-card {
  grid-template-columns: minmax(0, .68fr) minmax(140px, .32fr);
  min-height: 168px;
  overflow: visible;
  border-radius: 12px;
}

.marketing-refresh .engineering-panel .showcase-copy {
  padding: 20px 22px;
}

.marketing-refresh .engineering-panel .showcase-card h3 {
  margin-bottom: 7px;
  font-size: 17px;
}

.marketing-refresh .engineering-panel .showcase-card p {
  font-size: 12px;
  line-height: 1.65;
}

.marketing-refresh .engineering-panel .showcase-media {
  align-self: center;
  min-height: 0;
  aspect-ratio: 1.55 / 1;
  margin: 18px 18px 18px 0;
}

.marketing-refresh .paper-reader {
  position: sticky;
  top: 98px;
  min-width: 0;
  padding: 24px 24px 22px;
  background: #f7f9fb;
  border: 1px solid var(--landing-line);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(55, 79, 103, .08);
}

.marketing-refresh .paper-reader-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

.marketing-refresh .paper-reader-head h3 {
  font-size: 18px;
}

.marketing-refresh .paper-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  padding: 28px 36px;
  overflow: hidden;
  background: linear-gradient(145deg, #edf2f6 0%, #f8fafb 100%);
  border: 1px solid #e0e7ee;
  border-radius: 12px;
}

.marketing-refresh .paper-stage::before,
.marketing-refresh .paper-stage::after {
  position: absolute;
  top: 24px;
  left: 50%;
  width: min(82%, 390px);
  aspect-ratio: .707 / 1;
  content: "";
  background: #fff;
  border: 1px solid #dfe6ed;
  box-shadow: 0 12px 24px rgba(55, 79, 103, .08);
  transform: translateX(-50%);
}

.marketing-refresh .paper-stage::before {
  top: 16px;
  opacity: .58;
}

.marketing-refresh .paper-stage::after {
  top: 8px;
  opacity: .8;
}

.marketing-refresh .paper-page {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 390px);
  aspect-ratio: .707 / 1;
  padding: 12px;
  background: #fff;
  border: 1px solid #d7e0e8;
  box-shadow: 0 18px 34px rgba(55, 79, 103, .16);
  transition: opacity .22s ease, transform .22s ease;
}

.marketing-refresh .paper-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.marketing-refresh .paper-reader.is-turning .paper-page {
  opacity: 0;
  transform: translateX(24px);
}

.marketing-refresh .paper-reader-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.marketing-refresh .paper-progress {
  flex: 1;
  height: 3px;
  overflow: hidden;
  background: #dce4ec;
  border-radius: 99px;
}

.marketing-refresh .paper-progress span {
  display: block;
  width: 20%;
  height: 100%;
  background: var(--landing-blue);
  border-radius: inherit;
  transition: width .22s ease;
}

.marketing-refresh .paper-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 98px;
  justify-content: center;
  padding: 11px 14px;
  color: #fff;
  background: var(--landing-blue);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.marketing-refresh .paper-next:hover {
  background: #466483;
  transform: translateY(-2px);
}

.marketing-refresh .paper-next:disabled {
  opacity: .65;
  cursor: wait;
}

@media (max-width: 760px) {
  .marketing-refresh .showcase-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .marketing-refresh .paper-reader {
    position: relative;
    top: auto;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .showcase-panel-heading h3,
  .marketing-refresh .paper-reader-head h3 {
    font-size: 18px;
  }

  .marketing-refresh .engineering-panel .showcase-card {
    grid-template-columns: minmax(0, 1fr) minmax(116px, .44fr);
  }

  .marketing-refresh .engineering-panel .showcase-copy {
    padding: 18px;
  }

  .marketing-refresh .paper-reader {
    padding: 18px 16px 17px;
  }

  .marketing-refresh .paper-stage {
    min-height: 540px;
    padding: 20px 22px;
  }
}

/* Open reader layout: remove the outer paper frame and use the full-width two-column canvas. */
.marketing-refresh .project-showcase {
  padding-right: 0;
  padding-left: 0;
}

.marketing-refresh .showcase-heading {
  max-width: none;
  padding-right: 24px;
  padding-left: 24px;
}

.marketing-refresh .showcase-split {
  grid-template-columns: 50% 50%;
  gap: 0;
  max-width: none;
}

.marketing-refresh .engineering-panel {
  padding: 0 24px;
}

.marketing-refresh .paper-reader {
  position: relative;
  top: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.marketing-refresh .paper-reader-head {
  width: min(560px, 100%);
  margin: 0 auto 20px;
}

.marketing-refresh .paper-reader-head h3 {
  font-size: 22px;
}

.marketing-refresh .paper-stage {
  min-height: 810px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.marketing-refresh .paper-stage::before,
.marketing-refresh .paper-stage::after {
  display: none;
}

.marketing-refresh .paper-page {
  width: min(560px, 100%);
  aspect-ratio: .707 / 1;
  padding: 12px;
  border: 1px solid #d7e0e8;
  box-shadow: 0 18px 34px rgba(55, 79, 103, .14);
}

.marketing-refresh .paper-reader .paper-next {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: calc(50% - 300px);
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  color: var(--landing-blue);
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: .58;
  transform: translateY(-50%);
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.marketing-refresh .paper-reader .paper-next:hover {
  color: var(--landing-ink);
  background: transparent;
  opacity: 1;
  transform: translate(3px, -50%);
}

.marketing-refresh .paper-reader .paper-next svg {
  width: 25px;
  height: 25px;
}

@media (max-width: 760px) {
  .marketing-refresh .showcase-split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .marketing-refresh .engineering-panel {
    padding: 0 24px;
  }

  .marketing-refresh .paper-reader {
    width: min(560px, calc(100% - 48px));
    margin: 0 auto;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .marketing-refresh .paper-page {
    width: calc(100% - 56px);
  }

  .marketing-refresh .paper-reader .paper-next {
    right: 0;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .engineering-panel {
    padding: 0 18px;
  }

  .marketing-refresh .paper-reader {
    width: calc(100% - 36px);
  }

  .marketing-refresh .paper-stage {
    min-height: 650px;
  }

  .marketing-refresh .paper-reader .paper-next {
    right: -8px;
  }
}

/* Final reader polish: a flat paper stack and an unobstructed engineering magnifier. */
.marketing-refresh .engineering-panel .showcase-card {
  position: relative;
  z-index: 0;
}

.marketing-refresh .engineering-panel .showcase-card:hover {
  z-index: 30;
}

.marketing-refresh .engineering-panel .magnifier-lens {
  z-index: 10;
}

.marketing-refresh .paper-stage {
  isolation: isolate;
}

.marketing-refresh .paper-reader-head {
  width: min(496px, 100%);
  transform: translateX(-16px);
}

.marketing-refresh .paper-stage::before,
.marketing-refresh .paper-stage::after {
  display: none;
}

.marketing-refresh .paper-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.marketing-refresh .paper-stack-sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(496px, 100%);
  aspect-ratio: .707 / 1;
  background: #fff;
  border: 1px solid #dfe6ed;
  transform-origin: center;
  box-shadow: 0 14px 26px rgba(55, 79, 103, .08);
}

.marketing-refresh .paper-stack-sheet-1 {
  z-index: 1;
  opacity: .38;
  transform: translate(calc(-50% + 48px), calc(-50% + 24px)) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-stack-sheet-2 {
  z-index: 2;
  opacity: .5;
  transform: translate(calc(-50% + 32px), calc(-50% + 18px)) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-stack-sheet-3 {
  z-index: 3;
  opacity: .64;
  transform: translate(calc(-50% + 16px), calc(-50% + 12px)) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-stack-sheet-4 {
  z-index: 4;
  opacity: .78;
  transform: translate(calc(-50%), calc(-50% + 6px)) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-page {
  z-index: 5;
  width: min(496px, 100%);
  transform-origin: center;
  transform: translateX(-16px) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-reader.is-turning .paper-page {
  opacity: 0;
  transform: translateX(-40px) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

.marketing-refresh .paper-reader.is-turning-in .paper-page {
  opacity: 0;
  transform: translateX(8px) perspective(1200px) rotateY(-8deg) rotateZ(-.4deg);
}

/* Four focused topic pages: one research direction per full-width advert section. */
.marketing-refresh .marketing-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.marketing-refresh .marketing-header nav:empty {
  display: none;
}

.marketing-refresh .marketing-header nav a[href="#capability"],
.marketing-refresh .marketing-header nav a[href="#scenarios"] {
  display: none;
}

.marketing-refresh .project-showcase {
  padding: 0;
  background: #f5f8fa;
  scroll-margin-top: 72px;
}

.marketing-refresh .topic-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 3vw, 52px);
  height: calc(100svh - 72px);
  min-height: calc(100svh - 72px);
  max-height: calc(100svh - 72px);
  padding: clamp(24px, 3vw, 40px) clamp(28px, 5vw, 76px);
  color: var(--landing-ink);
  background: #f5f8fa;
  border-top: 1px solid var(--landing-line);
}

.marketing-refresh .topic-page:nth-child(even) {
  background: #fff;
}

.marketing-refresh .topic-copy {
  width: min(100%, 680px);
  justify-self: center;
}

.marketing-refresh .topic-kicker {
  margin: 0 0 18px;
  color: var(--landing-blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.marketing-refresh .topic-copy h2 {
  margin: 0;
  color: var(--landing-ink);
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.18;
  letter-spacing: -2.4px;
}

.marketing-refresh .topic-copy h2 em {
  color: var(--landing-blue);
  font-style: normal;
}

.marketing-refresh .topic-summary {
  max-width: 440px;
  margin: 25px 0 0;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.9;
}

.marketing-refresh .topic-capabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 34px;
  border-top: 1px solid var(--landing-line);
}

.marketing-refresh .topic-capabilities span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 49px;
  color: var(--landing-ink);
  border-bottom: 1px solid var(--landing-line);
  font-size: 13px;
  line-height: 1.45;
}

.marketing-refresh .topic-capabilities svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--landing-blue);
}

.marketing-refresh .topic-note {
  max-width: 440px;
  margin: 24px 0 0;
  color: var(--landing-muted);
  font-size: 12px;
  line-height: 1.8;
}

.marketing-refresh .topic-visual {
  display: grid;
  grid-template-rows: minmax(0, 1.08fr) minmax(0, .82fr);
  gap: 18px;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: auto;
  align-self: stretch;
}

.marketing-refresh .topic-workflow,
.marketing-refresh .topic-paper-row {
  min-width: 0;
  min-height: 0;
}

.marketing-refresh .topic-workflow {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.marketing-refresh .topic-visual-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.marketing-refresh .topic-visual-head span {
  color: var(--landing-ink);
  font-size: 16px;
  font-weight: 800;
}

.marketing-refresh .topic-image-button {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid var(--landing-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(55, 79, 103, .08);
  cursor: zoom-in;
}

.marketing-refresh .topic-image-button:hover {
  border-color: #bdccda;
  box-shadow: 0 18px 42px rgba(55, 79, 103, .14);
}

.marketing-refresh .topic-image-button:focus-visible,
.marketing-refresh .marketing-lightbox-close:focus-visible {
  outline: 3px solid rgba(68, 95, 126, .28);
  outline-offset: 3px;
}

.marketing-refresh .topic-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.marketing-refresh .topic-image-button:hover img {
  transform: scale(1.025);
}

.marketing-refresh .topic-workflow .topic-image-button {
  aspect-ratio: auto;
}

.marketing-refresh .topic-paper-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.marketing-refresh .topic-paper-row .topic-image-button {
  aspect-ratio: auto;
  padding: 10px;
}

.marketing-refresh .marketing-lightbox {
  width: min(94vw, 1440px);
  max-width: none;
  height: min(92vh, 960px);
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.marketing-refresh .marketing-lightbox::backdrop {
  background: rgba(11, 24, 40, .78);
  backdrop-filter: blur(5px);
}

.marketing-refresh .marketing-lightbox:not([open]) {
  display: none;
}

.marketing-refresh .marketing-lightbox.is-open {
  display: grid;
  place-items: center;
}

.marketing-refresh .marketing-lightbox-card {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 26px;
}

.marketing-refresh .marketing-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .32);
}

.marketing-refresh .marketing-lightbox-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: rgba(21, 42, 66, .72);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.marketing-refresh .marketing-lightbox-close:hover {
  background: var(--landing-blue);
  transform: rotate(90deg);
}

.marketing-refresh .marketing-lightbox-close svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .marketing-refresh .topic-page {
    grid-template-columns: 1fr;
    gap: 48px;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .marketing-refresh .topic-copy {
    max-width: 680px;
  }

  .marketing-refresh .topic-visual {
    max-width: 760px;
    height: auto;
  }
}

@media (max-width: 560px) {
  .marketing-refresh .topic-page {
    gap: 34px;
    padding: 60px 20px 74px;
  }

  .marketing-refresh .topic-copy h2 {
    font-size: 38px;
    letter-spacing: -1.6px;
  }

  .marketing-refresh .topic-capabilities {
    grid-template-columns: 1fr;
    margin-top: 26px;
  }

  .marketing-refresh .topic-visual {
    grid-template-rows: auto auto;
  }

  .marketing-refresh .topic-paper-row {
    gap: 12px;
  }

  .marketing-refresh .marketing-lightbox-card {
    padding: 18px 10px;
  }
}

/* Keep the supporting sections reachable from the remaining header links. */
.marketing-refresh .notice-section {
  display: grid !important;
  scroll-margin-top: 72px;
}

/* Current account branding and the restrained xhardAI blue-gray palette. */
.table-link-button {
  border: 0;
  padding: 0;
  color: var(--blue-700, #315b86);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.secondary-price-card {
  width: 100%;
}

.secondary-price-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}

.secondary-price-dialog .support-dialog-card {
  padding: 38px 34px 32px;
  justify-items: stretch;
  text-align: left;
}

.secondary-price-dialog .support-dialog-card .eyebrow,
.secondary-price-dialog .support-dialog-card h2,
.secondary-price-dialog .support-dialog-card p {
  text-align: left;
}

.secondary-price-dialog .support-dialog-card h2 {
  font-size: 26px;
}

.secondary-price-dialog .admin-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.secondary-price-dialog .admin-form-actions button {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 800;
}

.secondary-price-card .admin-form-grid {
  margin-top: 22px;
}

.secondary-price-card .admin-form-actions {
  grid-column: 1 / -1;
}

.partner-bill-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  margin: 20px 0;
}

.partner-bill-line {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line, #d5e0eb);
  border-radius: 14px;
  background: #fff;
}

.partner-bill-line small {
  color: #6c819b;
}

.partner-bill-line input {
  width: 100%;
}

.partner-bill-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 8px 0 20px;
}

.partner-bill-summary strong {
  color: #284e78;
  font-size: 1.1rem;
}

.partner-bill-summary button[disabled] {
  cursor: not-allowed;
  opacity: .55;
}

.partner-bill-summary button {
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid #cdd9e8;
  border-radius: 8px;
  background: #fff;
  color: #2b4d79;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.partner-bill-summary button.primary {
  border-color: #536d8d;
  background: #536d8d;
  color: #fff;
}

@media (max-width: 760px) {
  .secondary-price-dialog .admin-form-grid { grid-template-columns: 1fr; }
  .secondary-price-dialog .admin-form-actions { grid-column: auto; }
}

@media (max-width: 760px) {
  .partner-bill-lines { grid-template-columns: 1fr; }
}
.auth-page {
  color: #24384e;
  background: radial-gradient(circle at 90% 8%, rgba(177, 203, 226, .35), transparent 34%), #f4f7fa;
}

.auth-card {
  border-color: #dce4ec;
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(36, 56, 78, .12);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #24384e;
  font-size: 18px;
}

.auth-brand .auth-brand-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin: 0;
  color: #fff;
  background: #536f91;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.auth-brand strong {
  color: #24384e;
}

.auth-card .eyebrow,
.auth-switch {
  color: #536f91;
}

.auth-submit {
  background: #536f91;
}

.auth-submit:hover {
  background: #405a77;
}

.auth-card input:focus {
  outline: 0;
  border-color: #8ba3bd;
  box-shadow: 0 0 0 3px rgba(83, 111, 145, .12);
}

/* Contact dialogs show the two business QR codes side by side. */
#supportDialog {
  width: min(560px, calc(100% - 32px));
}

.support-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 5px 0 1px;
}

.support-qr-grid figure {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
}

.support-dialog-card .support-qr-grid img {
  width: min(190px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
}

.support-qr-grid figcaption {
  color: #405a77;
  font-size: 13px;
  font-weight: 700;
}

.support-dialog-card .writing-qr {
  width: min(250px, 100%);
}

.library-member-card .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 7px;
  padding: 0 18px;
  color: #fff;
  background: #536f91;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.library-member-card .primary-button:hover {
  background: #405a77;
}

/* Give the landing hero a more balanced center and clearer headline hierarchy. */
@media (min-width: 901px) {
  .marketing-refresh .hero-section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 54px);
    padding-right: clamp(32px, 7vw, 110px);
    padding-left: clamp(32px, 7vw, 110px);
  }

  .marketing-refresh .hero-copy {
    margin-left: clamp(0px, 3vw, 46px);
  }
}

.marketing-refresh .hero-lede {
  max-width: 610px;
  margin-top: 27px;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.75;
}

.marketing-refresh .network-core strong {
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: .06em;
}

.marketing-refresh .notice-section {
  color: var(--landing-ink);
  background: #eef3f7;
}

.marketing-refresh .notice-intro h2 em,
.marketing-refresh .notice-cta {
  color: var(--landing-blue);
}

.marketing-refresh .notice-intro > p:not(.section-label) {
  color: var(--landing-muted);
}

.marketing-refresh .policy-list {
  background: #f8fafb;
  border-color: var(--landing-line);
}

.marketing-refresh .policy-list details,
.marketing-refresh .policy-list summary {
  color: var(--landing-ink);
  background: #fff;
  border-color: var(--landing-line);
}

.marketing-refresh .policy-list summary span svg,
.marketing-refresh .policy-list details[open] summary > svg {
  color: var(--landing-blue);
}

@media (max-width: 560px) {
  #supportDialog {
    width: min(430px, calc(100% - 24px));
  }

  .support-dialog-card {
    padding: 27px 20px 22px;
  }

  .support-qr-grid {
    gap: 10px;
  }

  .support-dialog-card .support-qr-grid img {
    width: min(150px, 100%);
  }

  .marketing-refresh .hero-lede {
    max-width: 100%;
    font-size: 18px;
  }
}

/* Workspace account summary: points stay separate and open the points ledger. */
.site-header .header-actions {
  gap: 8px;
}

.header-points-link,
.header-account-card {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: #4c5662;
  background: #fafbfc;
  border: 1px solid #e2e5e9;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.header-points-link {
  gap: 7px;
  padding: 0 12px;
}

.header-points-link svg {
  width: 16px;
  height: 16px;
  color: #536f91;
}

.header-points-link span {
  color: #7a8795;
  font-size: 12px;
}

.header-points-link strong {
  color: #2f4f72;
  font-size: 14px;
}

.header-account-card {
  gap: 8px;
  padding: 0 12px;
}

.header-account-card > svg {
  width: 17px;
  height: 17px;
  color: #536f91;
}

.header-account-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.header-account-copy b {
  color: #4c5662;
  font-size: 13px;
  font-weight: 700;
}

.header-account-copy small {
  padding: 3px 6px;
  color: #8a96a3;
  background: #f1f4f7;
  border: 1px solid #e0e6eb;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.header-points-link:hover,
.header-account-card:hover {
  background: #f3f6f9;
  border-color: #b9c9d9;
  box-shadow: 0 4px 12px rgba(54, 76, 101, .08);
}

.points-insufficient-dialog {
  width: min(430px, calc(100% - 32px));
}

.points-insufficient-card h2 {
  color: #24384e;
}

.points-insufficient-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.points-insufficient-actions .primary-button,
.points-insufficient-actions .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.points-insufficient-actions .primary-button {
  color: #fff;
  background: #536f91;
}

.points-insufficient-actions .ghost-button {
  color: #536f91;
  background: #fff;
  border: 1px solid #cbd7e2;
}

.points-insufficient-actions .primary-button:hover {
  background: #405a77;
}

.points-insufficient-actions .ghost-button:hover {
  background: #f3f6f9;
}

@media (max-width: 560px) {
  .header-points-link {
    padding: 0 8px;
  }

  .header-points-link span {
    display: none;
  }

  .header-account-card {
    display: inline-flex;
    padding: 0 8px;
  }

  .points-insufficient-actions {
    flex-direction: column;
  }
}

/* Nudge the first-page hero copy inward so it has a calmer left margin. */
@media (min-width: 561px) {
  .marketing-refresh .hero-copy {
    margin-left: clamp(44px, 6vw, 110px);
  }
}

@media (max-width: 560px) {
  .marketing-refresh .hero-copy {
    margin-left: 18px;
  }
}