/* ===== Ally How-it-works reflowing components ===== */
.ally-hiw-slot{
  container-type:inline-size;
  position:absolute;inset:0; /* fills the normalized 220px slot root */
  overflow:hidden;
  border-radius:inherit;
}
.ally-hiw{
  display:flex;flex-direction:column;
  box-sizing:border-box;
  width:100%;height:100%;
  padding:16px;
  gap:10px;
  background:#281c20;
  color:#e9e2e4;
  font-family:"Inter","Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;line-height:1.35;
  letter-spacing:-0.01em;
  overflow:hidden;
  border-radius:inherit;
  -webkit-font-smoothing:antialiased;
}
.ally-hiw *{box-sizing:border-box;margin:0;}
.ally-hiw .hiw-h{font-weight:600;color:#fbf7f9;font-size:13px;letter-spacing:-0.02em;}
.ally-hiw .hiw-muted{color:#9a8f93;}
.ally-hiw .hiw-white{color:#fbf7f9;}
.ally-hiw .hiw-accent{color:#c98fe4;}
.ally-hiw .hiw-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  border:1px solid #3a2b30;color:#b7abaf;background:rgba(255,255,255,0.015);
  font-size:11px;white-space:nowrap;
}

/* ---------- 01 Delegation profile card (1A) ---------- */
.ally-hiw-1{padding:14px;gap:7px;}
.ally-hiw-1 .top{display:flex;align-items:baseline;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;}
.ally-hiw-1 .top .hiw-pill{margin-left:auto;}
.ally-hiw-1 .goal{
  font-size:12px;color:#fbf7f9;padding-bottom:7px;
  border-bottom:1px solid #2f2226;
}
.ally-hiw-1 .goal b{color:#c98fe4;font-weight:600;}
.ally-hiw-1 .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0;}
.ally-hiw-1 .col .lbl{
  font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:#8f8488;
  margin-bottom:5px;
}
.ally-hiw-1 .col ul{list-style:none;display:flex;flex-direction:column;gap:3px;}
.ally-hiw-1 .col li{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.2;color:#d8cfd2;}
.ally-hiw-1 .col li .dot{width:3px;height:3px;border-radius:50%;background:#6a5560;flex:none;}
.ally-hiw-1 .col.handoff li{color:#8f8488;}
.ally-hiw-1 .col.handoff li .arw{color:#a06cc0;font-size:11px;flex:none;opacity:0.85;}
.ally-hiw-1 .col.handoff{opacity:0.9;}
@container (min-width:520px){
  .ally-hiw-1{padding:22px 28px;gap:14px;justify-content:center;}
  .ally-hiw-1 .hiw-h{font-size:15px;}
  .ally-hiw-1 .goal{font-size:14px;padding-bottom:14px;}
  .ally-hiw-1 .cols{grid-template-columns:1fr 1.4fr;gap:56px;max-width:840px;}
  .ally-hiw-1 .col .lbl{margin-bottom:9px;}
  .ally-hiw-1 .col ul{gap:7px;}
  .ally-hiw-1 .col.handoff ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 28px;}
  .ally-hiw-1 .col li{font-size:12.5px;}
}

/* ---------- 02 The stalled item, now owned (2A) ---------- */
.ally-hiw-2{padding:15px;justify-content:center;}
.ally-hiw-2 .board{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-content:start;}
.ally-hiw-2 .lane{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ally-hiw-2 .lane .lh{
  display:flex;align-items:center;gap:6px;font-size:11px;color:#8f8488;
  text-transform:uppercase;letter-spacing:0.06em;
}
.ally-hiw-2 .lane .lh .n{
  min-width:16px;height:15px;padding:0 4px;border-radius:5px;display:inline-flex;
  align-items:center;justify-content:center;font-size:10px;background:#2f2226;color:#9a8f93;
}
.ally-hiw-2 .ghost{height:24px;border-radius:6px;border:1px dashed #3a2c31;background:rgba(255,255,255,0.014);}
.ally-hiw-2 .ghost.solid{border-style:solid;border-color:#352730;background:rgba(255,255,255,0.022);}
.ally-hiw-2 .lane.owned{background:rgba(179,119,213,0.05);border:1px solid rgba(179,119,213,0.14);border-radius:8px;padding:7px;margin:-8px -8px 0;}
.ally-hiw-2 .lane.done .ghost.solid{opacity:0.5;}
.ally-hiw-2 .movecard{
  position:absolute;left:22%;top:30px;width:50%;max-width:320px;
  transform:rotate(-2.2deg);
  background:#31232a;border:1px solid #4d3744;border-radius:8px;
  padding:9px 11px;
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.7),0 2px 6px rgba(0,0,0,0.45);
  animation:hiw2drift 7s ease-in-out infinite;
}
.ally-hiw-2 .movecard .t{font-size:12.5px;color:#fbf7f9;font-weight:500;}
.ally-hiw-2 .movecard .old{
  font-size:11px;color:#7d7276;margin-top:5px;text-decoration:line-through;
  text-decoration-color:#5a4750;
}
.ally-hiw-2 .movecard .new{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:#d29cec;margin-top:3px;font-weight:500;
}
.ally-hiw-2 .movecard .new .dotp{width:6px;height:6px;border-radius:50%;background:#b377d5;flex:none;box-shadow:0 0 0 3px rgba(179,119,213,0.16);}
.ally-hiw-2 .cursor{
  position:absolute;left:calc(24% + 50%);top:68px;width:14px;height:14px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  animation:hiw2cursor 7s ease-in-out infinite;
}
@keyframes hiw2drift{0%,16%{transform:translateX(-7px) rotate(-2.2deg);}52%,100%{transform:translateX(9px) rotate(-0.8deg);}}
@keyframes hiw2cursor{0%,16%{transform:translate(-9px,3px);}52%,100%{transform:translate(7px,-2px);}}
@container (min-width:520px){
  .ally-hiw-2{padding:20px 28px;}
  /* Cap + center so the board reads as one compact artifact instead of stretching
     thin across the full band at 864/1039px. */
  .ally-hiw-2 .board{gap:24px;max-width:600px;margin:0 auto;width:100%;}
  .ally-hiw-2 .lane .lh{font-size:12px;}
  .ally-hiw-2 .ghost{height:30px;}
  .ally-hiw-2 .lane.owned{margin:-9px -9px 0;padding:9px;}
  .ally-hiw-2 .movecard{left:24%;width:38%;top:42px;}
  .ally-hiw-2 .cursor{left:calc(24% + 34%);top:86px;}
}
@media (prefers-reduced-motion:reduce){
  .ally-hiw-2 .movecard,.ally-hiw-2 .cursor{animation:none;}
  .ally-hiw-2 .movecard{transform:translateX(2px) rotate(-1.6deg);}
}

/* ---------- 03 The week's result (3A) ---------- */
.ally-hiw-3{justify-content:center;gap:0;}
.ally-hiw-3 .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:#8f8488;}
.ally-hiw-3 .headline{font-size:19px;font-weight:600;color:#fbf7f9;letter-spacing:-0.03em;margin:8px 0 12px;line-height:1.15;}
.ally-hiw-3 .checkrow{display:flex;align-items:center;gap:8px;font-size:12px;color:#d8cfd2;margin-bottom:14px;}
.ally-hiw-3 .checkrow .ck{
  width:17px;height:17px;border-radius:50%;background:rgba(179,119,213,0.16);
  border:1px solid rgba(179,119,213,0.5);color:#d29cec;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex:none;
}
.ally-hiw-3 .meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ally-hiw-3 .btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:8px;border:1px solid #4a3542;
  color:#e9dcef;font-size:12px;background:rgba(179,119,213,0.05);
}
.ally-hiw-3 .btn .ar{color:#c98fe4;}
@container (min-width:520px){
  /* Center the two clusters (padding, not max-width, so the dark band still
     fills edge to edge) instead of leaving a dead gutter at 864/1039px. */
  .ally-hiw-3{flex-direction:row;align-items:center;justify-content:space-between;gap:44px;
    padding:22px max(30px, calc((100% - 600px) / 2));}
  .ally-hiw-3 .left{flex:1;min-width:0;}
  .ally-hiw-3 .headline{font-size:26px;margin:10px 0 14px;}
  .ally-hiw-3 .checkrow{margin-bottom:0;font-size:13px;}
  .ally-hiw-3 .right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex:none;}
  .ally-hiw-3 .meta{margin-bottom:0;justify-content:flex-end;}
  .ally-hiw-3 .btn{align-self:flex-end;}
}

/* The three How-it-works slot roots. Normalize each to the locked 220px band
   (the template roots have inconsistent padding / intrinsic height), give a
   positioning context for the absolute slot, and keep the leftover template
   render from flashing before our component mounts. */
[data-framer-name="Subscription active"],
[data-framer-name="Software icons ticker"],
[data-framer-name="Code"],
[data-framer-name="Delegation profile"],
[data-framer-name="Stalled item owned"],
[data-framer-name="Week result"]{
  position:relative !important;
  height:220px !important;
  min-height:220px !important;
  padding:0 !important;
  overflow:hidden !important;
}
[data-framer-name="Subscription active"] > *:not(.ally-hiw-slot),
[data-framer-name="Software icons ticker"] > *:not(.ally-hiw-slot),
[data-framer-name="Code"] > *:not(.ally-hiw-slot),
[data-framer-name="Delegation profile"] > *:not(.ally-hiw-slot),
[data-framer-name="Stalled item owned"] > *:not(.ally-hiw-slot),
[data-framer-name="Week result"] > *:not(.ally-hiw-slot){visibility:hidden !important;}
.ally-hiw-slot{visibility:visible !important;}