.assure{
  --side:clamp(1.25rem,4vw,3.5rem);
  --accent:#FF6001;            /* orange highlight for the active element in each "What you keep" tile */
  position:relative;
  background:var(--secondary);color:var(--foreground);
  padding:clamp(4.5rem,10vh,8rem) var(--side) clamp(4.5rem,10vh,8rem);
  overflow:hidden;
}
.assure .kicker{color:color-mix(in oklch,var(--foreground) 50%,transparent);}
.assure-top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(2.5rem,5vh,3.5rem);
}
.assure h2{
  margin:0;
  font-size:clamp(1.875rem,4.4vw,3.5rem);
  font-weight:600;line-height:1.02;
  letter-spacing:-.032em;text-transform:uppercase;
}
.assure h2 .dim{color:var(--muted-foreground);}
.assure-note{
  margin:0;max-width:44ch;
  color:var(--muted-foreground);
  font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.6;
}

/* --- rail controls --- */
.rail-bar{
  display:flex;align-items:center;gap:1.25rem;
  padding-bottom:.5rem;
}
.rail-track{
  position:relative;flex:1;height:2px;
  background:color-mix(in oklch,var(--foreground) 12%,transparent);
  border-radius:9999px;overflow:hidden;
}
.rail-fill{
  position:absolute;top:0;bottom:0;left:0;width:25%;
  background:var(--foreground);border-radius:9999px;
  transition:left .18s linear,width .18s linear;
}
.rail-btns{display:flex;gap:.5rem;flex-shrink:0;}
.rail-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:9999px;
  background:var(--card);color:var(--foreground);
  border:0;outline:1px solid color-mix(in oklch,var(--foreground) 10%,transparent);
  outline-offset:-1px;cursor:pointer;
  transition:all .2s;
}
.rail-btn svg{width:1.0625rem;height:1.0625rem;}
.rail-btn:hover:not(:disabled){background:var(--foreground);color:var(--background);}
.rail-btn:disabled{opacity:.32;cursor:default;}
.rail-hint{
  flex-shrink:0;color:var(--muted-foreground);
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
}

/* --- the rail --- */
.rail-wrap{margin:0 calc(-1 * var(--side));}
.rail{
  display:flex;gap:clamp(1rem,1.6vw,1.5rem);
  padding:1.5rem var(--side) 3.75rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{display:none;}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.rail.dragging *{pointer-events:none;}

.tile{
  flex:0 0 auto;
  width:clamp(22rem,42vw,36rem);
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  padding:clamp(1.625rem,2.4vw,2.25rem);
  border-radius:var(--r-4xl);
  background:var(--card);
  box-shadow:0 4px 6px -1px color-mix(in oklch,var(--foreground) 6%,transparent);
  outline:1px solid color-mix(in oklch,var(--foreground) 5%,transparent);
  outline-offset:-1px;
  opacity:.38;transform:scale(.955);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),
             transform .45s cubic-bezier(.16,1,.3,1),
             box-shadow .45s;
}
.tile.active{
  opacity:1;transform:none;
  box-shadow:0 22px 38px -16px color-mix(in oklch,var(--foreground) 22%,transparent);
}
.tile.active:hover{transform:translateY(-4px);}
.tile-title{
  margin:1.75rem 0 .5625rem;
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  font-weight:600;line-height:1.2;letter-spacing:-.02em;
}
.tile-body{
  margin:0;color:var(--muted-foreground);
  font-size:.875rem;line-height:1.55;
}

/* --- shared stage for the animated visual --- */
.viz{
  position:relative;
  height:clamp(15rem,30vh,20rem);
  border-radius:var(--r-3xl);
  background:var(--muted);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:1.375rem 1.5rem;
  outline:1px solid color-mix(in oklch,var(--foreground) 4%,transparent);
  outline-offset:-1px;
}

/* 1 - brand voice: typing */
.type-line{
  font-size:.8125rem;line-height:1.5;
  white-space:nowrap;overflow:hidden;
  width:0;border-right:1.5px solid var(--foreground);
  margin-bottom:.875rem;
}
.tile.in .type-line{animation:typing 7s steps(38) infinite;}
@keyframes typing{
  0%{width:0} 38%{width:19.5em} 82%{width:19.5em} 88%{width:0} 100%{width:0}
}
.chips{display:flex;flex-wrap:wrap;gap:.375rem;}
.chip{
  display:inline-flex;align-items:center;gap:.3125rem;
  padding:.1875rem .5rem;border-radius:9999px;
  background:var(--card);
  outline:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  outline-offset:-1px;
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted-foreground);opacity:.35;
}
.chip svg{width:.6875rem;height:.6875rem;flex-shrink:0;}
.tile.in .chip{animation:chipOn 7s ease-in-out infinite;}
.tile.in .chip:nth-child(2){animation-delay:.35s;}
.tile.in .chip:nth-child(3){animation-delay:.7s;}
@keyframes chipOn{
  0%,42%{opacity:.3;color:var(--muted-foreground);}
  52%,80%{opacity:1;color:var(--accent);}   /* tile 2: chips highlight orange text when active */
  92%,100%{opacity:.3;}
}
/* tile 6: chips fill orange when active (like the tile-5 node chips), instead of just orange text */
.tile.in .chip.fill{animation-name:chipFill;}
@keyframes chipFill{
  0%,42%{opacity:.3;background:var(--card);color:var(--muted-foreground);}
  52%,80%{opacity:1;background:var(--accent);color:#fff;}
  92%,100%{opacity:.3;}
}

/* 2 - compliance: numbers washing */
.rows{display:flex;flex-direction:column;gap:.6875rem;}
.row-i{
  display:flex;align-items:center;gap:.625rem;
  font-size:.75rem;font-variant-numeric:tabular-nums;
  color:var(--muted-foreground);opacity:0;
}
.tile.in .row-i{animation:rowIn 6s ease-in-out infinite;}
.tile.in .row-i:nth-child(2){animation-delay:.5s;}
.tile.in .row-i:nth-child(3){animation-delay:1s;}
.tile.in .row-i:nth-child(4){animation-delay:1.5s;}
@keyframes rowIn{
  0%{opacity:0;transform:translateX(-6px);}
  12%,85%{opacity:1;transform:none;}
  95%,100%{opacity:0;}
}
.row-i .n{flex:1;}
.badge-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.125rem;height:1.125rem;border-radius:9999px;
  background:var(--accent);color:#fff;flex-shrink:0;   /* tile 1: check marks highlighted orange (blocked X overridden below) */
}
.badge-i svg{width:.625rem;height:.625rem;}
.row-i.blocked{color:color-mix(in oklch,var(--foreground) 35%,transparent);}
.row-i.blocked .n{text-decoration:line-through;}
.row-i.blocked .badge-i{
  background:transparent;color:var(--muted-foreground);
  outline:1px solid var(--border);outline-offset:-1px;
}
.wash-note{
  margin-top:.75rem;font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-foreground);
}
.wash-note.on{color:var(--accent);}   /* tile 3: "A sequence built for this one contact" highlighted orange */

/* 3 - your infrastructure */
.grid-i{display:grid;grid-template-columns:repeat(3,1fr);gap:.5625rem;}
.node{
  display:flex;align-items:center;justify-content:center;
  height:2.375rem;border-radius:var(--r-2xl);
  background:var(--card);
  outline:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  outline-offset:-1px;
  font-size:.625rem;font-weight:600;color:var(--muted-foreground);
}
.tile.in .node{animation:nodeOn 5s ease-in-out infinite;}
.tile.in .node:nth-child(2){animation-delay:.18s;}
.tile.in .node:nth-child(3){animation-delay:.36s;}
.tile.in .node:nth-child(4){animation-delay:.54s;}
.tile.in .node:nth-child(5){animation-delay:.72s;}
.tile.in .node:nth-child(6){animation-delay:.9s;}
@keyframes nodeOn{
  0%,55%{background:var(--card);color:var(--muted-foreground);}
  18%,30%{background:var(--accent);color:#fff;}   /* tile 5: node chips fill orange when active */
  100%{background:var(--card);color:var(--muted-foreground);}
}
.conn{
  margin-top:.75rem;display:flex;align-items:center;gap:.4375rem;
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted-foreground);
}
.dot-live{width:.4375rem;height:.4375rem;border-radius:9999px;background:var(--foreground);}
.tile.in .dot-live{animation:blip 1.8s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

/* 4 - audit log */
.log{position:relative;height:100%;overflow:hidden;}
.log::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--muted),transparent 22%,transparent 78%,var(--muted));
}
.log-track{display:flex;flex-direction:column;gap:.6875rem;}
.tile.in .log-track{animation:scrollUp 12s linear infinite;}
@keyframes scrollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.log-i{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.6875rem;color:var(--muted-foreground);white-space:nowrap;
}
.log-i time{
  font-variant-numeric:tabular-nums;flex-shrink:0;
  color:color-mix(in oklch,var(--foreground) 40%,transparent);
}
.log-i b{font-weight:600;color:var(--accent);}   /* tile 4: bold call/email words highlighted orange */

/* 5 - documents: a proposal (tile 7) and a seller playbook (tile 6) build on screen */
.doc{
  position:relative;
  background:var(--card);
  border-radius:var(--r-2xl);
  outline:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);outline-offset:-1px;
  padding:1rem 1.125rem;
  display:flex;flex-direction:column;gap:.5625rem;
  box-shadow:0 12px 26px -16px color-mix(in oklch,var(--foreground) 34%,transparent);
  opacity:0;transform:translateY(12px) scale(.965);
}
.tile.in .doc{animation:docIn 7s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes docIn{
  0%{opacity:0;transform:translateY(12px) scale(.965);}
  9%,90%{opacity:1;transform:none;}
  97%,100%{opacity:0;transform:translateY(-8px) scale(.98);}
}
.doc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.0625rem;}
.doc-tag{
  font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);
  padding:.1875rem .4375rem;border-radius:9999px;
  background:color-mix(in oklch,var(--accent) 14%,transparent);
}
.dl{height:.375rem;border-radius:9999px;background:color-mix(in oklch,var(--foreground) 14%,transparent);transform-origin:left;}
.dl.hd{height:.5rem;width:58%;background:color-mix(in oklch,var(--foreground) 52%,transparent);}
.dl.w80{width:80%}.dl.w65{width:65%}.dl.w60{width:60%}
.tile.in .doc .dl{animation:dlDraw 7s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes dlDraw{
  0%,5%{transform:scaleX(0);opacity:.4;}
  19%,90%{transform:scaleX(1);opacity:1;}
  97%,100%{transform:scaleX(0);opacity:.4;}
}

/* proposal (tile 7): a highlighted total, then an "Accepted" stamp */
.doc-total{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.125rem;padding-top:.5rem;
  border-top:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);
  opacity:0;
}
.tot-l{font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);}
.tot-v{font-size:.9375rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);}
.tile.in .doc-total{animation:docPop 7s ease-in-out infinite;}
@keyframes docPop{
  0%,40%{opacity:0;transform:translateY(4px);}
  50%,90%{opacity:1;transform:none;}
  97%,100%{opacity:0;}
}
.doc-accept{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.3125rem;
  padding:.25rem .5rem;border-radius:9999px;
  font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--accent);color:#fff;
  opacity:0;transform-origin:left;
}
.doc-accept svg{width:.6875rem;height:.6875rem;}
.tile.in .doc-accept{animation:docStamp 7s cubic-bezier(.34,1.56,.64,1) infinite;}
@keyframes docStamp{
  0%,60%{opacity:0;transform:scale(.5);}
  70%,90%{opacity:1;transform:scale(1);}
  97%,100%{opacity:0;transform:scale(.94);}
}

/* playbook (tile 6): Say this / Avoid this guides pop in */
.doc-guides{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.125rem;}
.guide{
  display:inline-flex;align-items:center;gap:.3125rem;
  padding:.25rem .5rem;border-radius:9999px;
  font-size:.5625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  opacity:0;
}
.guide svg{width:.6875rem;height:.6875rem;flex-shrink:0;}
.guide.ok{background:var(--accent);color:#fff;}
.guide.no{background:color-mix(in oklch,var(--foreground) 8%,transparent);color:var(--muted-foreground);}
.tile.in .guide{animation:docPop 7s ease-in-out infinite;}
.tile.in .guide.no{animation-delay:.14s;}

@media (prefers-reduced-motion:reduce){
  .rail{scroll-behavior:auto;}
  .tile.in .type-line{width:19.5em;animation:none;}
  .tile.in .chip,.tile.in .row-i{opacity:1;animation:none;}
  .tile.in .log-track,.tile.in .node,.tile.in .dot-live{animation:none;}
  .tile.in .doc,.tile.in .doc-total,.tile.in .doc-accept,.tile.in .guide{opacity:1;transform:none;animation:none;}
  .tile.in .doc .dl{transform:none;opacity:1;animation:none;}
}

@media (max-width:1000px){
  .assure-top{grid-template-columns:1fr;align-items:start;gap:1.5rem;}
}
@media (max-width:620px){
  .rail-hint{display:none;}
  .tile{width:min(23rem,88vw);}
}