/* liquifire-deployment.css
   Section rhythm: white → navy → off-white → warm-50 → white → navy → warm-50 → off-white → navy
   All var(--f-serif) carry explicit font-weight: 400. Mobile-first. */

/* ── Reveals ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s,transform .55s}
.rv.v{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* ══════════════════════════════════════════
   1. HERO — white
   ══════════════════════════════════════════ */
.page-hero{
  padding:calc(88px + env(safe-area-inset-top,0px)) 0 72px;
  background:var(--white);border-bottom:1px solid var(--warm-200);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--warm-100) 1px,transparent 1px),linear-gradient(90deg,var(--warm-100) 1px,transparent 1px);
  background-size:48px 48px;opacity:.4;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 20%,transparent 70%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .section-tag{
  display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;
}
.page-hero h1{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(32px,5.5vw,60px);line-height:1.08;
  color:var(--ink-900);max-width:760px;margin:0 0 24px;
}
.page-hero-sub{
  font-size:clamp(15px,1.4vw,16px);font-weight:300;line-height:1.7;
  color:var(--ink-500);max-width:420px;
}

/* ══════════════════════════════════════════
   2. PRINCIPLES — navy
   ══════════════════════════════════════════ */
.deploy-principle-section { background: var(--navy);--amber:#f59e0b;}
.principle-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}
.principle-div {
  width: 1px; background: rgba(255,255,255,.1); align-self: stretch;
}
.principle-item {
  padding: 48px 40px;
  display: flex; flex-direction: column; gap: 10px;
}
.principle-num {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1; letter-spacing: -.03em;
  color: var(--white); display: block;
}
.principle-item h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--white); line-height: 1.2; margin: 0;
}
.principle-item p {
  font-size: 12px; font-weight: 300; line-height: 1.55;
  color: rgba(255,255,255,.5); display: block; min-height: 4em; margin: 0;
}

/* ══════════════════════════════════════════
   SHARED: section header
   ══════════════════════════════════════════ */
.section-header{margin-bottom:48px}
.section-tag{
  display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;
}
.section-tag--light{color:var(--amber)}
.section-header h2{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(24px,3.2vw,40px);line-height:1.1;
  color:var(--ink-900);margin-bottom:12px;
}
.h2--light{color:var(--white)}
.section-header p{font-size:14px;font-weight:300;line-height:1.6;color:var(--ink-500);max-width:480px}
.p--light{color:rgba(255,255,255,.6)}

/* ══════════════════════════════════════════
   3. DEPLOYMENT MODELS — off-white bg, family groups
   ══════════════════════════════════════════ */
.deploy-models-section{padding:80px 0;background:var(--white)}

.model-family{margin-bottom:48px}
.model-family:last-child{margin-bottom:0}

/* Family header strip */
.model-family-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border:1px solid var(--warm-200);border-bottom:none;
  background:var(--white);
}
.model-family-header--onprem{background:var(--navy);--amber:#f59e0b;}
.model-family-header--hybrid{background:var(--warm-50)}

.model-family-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.model-family-dot--cloud{background:var(--green)}
.model-family-dot--onprem{background:var(--blue)}
.model-family-dot--hybrid{background:var(--teal)}

.model-family-name{
  display:block;font-size:13px;font-weight:500;color:var(--ink-800);
}
.model-family-header--onprem .model-family-name{color:var(--white)}
.model-family-desc{
  display:block;font-family:var(--f-mono);font-size:9px;font-weight:400;
  color:var(--ink-400);letter-spacing:.04em;margin-top:1px;
}
.model-family-header--onprem .model-family-desc{color:rgba(255,255,255,.4)}

/* Cards container */
.model-family-cards{
  display:grid;grid-template-columns:1fr;
  border:1px solid var(--warm-200);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;
  align-items:stretch;
}
.model-family-cards--two{grid-template-columns:1fr}

/* Individual card */
.model-card{
  background:var(--white);
  border-bottom:1px solid var(--warm-200);
  display:flex;flex-direction:column;
  overflow:hidden;
  height:100%;  /* ensures row-mates stretch to same height in grid */
}
.model-card:last-child{border-bottom:none}

/* Card top: number + visual */
.model-card-top{
  position:relative;
  height:140px;flex-shrink:0;overflow:hidden;
  background:var(--warm-50);
  border-bottom:1px solid var(--warm-200);
}
.model-num{
  position:absolute;top:14px;left:16px;z-index:2;
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  color:var(--ink-400);letter-spacing:.12em;
  background:rgba(255,255,255,.85);
  padding:3px 8px;border-radius:3px;
}
/* ── Image system ──
   Each card-top contains either:
   A) <img class="model-card-photo" src="assets/FILENAME.jpg" alt="">  (real image)
   B) <div class="model-card-placeholder" data-label="Description">    (placeholder)
   To replace: swap the div for an <img> tag. The placeholder div can be deleted.
*/
.model-card-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.model-card-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px;
  background:var(--warm-100);
  border:2px dashed var(--warm-300);
}
.model-card-placeholder::before{
  content:attr(data-label);
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  color:var(--ink-400);letter-spacing:.06em;text-transform:uppercase;text-align:center;
  line-height:1.4;
}
.model-card-placeholder::after{
  content:attr(data-src);
  font-family:var(--f-mono);font-size:8px;font-weight:400;
  color:var(--amber);background:rgba(180,83,9,.08);
  padding:2px 8px;border-radius:3px;text-align:center;
}
/* Dark variant — for on-premise family */
.model-card-placeholder--dark{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.15);
}
.model-card-placeholder--dark::before{color:rgba(255,255,255,.35)}
.model-card-placeholder--dark::after{background:rgba(180,83,9,.2);color:#e07b2a}

/* Diagram (SVG direct) */
.model-card-diagram{width:100%;height:100%}
.model-card-diagram svg{display:block;width:100%;height:100%}

/* Card body */
.model-card-body{padding:20px 24px 22px;display:flex;flex-direction:column;gap:0;flex:1}
.model-card h3{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(18px,2vw,22px);line-height:1.2;color:var(--ink-900);
}
.model-card p{font-size:13px;font-weight:300;line-height:1.65;color:var(--ink-500)}
.model-card h3{margin-bottom:10px}
.model-card p{margin-bottom:14px}
.model-card .model-specs{margin-bottom:14px}

/* On-premise cards — light treatment, equal weight to cloud family */
/* Standard appliance: white bg, blue left accent */
.model-card--appliance-std{
  background:var(--white);
}
.model-card--appliance-std .model-card-top{
  background:var(--warm-100);  /* light neutral — appliance hardware reads on light bg */
  border-bottom-color:var(--warm-200);
}
.model-card--appliance-std .model-num{
  background:rgba(255,255,255,.85);color:var(--ink-400);
}

/* Secure appliance: lightest warm grey, amber accent — visually distinct but not heavy */
.model-card--appliance-sec{
  background:var(--white);
}
.model-card--appliance-sec .model-card-top{
  background:var(--warm-100);  /* light neutral — red appliance reads on light bg */
  border-bottom-color:var(--warm-200);
}
.model-card--appliance-sec .model-num{
  background:rgba(255,255,255,.85);color:var(--ink-400);
}
/* Secure card body — ink text on off-white, no white-on-dark */
.model-card--appliance-sec h3{color:var(--ink-900)}
.model-card--appliance-sec p{color:var(--ink-500)}
.model-card--appliance-sec .model-spec span{color:var(--ink-400)}
.model-card--appliance-sec .model-spec strong{color:var(--ink-700)}
/* Hybrid cards removed */
/* Offload: violet left accent */
/* Specs */
.model-specs{
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--warm-200);border-radius:var(--r-md);overflow:hidden;
}
.model-spec{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 12px;border-bottom:1px solid var(--warm-100);gap:10px;
}
.model-spec:last-child{border-bottom:none}
.model-spec span{font-size:11px;font-weight:400;color:var(--ink-400);flex-shrink:0}
.model-spec strong{font-size:11px;font-weight:500;color:var(--ink-700);text-align:right}



/* ══════════════════════════════════════════
   4. ADVISOR — warm-50 bg
   ══════════════════════════════════════════ */
.deploy-advisor-section{padding:80px 0;background:var(--white)}
.advisor-layout{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
.advisor-intro .section-tag{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.advisor-intro h2{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(24px,3vw,36px);line-height:1.1;
  color:var(--ink-900);margin-bottom:14px;
}
.advisor-intro>p{font-size:14px;font-weight:300;line-height:1.7;color:var(--ink-500);max-width:340px}
.advisor-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px}
.advisor-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:300;color:var(--ink-400);font-family:var(--f-mono);letter-spacing:.03em}
.adv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.adv-dot--cloud{background:var(--green)}.adv-dot--onprem{background:var(--blue)}
.adv-dot--hybrid{background:var(--teal)}.adv-dot--secure{background:var(--amber)}

/* Shell */
.advisor-shell{
  background:var(--white);border-radius:var(--r-xl);
  padding:32px 28px 36px;
  border:1px solid var(--warm-200);
  box-shadow:var(--shadow-md);
}
.advisor-progress{display:flex;gap:6px;margin-bottom:28px}
.advisor-step-dot{width:6px;height:6px;border-radius:50%;background:var(--warm-300);transition:background .2s,transform .2s}
.advisor-step-dot--active{background:var(--amber);transform:scale(1.5)}
.advisor-step-dot--done{background:var(--ink-700)}
.advisor-question{}
.advisor-question--hidden{display:none}
.advisor-q-num{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.1em;color:var(--amber);margin-bottom:8px}
.advisor-q-text{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(17px,2.2vw,22px);line-height:1.2;
  color:var(--ink-900);margin-bottom:6px;
}
.advisor-q-sub{font-size:13px;font-weight:300;color:var(--ink-400);line-height:1.5;margin-bottom:20px}
.advisor-options{display:grid;grid-template-columns:1fr;gap:8px}
.advisor-option{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:14px 16px;border:1px solid var(--warm-200);border-radius:var(--r-md);
  background:var(--off-white);cursor:pointer;min-height:44px;
  font-family:var(--f-sans);transition:border-color .15s,background .15s,box-shadow .15s;
}
.advisor-option:hover{border-color:var(--ink-500);background:var(--white);box-shadow:var(--shadow-sm)}
.advisor-option--selected{border-color:var(--ink-900);background:var(--white)}
.advisor-opt-title{font-size:13.5px;font-weight:500;color:var(--ink-700);line-height:1.3}
.advisor-opt-desc{font-size:12.5px;font-weight:300;color:var(--ink-400);line-height:1.5}
.advisor-option--selected .advisor-opt-title{color:var(--ink-900)}
/* Results */
.advisor-results{}.advisor-results--hidden{display:none}
.advisor-results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.advisor-results-label{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.advisor-restart-btn{font-family:var(--f-sans);font-size:12px;font-weight:400;color:var(--ink-400);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;min-height:44px}
.advisor-restart-btn:hover{color:var(--ink-700)}
.advisor-result-cards{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.advisor-result-card{padding:18px;border-radius:var(--r-lg);border:1px solid var(--warm-200);background:var(--off-white);display:flex;flex-direction:column;gap:7px}
.advisor-result-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.advisor-result-marker{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.advisor-result-marker--cloud{background:var(--green)}.advisor-result-marker--onprem{background:var(--blue)}
.advisor-result-marker--secure{background:var(--amber)}.advisor-result-marker--hybrid{background:var(--teal)}

.advisor-result-primary-badge{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--white);background:var(--ink-800);padding:3px 8px;border-radius:var(--r-sm)}
.advisor-result-name{font-family:var(--f-serif);font-weight:400;font-size:clamp(16px,1.8vw,19px);line-height:1.2;color:var(--ink-900)}
.advisor-result-rationale{font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-600)}
.advisor-result-link{font-size:12.5px;font-weight:500;color:var(--ink-600);text-decoration:underline;text-underline-offset:2px;align-self:flex-start;margin-top:2px}
.advisor-result-link:hover{color:var(--ink-900)}
.advisor-results-note{font-size:12px;font-weight:300;color:var(--ink-400);line-height:1.6;margin-bottom:16px;max-width:520px}
.advisor-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--f-sans);font-size:13.5px;font-weight:500;padding:10px 22px;border-radius:var(--r-md);background:var(--ink-900);color:var(--white);border:1px solid var(--ink-900);cursor:pointer;transition:background .2s;text-decoration:none;--amber:#f59e0b;}
.advisor-cta:hover{background:var(--ink-700)}

/* ══════════════════════════════════════════
   5. COMPARISON TABLE — white
   ══════════════════════════════════════════ */
.deploy-compare-section{padding:80px 0;background:var(--warm-50)}
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--warm-200);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);position:relative}
.compare-table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(to right,transparent,rgba(255,255,255,.95));pointer-events:none;border-radius:0 var(--r-lg) var(--r-lg) 0;transition:opacity .2s}
.compare-table-wrap.scrolled-right::after{opacity:0}
.compare-table{width:100%;border-collapse:collapse;background:var(--white);font-size:12px;min-width:640px}
.compare-table thead th{background:var(--navy);color:var(--white);font-family:var(--f-sans);font-size:11px;font-weight:500;text-align:center;padding:13px 10px;line-height:1.4;border-right:1px solid var(--navy-mid);white-space:nowrap;--amber:#f59e0b;}
.compare-table thead th:last-child{border-right:none}
.compare-table thead th.compare-feature-col{text-align:left;min-width:160px;padding-left:16px}
.compare-table tbody tr{border-bottom:1px solid var(--warm-100);transition:background .12s}
.compare-table tbody tr:last-child{border-bottom:none}
.compare-table tbody tr:hover{background:var(--warm-50)}
.compare-table tbody td{padding:10px;text-align:center;border-right:1px solid var(--warm-100);font-weight:300;color:var(--ink-600);white-space:nowrap}
.compare-table tbody td.compare-feature-col{text-align:left;font-size:12.5px;font-weight:400;color:var(--ink-700);padding-left:16px;white-space:normal}
.compare-table tbody td:last-child{border-right:none}
.ct-yes{font-size:11px;font-weight:500;color:var(--green)}.ct-no{font-size:11px;font-weight:300;color:var(--ink-400)}
.ct-partial{font-size:11px;font-weight:400;color:var(--amber)}.ct-label{font-size:11px;font-weight:400;color:var(--ink-500)}

/* ══════════════════════════════════════════
   6. SUPPORT MODELS — navy bg
   ══════════════════════════════════════════ */
.deploy-support-section{padding:80px 0;background:var(--navy);--amber:#f59e0b;}
.deploy-support-section .section-header h2{color:var(--white)}
.deploy-support-section .section-header p{color:rgba(255,255,255,.6)}
.deploy-support-section .section-header{margin-bottom:40px}
.support-grid{display:grid;grid-template-columns:1fr;gap:16px}
.support-card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.support-tier{
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  display:inline-block;padding:4px 10px;border-radius:var(--r-sm);
  background:rgba(21,128,61,.2);color:rgba(21,128,61,1);
  border:1px solid rgba(21,128,61,.3);align-self:flex-start;
}
.support-tier--ent{background:rgba(26,86,219,.2);color:#60a5fa;border-color:rgba(26,86,219,.3)}
.support-tier--app{background:rgba(180,83,9,.2);color:#fbbf24;border-color:rgba(180,83,9,.3)}
.support-card h3{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(18px,2vw,22px);line-height:1.2;color:var(--white);
}
.support-lead{font-size:13.5px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.7)}
.support-items{list-style:none;display:flex;flex-direction:column;gap:10px}
.support-items li{font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.55)}
.support-items li strong{font-weight:500;color:rgba(255,255,255,.85)}
.support-applies{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.support-tag{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5)}

/* ══════════════════════════════════════════
   7. MIGRATION — warm-50
   ══════════════════════════════════════════ */
.deploy-migration-section{padding:80px 0;background:var(--white);border-top:1px solid var(--warm-200)}
.migration-layout{display:grid;grid-template-columns:1fr;gap:48px}
.migration-text .section-tag{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.migration-text h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,3vw,38px);line-height:1.1;color:var(--ink-900);margin-bottom:20px}
.migration-text>p{font-size:14px;font-weight:300;line-height:1.7;color:var(--ink-500);max-width:520px;margin-bottom:0}
.migration-steps{display:flex;flex-direction:column;margin-top:32px}
.migration-step{display:flex;gap:20px;padding:18px 0;border-top:1px solid var(--warm-200)}
.migration-step:last-child{border-bottom:1px solid var(--warm-200)}
.migration-step-num{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.1em;color:var(--amber);flex-shrink:0;padding-top:3px}
.migration-step strong{display:block;font-size:13.5px;font-weight:500;color:var(--ink-800);margin-bottom:4px}
.migration-step p{font-size:13.5px;font-weight:300;line-height:1.6;color:var(--ink-500);margin:0}
.migration-card{background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:14px}
.migration-env-label{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--ink-400);text-transform:uppercase;margin-bottom:8px}
.migration-env-url{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--ink-700);background:var(--off-white);border:1px solid var(--warm-200);border-radius:var(--r-md);padding:10px 14px;word-break:break-all}
.migration-env-url--target{background:rgba(21,128,61,.05);border-color:rgba(21,128,61,.2);color:var(--green)}
.migration-divider{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:300;color:var(--ink-400);font-family:var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.migration-preserved{border-top:1px solid var(--warm-100);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.migration-preserved-title{font-size:9px;font-weight:500;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-400);margin-bottom:2px}
.migration-check-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:300;color:var(--ink-600)}

/* ══════════════════════════════════════════
   8. OEM — off-white
   ══════════════════════════════════════════ */
.deploy-oem-section{padding:80px 0;background:var(--off-white)}
.oem-layout{display:grid;grid-template-columns:1fr;gap:48px}
.oem-text .section-tag{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.oem-text h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,3vw,38px);line-height:1.1;color:var(--ink-900);margin-bottom:20px}
.oem-text>p{font-size:14px;font-weight:300;line-height:1.7;color:var(--ink-500);max-width:520px;margin-bottom:12px}
.oem-points{display:flex;flex-direction:column;margin-top:24px;margin-bottom:32px}
.oem-point{padding:14px 0;border-top:1px solid var(--warm-200)}
.oem-point:last-child{border-bottom:1px solid var(--warm-200)}
.oem-point-label{display:block;font-size:13.5px;font-weight:500;color:var(--ink-800);margin-bottom:4px}
.oem-point-desc{display:block;font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-500)}
.oem-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--f-sans);font-size:13.5px;font-weight:500;padding:10px 22px;border-radius:var(--r-md);background:var(--ink-900);color:var(--white);border:1px solid var(--ink-900);cursor:pointer;transition:background .2s;text-decoration:none;--amber:#f59e0b;}
.oem-cta:hover{background:var(--ink-700)}
.oem-aside{display:flex;flex-direction:column;gap:16px}
.oem-aside-card{background:var(--white);border:1px solid var(--warm-200);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px}
.oem-aside-card--note{background:var(--navy);border-color:var(--navy-mid);--amber:#f59e0b;}
.oem-aside-label{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.oem-suited-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.oem-suited-list li{font-size:13px;font-weight:300;color:var(--ink-600);padding-left:16px;position:relative;line-height:1.5}
.oem-suited-list li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--warm-300)}
.oem-aside-card--note p{font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.6)}
.oem-link{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:2px;align-self:flex-start}
.oem-link:hover{color:var(--white)}

/* ══════════════════════════════════════════
   9. CTA — navy close
   ══════════════════════════════════════════ */
/* ── CTA section ── */
.dep-cta-section {
  background: var(--navy); padding: 104px 52px;
  text-align: center; position: relative; overflow: hidden;--amber:#f59e0b;}
.dep-cta-section::before {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,74,128,.3), transparent 65%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.dep-cta-section::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .07;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 70%);
  pointer-events: none;
}
.dep-cta-inner { position: relative; z-index: 2; }
.dep-cta-section .section-tag {
  color: var(--amber); margin-bottom: 18px;
}
.dep-cta-inner h2 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  color: var(--white); letter-spacing: -.025em;
  line-height: 1.05; margin-bottom: 14px;
}
.dep-cta-inner p {
  font-size: 16px; font-weight: 300; color: rgba(255,255,255,.92);
  max-width: 380px; margin: 0 auto 32px; line-height: 1.55;
}
.dep-cta-btns {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.dep-cta-section .btn-white {
  font-size: 13.5px; font-weight: 500; letter-spacing: -.01em;
  padding: 12px 28px; border-radius: var(--r-sm);
  background: var(--white); color: var(--navy); border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  text-decoration: none; display: inline-flex; align-items: center;
  transition: opacity .18s, transform .1s;
}
.dep-cta-section .btn-white:hover { opacity: .93; }
.dep-cta-section .btn-white:active { transform: scale(.98); }
.btn-white{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--f-sans);font-size:13.5px;font-weight:500;padding:10px 22px;border-radius:var(--r-md);background:var(--white);color:var(--ink-900);border:1px solid var(--white);cursor:pointer;transition:background .2s;text-decoration:none}
.btn-white:hover{background:var(--off-white)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--f-sans);font-size:13.5px;font-weight:400;padding:10px 22px;border-radius:var(--r-md);background:transparent;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:border-color .2s,color .2s;text-decoration:none}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);color:var(--white)}

/* Focus */
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:var(--r-sm)}

/* ══════════════════════════════════════════
   HIGH CONTRAST
   ══════════════════════════════════════════ */
body.hc .deploy-principle-section { background: #00102a;--amber:#f59e0b;}
body.hc .principle-num { color: #ffffff; }
body.hc .principle-item h3 { color: #ffffff; }
body.hc .principle-item p { color: rgba(255,255,255,.75); }
body.hc .deploy-support-section{background:#00102a;--amber:#f59e0b;}
body.hc .dep-cta-section { background: #00102a;--amber:#f59e0b;}
body.hc .dep-cta-inner h2 { color: #ffffff; }
body.hc .dep-cta-inner p { color: rgba(255,255,255,.8); }
body.hc .oem-aside-card--note{background:#00102a;--amber:#f59e0b;}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET 640px+
   ══════════════════════════════════════════ */
@media(min-width:640px){
  .page-hero{padding:calc(104px + env(safe-area-inset-top,0px)) 0 80px}
/* principle-grid uses signal band layout — already 3-col */

  /* Models: 3 col for cloud family, 2 col for others */
  .model-family-cards{grid-template-columns:repeat(3,1fr)}
  .model-family-cards .model-card{border-right:1px solid var(--warm-200);border-bottom:none}
  .model-family-cards .model-card:last-child{border-right:none}
  .model-family-cards--two{grid-template-columns:1fr 1fr}
.model-family--onprem .model-family-cards{border-color:var(--warm-200)}
.model-family--onprem .model-family-cards .model-card{border-right-color:var(--warm-200)}

  .advisor-layout{grid-template-columns:220px 1fr;gap:40px}
  .advisor-options{grid-template-columns:1fr 1fr}
  .advisor-result-cards{grid-template-columns:1fr 1fr}

  .support-grid{grid-template-columns:1fr 1fr}

  .migration-layout{grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .oem-layout{grid-template-columns:1fr 1fr;align-items:start}

  .section-header{margin-bottom:52px}

  .deploy-models-section,.deploy-advisor-section,
  .deploy-compare-section,.deploy-support-section,.deploy-migration-section,
  .deploy-oem-section{padding:96px 0}
}

/* ══════════════════════════════════════════
   RESPONSIVE — DESKTOP 1024px+
   ══════════════════════════════════════════ */
@media(min-width:1024px){
  .page-hero{padding:calc(136px + env(safe-area-inset-top,0px)) 0 96px}
  .advisor-layout{grid-template-columns:280px 1fr;gap:60px}
  .support-grid{grid-template-columns:repeat(3,1fr)}
  .migration-layout{grid-template-columns:1fr 360px;gap:72px}
  .migration-visual{position:sticky;top:88px}
  .oem-layout{grid-template-columns:1fr 340px;gap:72px}
  .section-header{margin-bottom:56px}
  .model-card-top{height:160px}
  .deploy-models-section,.deploy-advisor-section,
  .deploy-compare-section,.deploy-support-section,.deploy-migration-section,
  .deploy-oem-section{padding:112px 0}

}



/* OEM aside note card — h4 and link button */
.oem-aside-h4{font-family:var(--f-serif);font-weight:400;font-size:clamp(15px,1.6vw,17px);line-height:1.3;color:var(--white)}
.oem-link-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font-family:var(--f-sans);font-size:13px;font-weight:500;padding:9px 18px;
  border-radius:var(--r-md);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9);
  cursor:pointer;transition:background .2s,border-color .2s;text-decoration:none;
  margin-top:4px;
}
.oem-link-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}

/* Migration section — now white, needs white bg for migration card to use off-white */
.deploy-migration-section .migration-card{background:var(--off-white)}
.deploy-migration-section .migration-env-url{background:var(--warm-50)}


/* ── Card-top background variants (matched to image content) ── */
.model-card-top--hosted{
  background:var(--warm-50);
}
.model-card-top--cloud{
  background:var(--warm-50);
}
/* Full-bleed cover — for managed hosting where image should fill completely */
.model-card-top--cloud-cover{
  background:var(--warm-50);
}
.model-card-top--cloud-cover .model-card-photo{
  object-fit:cover;
  padding:0;
  object-position:center 40%;   /* crop into the logo slightly for better fill */
}
.model-card-top--appliance{
  background:var(--warm-100);
  display:flex;align-items:center;justify-content:center;
}
.model-card-top--secure-img{
  background:var(--warm-100);
}

/* ── Photo positioning per type ── */

/* Hosted: contain with light padding so full rack is visible */
.model-card-top--hosted .model-card-photo{
  object-fit:contain;
  padding:12px;
}

/* Cloud: image fills card-top */
.model-card-top--cloud .model-card-photo{
  object-fit:cover;
  object-position:center;
}

/* Appliance: wide+short hardware — flex-centered, not absolutely placed */
.model-card-top--appliance .model-card-photo{
  position:relative;
  inset:unset;
  width:auto;
  height:auto;
  max-width:94%;
  max-height:88%;
  object-fit:contain;
  object-position:center;
  display:block;
  flex-shrink:0;
}


/* ══════════════════════════════════════════
   3b. ON-PREMISE ARCHITECTURE — warm-50 bg
   ══════════════════════════════════════════ */
.deploy-arch-section{padding:80px 0;background:var(--warm-50);border-top:1px solid var(--warm-200)}

.arch-intro{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:40px}
.arch-intro-text .section-tag{display:block;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.arch-intro-text h2{font-family:var(--f-serif);font-weight:400;font-size:clamp(24px,3.2vw,40px);line-height:1.1;color:var(--ink-900);margin-bottom:14px}
.arch-intro-text p{font-size:14px;font-weight:300;line-height:1.7;color:var(--ink-500);max-width:600px}

.arch-node-legend{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-start;padding-top:4px}
.arch-legend-item{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;color:var(--ink-500);font-family:var(--f-mono);letter-spacing:.02em;white-space:nowrap}
.arch-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.arch-legend-dot--lb     {background:#1a56db}
.arch-legend-dot--bal    {background:#0c1f3d;--amber:#f59e0b;}
.arch-legend-dot--render {background:#b45309}
.arch-legend-dot--storage{background:#0e7490}
.arch-legend-dot--nfs    {background:#6d28d9;border:1px dashed rgba(109,40,217,.5)}

/* Shell */
.arch-shell{
  background:var(--white);
  border:1px solid var(--warm-200);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

/* Counter controls */
.arch-counters{
  display:flex;align-items:center;gap:0;
  border-bottom:1px solid var(--warm-200);
  background:var(--white);
  flex-wrap:wrap;
}
.arch-counter-group{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px;flex:1;min-width:160px;
}
.arch-counter-group--dc{
  background:rgba(12,31,61,.03);
}
.arch-counter-group--dc .arch-counter-label{
  font-weight:500;color:var(--ink-700);
}
.arch-counter-group--dc .arch-counter-val{
  color:var(--navy);
}
.arch-counter-divider{
  width:1px;height:40px;background:var(--warm-200);flex-shrink:0;
}
.arch-counter-label{
  font-family:var(--f-sans);font-size:12px;font-weight:400;
  color:var(--ink-500);white-space:nowrap;flex:1;
}
.arch-counter-controls{
  display:flex;align-items:center;gap:8px;
}
.arch-counter-btn{
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--warm-300);background:var(--white);
  font-size:16px;font-weight:300;color:var(--ink-600);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
  line-height:1;padding:0;
  font-family:var(--f-sans);
}
.arch-counter-btn:hover{border-color:var(--ink-500);background:var(--warm-50)}
.arch-counter-btn:disabled{opacity:.3;cursor:not-allowed}
.arch-counter-val{
  font-family:var(--f-mono);font-size:16px;font-weight:600;
  color:var(--ink-900);min-width:20px;text-align:center;
}
.arch-reset-btn{
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-400);background:none;border:none;
  cursor:pointer;padding:14px 20px;
  transition:color .15s;white-space:nowrap;
}
.arch-reset-btn:hover{color:var(--ink-700)}

/* Diagram */
.arch-diagram-wrap{
  padding:28px 20px 20px;
  background:#f7f6f2;
  border-bottom:1px solid var(--warm-200);
}
.arch-svg{
  width:100%;height:auto;display:block;
  /* height determined by viewBox — no cap needed for vertical stacking */
}

/* Context */
.arch-context{
  padding:16px 24px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--warm-100);
  background:var(--off-white);
  flex-wrap:wrap;
}
.arch-context-text{
  font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-500);
  max-width:600px;margin:0;
}
.arch-add-render{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber);
  background:none;border:1px solid var(--amber);
  padding:6px 12px;border-radius:var(--r-sm);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .15s,color .15s;min-height:36px;
}
.arch-add-render:hover{background:var(--amber);color:var(--white)}
.arch-add-render svg{flex-shrink:0}

/* Responsive */
@media(min-width:640px){
  .arch-intro{grid-template-columns:1fr auto;align-items:start}
  .arch-node-legend{flex-direction:column;gap:10px}
  .deploy-arch-section{padding:96px 0}
}
@media(min-width:1024px){
  .deploy-arch-section{padding:112px 0}
}


/* Mode tabs */
.arch-tabs{
  display:flex;
  border-bottom:1px solid var(--warm-200);
  background:var(--white);
}
.arch-tab{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 24px;text-align:left;
  background:none;border:none;border-right:1px solid var(--warm-200);
  cursor:pointer;flex-shrink:0;
  border-bottom:3px solid transparent;
  margin-bottom:-1px;
  transition:background .15s;font-family:var(--f-sans);
}
.arch-tab:last-child{border-right:none}
.arch-tab:hover{background:var(--warm-50)}
.arch-tab--active{background:var(--white);border-bottom-color:var(--amber)}
.arch-tab-title{font-size:13px;font-weight:500;color:var(--ink-600);line-height:1.3}
.arch-tab--active .arch-tab-title{color:var(--ink-900);font-weight:600}
.arch-tab-desc{font-family:var(--f-mono);font-size:8.5px;font-weight:400;color:var(--ink-400);letter-spacing:.03em}

/* Advisory banner */
.arch-advisory{
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 20px;
  background:rgba(180,83,9,.06);
  border-bottom:1px solid rgba(180,83,9,.15);
  color:var(--amber);
}
.arch-advisory svg{flex-shrink:0;margin-top:1px}
.arch-advisory span{
  font-size:12.5px;font-weight:300;line-height:1.5;color:var(--ink-600);
}


/* LP overflow toggle */
.arch-lp-toggle{
  display:flex;flex-direction:column;gap:3px;
  padding:12px 20px;
  background:rgba(21,128,61,.03);
  flex:1;
}
.arch-lp-toggles{
  display:flex;flex-direction:row;
  border-bottom:1px solid var(--warm-200);
  background:rgba(21,128,61,.03);
  gap:0;
}
.arch-lp-toggles .arch-lp-toggle{
  border-right:1px solid var(--warm-200);
}
.arch-lp-toggles .arch-lp-toggle:last-child{
  border-right:none;
}
.arch-lp-label{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-sans);font-size:13px;font-weight:500;
  color:var(--ink-900);cursor:pointer;
}
.arch-lp-label input[type="checkbox"]{
  width:16px;height:16px;cursor:pointer;accent-color:#15803d;flex-shrink:0;
}
.arch-lp-sub{
  font-family:var(--f-mono);font-size:8.5px;font-weight:400;
  color:#14532d;letter-spacing:.03em;padding-left:25px;opacity:.8;
}


/* Export buttons */
.arch-export-btns{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.arch-export-label{
  font-family:var(--f-mono);font-size:8.5px;font-weight:500;
  color:var(--ink-400);letter-spacing:.07em;text-transform:uppercase;
  margin-right:2px;
}
.arch-export-btn{
  font-family:var(--f-mono);font-size:9px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-600);background:var(--white);
  border:1px solid var(--warm-300);border-radius:var(--r-sm);
  padding:5px 10px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.arch-export-btn:hover{
  border-color:var(--ink-500);color:var(--ink-900);background:var(--warm-50);
}


@media (max-width: 1024px) {
  .dep-cta-section { padding: 80px 32px; }
}
@media (max-width: 768px) {
  .dep-cta-section { padding: 72px 20px; }
}
@media (max-width: 480px) {
  .dep-cta-section { padding: 56px 16px; }
}


@media (max-width: 1024px) {
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .principle-div { display: none; }
  .principle-item { padding: 36px 32px; }
  .principle-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
  .principle-item:nth-child(1),
  .principle-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .principle-item p { min-height: auto; }
}
@media (max-width: 768px) {
  .principle-grid { grid-template-columns: 1fr; }
  .principle-item {
    padding: 28px 20px;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  .principle-item:last-child { border-bottom: none !important; }
}

/* overflow guard */
.page-hero,.deploy-principle-section,.deploy-models-section,.deploy-advisor-section,
.deploy-compare-section,.deploy-support-section,.deploy-migration-section,
.deploy-oem-section,.deploy-cta-section{overflow-x:hidden}