/* inside-flow.css — "Follow one request" (in-f): a rail of eight clay beads, the controls, and a plum stage that shows the step —
   under the rail on wide screens; inside the rail, under the step you are on, on tablets and phones. Prefix in-f-. */
.in-f{position:relative}

/* the rail: cream beads ahead, plum beads with a star behind, the gold bead is now */
.in-f-rail{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;--p:0}
.in-f-rail::before,.in-f-rail::after{content:"";position:absolute;top:23px;inset-inline-start:calc(100% / 16);height:4px;margin-top:-2px;border-radius:4px}
.in-f-rail::before{inset-inline-end:calc(100% / 16);background:rgba(100,8,46,.1);box-shadow:inset 0 1px 2px rgba(100,8,46,.14)}
.in-f-rail::after{width:calc((100% - 100% / 8) * var(--p));background:linear-gradient(90deg,#a3205f,#64082e);transition:width .7s var(--ease)}
.in-f-node{position:relative;z-index:1;display:grid;justify-items:center;gap:12px;width:100%;padding:0 2px 4px;border-radius:16px;text-align:center}
.in-f-node .in-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--k-paper);box-shadow:var(--k-paper-shadow);font:760 .9375rem/1 var(--display);color:var(--plum-500);transition:transform .45s var(--spring),box-shadow .3s,color .3s}
.in-f-node .in-t{font:600 .8125rem/1.25 var(--text);color:var(--ink-3);text-wrap:balance;transition:color .3s}
.in-f-node:hover .in-n{transform:translateY(-3px)}
.in-f-node:hover .in-t{color:var(--plum-600)}
.in-f-rail>li.in-past .in-n{color:transparent;background:url(/assets/brand/star-c.webp) center/44% no-repeat,var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.in-f-rail>li.in-on .in-n{color:var(--plum-700);background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow),0 0 0 7px rgba(250,201,63,.24);transform:scale(1.14)}
.in-f-rail>li.in-on .in-t{color:var(--plum-600);font-weight:700}

/* the controls */
.in-f-ctl{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px 0 24px}
.in-f-play{min-width:10.5em}
.in-f-play svg{width:18px;height:18px}
.in-f-play .in-f-again{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.in-f-count{min-width:7.5em;margin-inline-start:4px;font:600 .875rem/1 var(--text);color:var(--ink-3)}

/* the stage: plum clay, the step on the left, what it looks like on the right */
.in-f-panel{--ink:var(--cream-100);--ink-2:#efd6ca;--ink-3:#dcbcc5;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(22px,3.4vw,54px);align-items:center;
  padding:clamp(24px,3.4vw,46px);border-radius:var(--r-xl);overflow:hidden;color:var(--cream-100);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow),0 50px 80px -46px rgba(60,6,30,.75)}
.in-f-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 88% 10%,rgba(255,206,112,.22),rgba(255,206,112,0) 70%)}
.in-f-panel :focus-visible{outline-color:var(--gold-300)}
.in-f-part{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-block:6px; padding-inline:6px 14px;border-radius:999px;background:rgba(255,241,214,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);font:600 .8125rem/1.2 var(--text);color:var(--ink-2);text-align:start;transition:background .2s}
.in-f-part img{width:30px;height:30px;border-radius:9px;box-shadow:0 4px 8px -3px rgba(15,0,8,.6)}
.in-f-part b{font-weight:700;color:var(--gold-300)}
.in-f-part:hover{background:rgba(255,241,214,.18)}
.in-f-say h3{margin-top:20px;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--cream-50)}
.in-f-say p{margin-top:12px;max-width:26em;font-size:1.0625rem;line-height:1.5;color:var(--ink-2)}
.in-f-time{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:4px;background:rgba(255,241,214,.07)}
.in-f-time i{display:block;height:100%;background:linear-gradient(90deg,#fcd04a,#efae1e);transform-origin:left center;transform:scaleX(0)}
/* the eight stages share one cell: the tallest one sets the height, the one that is on is visible */
.in-f-say,.in-f-vis{display:grid}
.in-f-say-i,.in-f-vis-i{grid-area:1/1;min-width:0;visibility:hidden}
.in-f-say-i.in-on,.in-f-vis-i.in-on{visibility:visible}
.in-f-vis-i{align-self:center}
html.anim .in-f-vis-i.in-on{animation:in-fade .45s var(--ease) both}
html.anim .in-f-vis-i.in-on [data-n]{animation:in-up .6s var(--spring) both}
html.anim .in-f-vis-i.in-on [data-n="1"]{animation-delay:.42s}html.anim .in-f-vis-i.in-on [data-n="2"]{animation-delay:.84s}
html.anim .in-f-vis-i.in-on [data-n="3"]{animation-delay:1.26s}html.anim .in-f-vis-i.in-on [data-n="4"]{animation-delay:1.68s}
@keyframes in-fade{from{opacity:0}}
@keyframes in-up{from{opacity:0;transform:translateY(12px)}}

/* what the step looks like: a cream window */
.in-f-vis{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;align-self:stretch;min-width:0;padding:clamp(16px,2vw,26px);border-radius:28px;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#fff2d6);box-shadow:inset 0 1px 0 #fff,0 30px 50px -26px rgba(15,0,8,.8),0 4px 10px -4px rgba(15,0,8,.45)}
.in-f-vis :focus-visible{outline-color:var(--plum-400)}
.in-f-chat{display:grid;gap:12px;width:100%;max-width:520px;margin-inline:auto}
.in-f-chathead{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(100,8,46,.08)}
.in-f-chathead .in-face-s{width:36px;height:36px}
.in-f-chathead span{display:grid;gap:3px}
.in-f-chathead b{font:750 .9375rem/1 var(--display);color:var(--plum-600)}
.in-f-chathead small{font-size:.75rem;color:var(--ink-3)}
.in-f-me{justify-self:end;max-width:88%;min-height:2.9em;padding:12px 16px;border-start-start-radius:20px; border-start-end-radius:20px; border-end-end-radius:5px; border-end-start-radius:20px;background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700);font-weight:600;line-height:1.42}
.in-f-rest{visibility:hidden}
.in-f-caret{position:relative;display:inline-block;width:0;height:1em;vertical-align:-.15em}
.in-f-caret::after{content:"";position:absolute;inset-inline-start:1px;top:0;width:2px;height:100%;background:var(--plum-700);animation:in-caret .8s steps(1) infinite}
@keyframes in-caret{50%{opacity:0}}
.in-f-me.in-done{min-height:0;font-size:.875rem;opacity:.8}
.in-f-them{justify-self:start;max-width:94%;padding:14px 16px;border-start-start-radius:20px; border-start-end-radius:20px; border-end-end-radius:20px; border-end-start-radius:5px;background:#fff;box-shadow:0 10px 20px -12px rgba(90,40,0,.5);line-height:1.5}
.in-f-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.in-f-btns button{height:36px;padding:0 16px;border-radius:999px;font:700 .8125rem/1 var(--display);color:var(--plum-600);box-shadow:inset 0 0 0 2px rgba(100,8,46,.3);transition:transform .2s var(--spring)}
.in-f-btns .in-f-yes{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.in-f-btns button:hover{transform:translateY(-2px)}
.in-f-clock{display:flex;align-items:center;gap:8px;font:600 .8125rem/1.3 var(--text);color:var(--plum-500)}
.in-f-clock .in-i{font-size:17px}
.in-f-know{display:grid;gap:10px;width:100%;max-width:480px;margin-inline:auto}
.in-f-know li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 10px 20px -14px rgba(90,40,0,.55)}
.in-f-know em{min-width:7.5em;font:650 .6875rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:var(--plum-400)}
.in-f-know b{font:760 1.2rem/1.2 var(--display);letter-spacing:-.015em;color:var(--plum-700)}
.in-f-plan{width:100%;max-width:580px;margin-inline:auto}
.in-f-planh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;margin-bottom:12px}
.in-f-planh b{font:780 1.15rem/1.1 var(--display);letter-spacing:-.015em;color:var(--plum-600)}
.in-f-planh span{font-size:.8125rem;color:var(--ink-3)}
.in-f-plan ol{display:grid;gap:7px}
.in-f-plan li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;background:#fff;box-shadow:0 6px 12px -9px rgba(90,40,0,.5);font-size:.875rem}
.in-f-plan .in-t{color:var(--ink);font-weight:500}
.in-f-plan .in-w{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.in-f-plan .in-w .in-face-s{width:24px;height:24px}
.in-f-plan .in-w .in-i{font-size:18px}
.in-f-plan time{font:650 .75rem/1 var(--display);color:var(--ink-3);white-space:nowrap}
.in-f-plan li.in-you{background:#fff8dc;box-shadow:inset 0 0 0 2px rgba(242,182,41,.55)}
.in-f-plan li.in-you .in-w{font-weight:700;color:var(--plum-600)}
.in-f-pb{display:grid;gap:14px;width:100%;max-width:560px;margin-inline:auto}
.in-f-badge{display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto auto;gap:8px 18px;align-items:center;padding:18px;border-radius:24px;background:#fff;box-shadow:0 18px 34px -20px rgba(90,40,0,.6),inset 0 -2px 0 rgba(160,100,20,.08);text-decoration:none;color:inherit;transition:transform .35s var(--spring)}
.in-f-badge:hover{transform:translateY(-3px)}
.in-f-badge img{grid-row:1/3;width:68px;height:68px;border-radius:24%;transform:rotate(-5deg);box-shadow:0 12px 16px -8px rgba(90,40,0,.55)}
.in-f-badge span{display:grid;gap:5px}
.in-f-badge b{font:780 1.25rem/1.12 var(--display);letter-spacing:-.02em;color:var(--plum-600)}
.in-f-badge em{font-size:.875rem;font-style:normal;color:var(--ink-3)}
.in-f-badge i{font:700 .875rem/1 var(--display);font-style:normal;color:var(--plum-500)}
.in-f-also{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8125rem}
.in-f-also em{margin-inline-end:2px;font-style:normal;color:var(--ink-3)}
.in-f-also a{padding:7px 13px;border-radius:999px;background:var(--cream-200);box-shadow:inset 0 1px 0 #fff;font:650 .8125rem/1 var(--display);color:var(--plum-600);text-decoration:none;transition:background .2s}
.in-f-also a:hover{background:var(--cream-300)}
.in-f-work,.in-f-log{display:grid;gap:8px;width:100%;max-width:580px;margin-inline:auto}
.in-f-work li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 6px 12px -9px rgba(90,40,0,.5);font-size:.875rem;color:var(--ink-2)}
.in-f-work b{display:block;margin-bottom:2px;font:700 .8125rem/1.2 var(--display);color:var(--plum-600)}
.in-f-tool{width:30px;height:30px;border-radius:24%;box-shadow:0 4px 8px -4px rgba(90,40,0,.5)}
.in-f-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(100,8,46,.14);border-top-color:var(--plum-500)}
html.anim .in-f-vis-i.in-on .in-f-spin{animation:in-spin .9s linear infinite}
@keyframes in-spin{to{transform:rotate(360deg)}}
html.anim .in-f-vis-i.in-on .in-f-work li{animation:in-up .6s var(--spring) both,in-work 2.6s var(--ease) both}
html.anim .in-f-vis-i.in-on .in-f-work li[data-n="1"]{animation-delay:.7s,.7s}html.anim .in-f-vis-i.in-on .in-f-work li[data-n="2"]{animation-delay:1.4s,1.4s}html.anim .in-f-vis-i.in-on .in-f-work li[data-n="3"]{animation-delay:2.1s,2.1s}
@keyframes in-work{35%{box-shadow:0 0 0 2px rgba(242,182,41,.8),0 12px 24px -12px rgba(200,130,0,.7)}}
.in-f-log li{display:grid;grid-template-columns:44px 28px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:#fff;box-shadow:0 6px 12px -9px rgba(90,40,0,.5);font-size:.875rem;color:var(--ink)}
.in-f-log time{font:750 .8125rem/1 var(--display);font-variant-numeric:tabular-nums;color:var(--plum-500)}
.in-f-log .in-face-s,.in-f-log .in-f-tool{width:28px;height:28px}
.in-f-log .in-i-clip{color:var(--plum-300)}
.in-f-proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:580px;margin-inline:auto}
.in-f-proofs li{display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 12px;align-items:center;padding:12px;border-radius:18px;background:#fff;box-shadow:0 10px 20px -14px rgba(90,40,0,.6)}
.in-f-pic{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:rgba(100,8,46,.07);font-size:22px;color:var(--plum-500)}
.in-f-pic--shot{place-items:stretch;align-content:start;gap:4px;padding:13px 8px 8px;background:#fff8e6;box-shadow:inset 0 0 0 1px rgba(100,8,46,.1)}
.in-f-pic--shot i{height:4px;border-radius:2px;background:rgba(100,8,46,.2)}.in-f-pic--shot i:nth-child(2){width:70%}.in-f-pic--shot i:nth-child(3){width:45%;background:var(--gold-400)}
.in-f-proofs b{align-self:end;font:650 .875rem/1.25 var(--text);color:var(--ink)}
.in-f-proofs em{align-self:start;font:650 .6875rem/1 var(--display);letter-spacing:.12em;font-style:normal;color:var(--ink-3)}

/* tablets and phones: the rail runs down, the stage opens under the step you are on */
@media (max-width:1099px){
  .in-f-say-i:not(.in-on),.in-f-vis-i:not(.in-on){display:none}   /* no autoplay here: every step is a tap, the panel fits the step */
  .in-f-rail{grid-template-columns:minmax(0,1fr);gap:0}
  .in-f-rail::before,.in-f-rail::after{display:none}
  .in-f-rail>li{position:relative;padding-bottom:8px}
  .in-f-rail>li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:21px;top:46px;bottom:-4px;width:4px;border-radius:4px;background:rgba(100,8,46,.1)}
  .in-f-rail>li.in-past::before{background:linear-gradient(180deg,#a3205f,#64082e)}
  .in-f-node{grid-template-columns:46px minmax(0,1fr);justify-items:start;align-items:center;gap:16px;padding:4px 0;text-align:start}
  .in-f-node .in-t{font-size:1rem}
  .in-f-rail>li.in-on .in-n{transform:scale(1.06)}
  .in-f-panel{grid-template-columns:minmax(0,1fr);margin:12px 0 4px;padding:18px 16px 22px;gap:16px;border-radius:30px}
  .in-f-say h3{display:none}
  .in-f-say p{margin-top:12px;font-size:1rem}
  .in-f-ctl{flex-wrap:wrap;justify-content:flex-start;margin:12px 0 14px}
  .in-f-proofs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .in-f-vis{padding:14px;border-radius:22px}
  .in-f-plan li{grid-template-columns:minmax(0,1fr) auto}.in-f-plan .in-w{grid-row:2;grid-column:1/3}
  .in-f-work li{grid-template-columns:28px minmax(0,1fr) 18px}.in-f-work .in-f-tool{display:none}
  .in-f-log li{grid-template-columns:42px 28px minmax(0,1fr)}.in-f-log .in-i-clip{display:none}
  .in-f-count{display:none}
  .in-f-play{min-width:0;flex:1}
}