:root {
  --navy:  #222222;
  --rust:  #C8704A;
  --mid:   #555555;
  --lt:    #E8EDF3;
  --off:   #F7F8FA;
  --dark:  #222222;
  --body:  #222222;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Google Sans', sans-serif;
  background: #fff;
  color: #222222;
  line-height: 1.75;
}

/* ── NAV ── */
nav {
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EAECF0;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  z-index: 100;
}
.nav-logo {
  font-family: 'Google Sans Mono', monospace;
  font-size: 13px;
  color: #222222;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 13px;
  color: var(--mid);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s;
}
.nav-links a:hover { color: #222222; }

/* ── HERO ── */


.hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 138px 60px;
}
.hero-tag {
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  color: var(--rust);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero-title {
  font-family: 'Google Sans Display', sans-serif;
  font-size: clamp(36px, 5vw, 52px);
  color: #222222;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.hero-desc {
  font-size: 17px;
  color: #222222;
  line-height: 1.75;
  font-weight: 300;
  max-width: 960px;
}
.hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #EAECF0;
  flex-wrap: wrap;
}
.meta-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.meta-val {
  font-size: 14px;
  font-weight: 500;
  color: #222222;
}

/* ── HERO IMAGE ── */

.hero-img {
  
  width: 100%;
  margin: 0 auto;
  background: #E8F5FF;
  height: 620px;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hero-dash {
  width: 75%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.92;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hero-dash img{
  width: 100%;
}
.hd-topbar {
  background: var(--navy);
  padding: 10px 16px;
  display: flex;
  gap: 16px;
}
.hd-nav-item { font-size: 11px; color: rgba(255,255,255,0.55); }
.hd-nav-item.active { color: #fff; }
.hd-table-head {
  background: var(--navy);
  border-radius: 4px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr repeat(4,60px);
  gap: 6px;
  margin-bottom: 4px;
}
.hd-th { font-size: 9px; color: rgba(255,255,255,0.7); font-weight: 500; }
.hd-row {
  display: grid;
  grid-template-columns: 1fr repeat(4,60px);
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.hd-td { font-size: 9px; color: #444; }
.hd-badge { font-size: 8px; padding: 2px 6px; border-radius: 3px; font-weight: 500; }

/* ── CONTENT ── */
.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 72px 138px;
}

/* TL;DR */
.tldr {
  background: var(--lt);
  border-left: 4px solid var(--rust);
  padding: 28px 32px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 72px;
}
.tldr-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.tldr-text {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  line-height: 1.65;
}

/* ── SECTION ── */
.bi-colum-img{
  display: flex;
  padding: 0px;
  width: 50%;
  gap: 12px;
  margin: 32px 0;
}
.section { margin-bottom: 72px; }
.section img{
  width: 100%;
  padding: 3%;
  background: var(--lt);
  border-radius: 8px;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #C8D4E0;
  color: var(--mid);
}

h2 {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 30px;
  color: #222222;
  margin-bottom: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3 {
  font-family: 'Google Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #222222;
  margin: 32px 0 10px;
}
p {
  font-size: 16px;
  color: #222222;
  line-height: 1.78;
  margin-bottom: 20px;
}
p:last-child { margin-bottom: 0; }

/* Eyebrow */
.eyebrow {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

/* Blockquote */
blockquote {
  margin: 36px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--rust);
  background: var(--off);
}
blockquote p {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 19px;
  font-style: italic;
  color: #222222;
  margin: 0;
  line-height: 1.55;
}
blockquote cite {
  display: block;
  font-size: 12px;
  font-family: 'Google Sans Mono', monospace;
  color: var(--mid);
  margin-top: 10px;
  font-style: normal;
  letter-spacing: 0.06em;
}

/* Pain points */
.pain-points { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.pain-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  background: var(--off);
  border: 1px solid #EAECF0;
  border-radius: 8px;
  overflow: hidden;
}
.pain-num {
  background: var(--rust);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Google Sans Display', sans-serif;
  font-size: 18px;
  color: #fff;
}
.pain-body { padding: 14px 18px; }
.pain-title { font-size: 14px; font-weight: 500; color: #222222; margin-bottom: 4px; }
.pain-desc { font-size: 13px; color: #222222; line-height: 1.6; margin: 0; }

/* User grid */
.user-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 24px 0; }
.user-card {
  padding: 18px;
  border: 1px solid #EAECF0;
  border-radius: 8px;
  background: #fff;
}
.user-card.primary { border-color: #222222; background: var(--lt); }
.user-badge {
  font-family: 'Google Sans Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 8px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
}
.user-badge.primary { background: var(--navy); color: #fff; }
.user-badge.secondary { background: #EAECF0; color: var(--mid); }
.user-title { font-size: 13px; font-weight: 500; color: #222222; margin-bottom: 6px; }
.user-desc { font-size: 12px; color: #222222; line-height: 1.6; margin: 0; }

/* Solution label */
.solution-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  color: #222222;
  background: var(--lt);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* Decision box */

.legacy{
  max-width: 100%;
  display: flex;
  column-gap: 32PX;
  justify-content: center;
  align-items: center;
  padding: 0px 0px 14px 0px

}
.legacy img{
  filter: brightness(1.18);
  max-width: 40%;
  border-radius: 5px;
  border: 1px solid #737373;
}
.legacy h5{
  margin-top: 12px;
}
.legacy ul{
  margin-left: 24px;
  margin-top: 6px;
}

.decision-box {
  background: #FDF4EF;
  border: 1px solid #F0D0C0;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.decision-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  color: var(--rust);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.decision-text {
  font-size: 15px;
  color: #222222;
  line-height: 1.7;
  margin: 0;
}

/* Image placeholder */
.img-placeholder {
  width: 100%;
  background: var(--lt);
  border-radius: 8px;
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #C8D4E0;
  color: var(--mid);
}
.img-placeholder.tall { height: 320px; }
.img-placeholder.short { height: 200px; }
.img-ph-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 11px;
  text-align: left;
  line-height: 1.5;
}
.img-ph-icon { font-size: 24px; opacity: 0.4; }

/* Reflection */
.reflection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.ref-card { padding: 20px; border-radius: 8px; }
.ref-card.do { background: #EAF3DE; border: 1px solid #C0DD97; }
.ref-card.dont { background: var(--lt); border: 1px solid #C8D4E0; }
.ref-card-label {
  font-family: 'Google Sans Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.ref-card.do .ref-card-label { color: #3B6D11; }
.ref-card.dont .ref-card-label { color: var(--mid); }
.ref-item {
  font-size: 13px;
  color: #222222;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ref-item:last-child { border-bottom: none; }

/* Outcome */
.outcome-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin: 28px 0;
}
.outcome-card {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  background: var(--off);
}
.outcome-num {
  font-family: 'Google Sans Display', sans-serif;
  font-size: 32px;
  color: #222222;
  line-height: 1;
  margin-bottom: 6px;
}
.outcome-label { font-size: 12px; color: #222222; line-height: 1.5; }

/* Divider */
hr { border: none; border-top: 1px solid #EAECF0; margin: 64px 0; }
.inner-section-hr{
  border: none; border-top: 1px solid #EAECF0; margin: 12px 0;
}

/* Footer */
footer {
  border-top: 1px solid #EAECF0;
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left { font-size: 13px; color: var(--mid); }
.footer-right { font-size: 13px; color: var(--mid); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .hero { padding: 48px 23px 40px; }
  .content { padding: 48px 23px; }
  .user-grid { grid-template-columns: 1fr; }
  .reflection-grid { grid-template-columns: 1fr; }
  .outcome-row { grid-template-columns: 1fr; }
  .hero-img { height: 260px; }
}


/* ── ACCORDION ── */
.alist{display:flex;flex-direction:column;gap:.5rem;margin:24px 0}
.ai{border-left:3px solid var(--rust);background:#FDF4EF;overflow:hidden;border-radius:0 4px 4px 0}
.ai-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;transition:background .18s}
.ai-header:hover{background:#F9EAE0}
.aa{color:var(--rust);font-size:14px;flex-shrink:0;font-weight:500}
.ai-title{flex:1;font-size:14px;line-height:1.5;color:#222}
.ai-title strong{color:#222;font-weight:500}
.chevron{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#999;transition:transform .3s}
.ai.open .chevron{transform:rotate(180deg);color:var(--rust)}
.ai-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.ai.open .ai-body{max-height:1200px}
.ai-body-inner{padding:0 18px 18px;border-top:1px solid #F0D0C0}
.ai-desc{font-size:14px;line-height:1.8;color:#555;padding-top:12px;max-width:72ch}

/* ── WORKFLOW INDICATOR ── */
.workflow{display:flex;align-items:center;margin-bottom:24px;border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
.wf-step{flex:1;padding:14px 18px;border-right:1px solid #EAECF0}
.wf-step:last-child{border-right:none}
.wf-step.active{background:#222}
.wf-num{font-family:'Google Sans Mono',monospace;font-size:10px;color:#999;margin-bottom:3px}
.wf-step.active .wf-num{color:rgba(255,255,255,.45)}
.wf-name{font-size:13px;font-weight:500;color:#222}
.wf-step.active .wf-name{color:#fff}
.wf-sub{font-size:12px;color:#888;margin-top:2px}
.wf-step.active .wf-sub{color:rgba(255,255,255,.45)}
.wf-arrow{display:flex;align-items:center;justify-content:center;width:32px;color:#ccc;font-size:12px;flex-shrink:0}

/* ── LOGIC EMBED ── */
.logic-embed{border:1px solid #EAECF0;border-radius:8px;overflow:hidden;margin-top:20px}
.le-head{padding:10px 16px;background:#F7F8FA;border-bottom:1px solid #EAECF0;display:flex;align-items:center;justify-content:space-between}
.le-label{font-family:'Google Sans Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#888}
.le-sub{font-size:11px;color:#aaa;font-style:italic}
.logic-grid{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr;align-items:start;gap:0;padding:16px;background:#fff}
.lg-col-head{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#999;padding-bottom:8px;border-bottom:1px solid #EAECF0;margin-bottom:12px}
.lg-dropdown{border:1px solid #EAECF0;background:#fff;overflow:hidden;margin-bottom:6px;border-radius:4px}
.lg-dd-label{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:6px 10px 4px;background:#F7F8FA;border-bottom:1px solid #EAECF0}
.lg-option{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:#555;border-bottom:1px solid #EAECF0;cursor:pointer;transition:background .1s}
.lg-option:last-child{border-bottom:none}
.lg-option:hover{background:#F7F8FA}
.lg-option.sel{background:#222;color:#fff}
.lg-option.auto{background:rgba(44,110,138,.07);color:#2c6e8a;pointer-events:none}
.lg-option.off{background:#F7F8FA;color:#ccc;pointer-events:none}
.lg-dot{width:6px;height:6px;border-radius:50%;background:#ccc;flex-shrink:0}
.lg-option.sel .lg-dot{background:#fff}
.lg-option.auto .lg-dot{background:#2c6e8a}
.lg-auto-badge{font-family:'Google Sans Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;background:rgba(44,110,138,.15);color:#2c6e8a;padding:2px 5px;border-radius:2px;margin-left:auto}
.lg-arrow{display:flex;align-items:center;justify-content:center;padding-top:32px}
.lg-output{border:1px solid #EAECF0;overflow:hidden;border-radius:4px}
.lg-out-head{padding:7px 10px;font-size:11px;font-weight:500;border-bottom:1px solid #EAECF0}
.lg-out-head.a{background:rgba(44,110,138,.07);color:#2c6e8a}
.lg-out-head.b{background:rgba(46,125,50,.07);color:#2e7d32}
.lg-out-head.c{background:rgba(123,94,167,.07);color:#7b5ea7}
.lg-out-body{padding:8px 10px}
.lg-field{padding:4px 0;border-bottom:1px dashed #EAECF0;font-size:12px;color:#555}
.lg-field:last-child{border-bottom:none}
.lg-field strong{color:#222;display:block;font-family:'Google Sans Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.lg-combo-tabs{display:flex;border-bottom:1px solid #EAECF0}
.lg-tab{flex:1;padding:8px 10px;font-family:'Google Sans Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;text-align:center;cursor:pointer;color:#999;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;user-select:none}
.lg-tab.on{color:var(--rust);border-bottom-color:var(--rust)}
.lg-panel{display:none;padding:16px}
.lg-panel.on{display:block}
.lg-note{font-size:12px;color:#555;line-height:1.65;padding:10px 14px;background:rgba(44,110,138,.06);border-left:2px solid #2c6e8a;margin-top:12px;border-radius:0 4px 4px 0}

/* ── IMAGE PLACEHOLDER ── */
.iph{margin-top:20px;width:100%;border:1px dashed #C8D4E0;background:#F7F8FA;display:flex;align-items:center;justify-content:center;padding:40px 24px;border-radius:8px;position:relative;overflow:hidden}
.iph::before{content:'';position:absolute;inset:0;background:linear-gradient(#EAECF0 1px,transparent 1px),linear-gradient(90deg,#EAECF0 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.ipl{font-family:'Google Sans Mono',monospace;font-size:11px;color:#999;position:relative;z-index:1;text-align:center}
.iph.tall{height:280px}
.iph.short{height:160px}

/* ── ANNOTATION ── */
.ann{color:#b43232;font-size:13px;line-height:1.65;font-style:italic;margin-top:16px;padding:12px 16px;border-left:3px solid #b43232;background:rgba(180,50,50,.05);display:flex;align-items:flex-start;gap:8px;border-radius:0 4px 4px 0}
.ann::before{content:'✎';flex-shrink:0;font-style:normal;margin-top:1px}

/* ── THUMBNAIL ── */
.thumbnail{padding:32px;background:#E8EDF3;display:flex;align-items:center;justify-content:center;border-radius:8px}
.thumbnail-img{width:65%;border:3px solid #2C608A;border-radius:6px}
.thumbnail-caption{font-size:13px;font-style:italic;margin-top:12px;text-align:center;color:#555}
.ai-body-inner img{margin:16px 0;border:1px solid #EAECF0;border-radius:4px;width:80%;display:block}

/* ── REVEAL ── */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}
.rev.on{opacity:1;transform:none}

/* ── NUMBERED PROBLEM LIST ── */
.problem-list{

  margin:20px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-left:0;
  list-style:none;
  counter-reset:problem
}
.problem-list li{counter-increment:problem;padding-left:40px;position:relative;width: 80%;}
.problem-list li strong{display:block;font-size:15px;font-weight:500;color:#222;margin-bottom:6px}
.problem-list li p{font-size:14px;line-height:1.7;color:var(--mid);margin:0}

/* ── LEGACY IMAGE GALLERY ── */
.legacy-img-gallery{margin-top:24px;display:grid;row-gap:24px}
.legacy-img-gallery img{border:1px solid #222;border-radius:6px;width:40%}
.image-with-caption{display:flex;column-gap:16px}
.caption-number{display:flex;width:1.25rem;height:1.25rem;border-radius:24px;align-items:center;justify-content:center;color:#2C608A;border:1px solid #2C608A;font-size:.75rem;margin-top:2px;flex-shrink:0}
.caption-title{display:flex;column-gap:8px}

/* ── OPPORTUNITY CARDS ── */
.opp-list{display:flex;flex-direction:column;gap:40px;margin:28px 0}
.opp-card{display:grid;grid-template-columns:48px 1fr;gap:0 24px;align-items:start}
.opp-label{font-family:'Google Sans Mono',monospace;font-size:11px;font-weight:500;color:var(--rust);border-top:2px solid var(--rust);padding-top:8px;letter-spacing:.05em}
.opp-title{font-size:18px;font-weight:500;color:#222;margin:0 0 12px;letter-spacing:-.01em}
.opp-content p{font-size:15px;line-height:1.75;color:var(--mid);margin-bottom:16px}
.opp-content p:last-of-type{margin-bottom:0}
.opp-img{width:100%;border:1px solid #EAECF0;border-radius:6px;display:block;margin:20px 0}

/* ── OUTCOME CHECK (circle with checkmark) ── */
.outcome-check{
  width:40px;height:40px;
  background:#2e7d32;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.outcome-check svg{display:block}
/* override pain-card grid to align icon to center */
.pain-card.outcome{align-items:center}

/* ── CAROUSEL ── */
.prob-carousel-wrap{margin-top:20px}
.prob-carousel{border:1px solid #EAECF0;border-radius:8px;overflow:hidden}
.prob-carousel .carousel-inner{background:#F7F8FA}
.prob-carousel .carousel-item img{width:100%;height:320px;object-fit:contain;object-position:center;display:block}
.prob-carousel .carousel-caption{position:static;background:#fff;padding:14px 18px;text-align:left;color:#222}
.prob-carousel .carousel-caption h5{font-family:'Google Sans',sans-serif;font-size:13px;font-weight:500;color:#222;margin-bottom:4px}
.prob-carousel .carousel-caption p{font-size:12px;color:#555;line-height:1.6;margin:0}
.prob-carousel .carousel-control-prev,
.prob-carousel .carousel-control-next{width:36px;height:36px;background:#fff;border:1px solid #EAECF0;border-radius:50%;top:160px;transform:translateY(-50%);bottom:auto;opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.prob-carousel .carousel-control-prev{left:10px}
.prob-carousel .carousel-control-next{right:10px}
.prob-carousel .carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M8 2L4 6L8 10' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
.prob-carousel .carousel-control-next-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 2L8 6L4 10' stroke='%23222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}
.prob-carousel .carousel-indicators{bottom:auto;top:332px;margin:0;justify-content:flex-start;padding-left:18px}
.prob-carousel .carousel-indicators li{background:#EAECF0;width:18px;height:3px;border-radius:2px;border:none}
.prob-carousel .carousel-indicators li.active{background:#C8704A}
.carousel-step-badge{font-family:'Google Sans Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#C8704A;margin-bottom:3px;display:block}

.mapping-process-section{
  width: 100%;
  display: block;
}
.userflow-diagram img{
  width: 100%;
}
.userflow-desc ol{
  margin-left: 32px;
}
.userflow-desc p{
  background: #FDF4EF;
  border: 1px solid #F0D0C0;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}

.userflow-desc h3{
  margin-top: 0px;
}

@media(max-width:640px){
  .problem-list li::before{display:inline-flex;margin-bottom:4px}
  .opp-card{grid-template-columns:1fr}
  .opp-label{border-top:none;border-left:2px solid var(--rust);padding:0 0 0 10px;margin-bottom:8px}
  .logic-grid{grid-template-columns:1fr}
  .lg-arrow{display:none}
}