/* Design partners: "Bring your one action" (31 Oct 2026). The visitor picks the action that worries them and the
   four steps of how we start are built around it, left to right along one rail (top to bottom on phones). Colour
   keeps its meaning: vermilion only for held, green for runs and the draft receipt, ink for blocked or being built. */

.bring-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px 64px;align-items:end;margin-bottom:64px}
.bring-head .h2{max-width:9.5em}
.bring-q{font-weight:600;font-stretch:92%;font-size:clamp(19px,1.5vw,22px);letter-spacing:-.012em;line-height:1.25;margin-bottom:16px}

/* the chips: large, one tap each */
.bring-chips{display:flex;flex-wrap:wrap;gap:10px}
.bring-chip{appearance:none;flex:1 1 200px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:82px;padding:14px 20px 16px;border:0;border-radius:14px;
  background:var(--card);color:var(--ink);text-align:left;cursor:pointer;
  box-shadow:0 0 0 1px rgba(15,23,34,.16),0 3px 0 rgba(15,23,34,.08);
  transition:transform .35s var(--ease),box-shadow .3s var(--calm),background-color .3s var(--calm),color .3s var(--calm)}
.bring-chip code{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-3);transition:color .3s var(--calm)}
.bring-chip span{font-weight:600;font-stretch:90%;font-size:clamp(18px,1.45vw,21px);letter-spacing:-.015em;line-height:1.15}
.bring-chip:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--ink),0 5px 0 rgba(15,23,34,.12)}
.bring-chip[aria-pressed=true]{background:var(--ink);color:var(--cream);transform:none;box-shadow:0 0 0 1px var(--ink),0 3px 0 rgba(15,23,34,.25)}
.bring-chip[aria-pressed=true] code{color:rgba(245,242,234,.78)}
.bring-chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bring.ready:not(.met) .bring-chip{opacity:0}
.bring.met .bring-chip{animation:bring-rise .7s var(--ease) backwards}
.bring-chip:nth-child(2){animation-delay:70ms}.bring-chip:nth-child(3){animation-delay:140ms}.bring-chip:nth-child(4){animation-delay:210ms}
.bring-chip:nth-child(5){animation-delay:280ms}.bring-chip:nth-child(6){animation-delay:350ms}
@keyframes bring-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* "Something else": the visitor's own words */
.bring-own{margin-top:16px;display:grid;gap:8px}
.bring-own label{font-weight:600;font-size:15px}
.bring-own-row{display:flex;gap:10px}
.bring-own input{flex:1;min-width:0;height:50px;padding:0 14px;border-radius:10px;border:1.5px solid var(--ink);background:var(--card);font-size:16px}
.bring-own input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the plan: one rail, four stations */
.bring-plan{list-style:none;margin:0;padding:36px 0 0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bring-plan::before,.bring-plan::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;border-radius:2px;background:rgba(15,23,34,.16)}
.bring-plan::after{background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.bring-plan.built::after{transform:scaleX(1);transition:transform 1.2s linear}
.bp-step{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px rgba(15,23,34,.09)}
.bp-node{position:absolute;left:22px;top:-36px;width:18px;height:18px;border-radius:50%;background:var(--page);box-shadow:inset 0 0 0 2px rgba(15,23,34,.3)}
.bp-n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-3)}
.bp-step .h3{margin:10px 0 8px;font-size:clamp(21px,1.6vw,25px)}
.bp-say{font-size:15px;line-height:1.5;color:var(--text-2)}
.bp-x{display:none}
.bring.ready .bp-x{display:block;flex:1;margin-top:18px;padding-top:18px;border-top:1.5px dashed rgba(15,23,34,.2);min-height:96px}
.bring-plan.built .bp-x{min-height:262px}
/* before a pick, faint lines show where each step's part of the plan will go */
.bring-plan:not(.built) .bp-x:empty::before{content:"";display:block;height:46px;border-radius:6px;opacity:.7;
  background:linear-gradient(rgba(15,23,34,.07),rgba(15,23,34,.07)) 0 0/72% 10px no-repeat,linear-gradient(rgba(15,23,34,.07),rgba(15,23,34,.07)) 0 18px/90% 10px no-repeat,linear-gradient(rgba(15,23,34,.07),rgba(15,23,34,.07)) 0 36px/56% 10px no-repeat}
.bring-plan.built .bp-x{border-top-style:solid;border-top-color:rgba(15,23,34,.12)}
.bp-wait{font-size:14.5px;color:var(--text-3)}

/* the build: the rail draws, each station lights as it arrives, then its card fills in */
.bp-step:nth-child(1){--i:0}.bp-step:nth-child(2){--i:1}.bp-step:nth-child(3){--i:2}.bp-step:nth-child(4){--i:3}
.bring-plan.built .bp-node{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 5px var(--page);transition:background-color .3s var(--calm) calc(var(--i) * 300ms),box-shadow .3s var(--calm) calc(var(--i) * 300ms)}
.bring-plan.built[data-d=held] .bp-step:nth-child(1) .bp-node,.bring-plan.built[data-d=held] .bp-step:nth-child(3) .bp-node{background:var(--hold);box-shadow:inset 0 0 0 2px var(--hold),0 0 0 5px var(--page)}
.bring-plan.built[data-d=runs] .bp-step:nth-child(1) .bp-node,.bring-plan.built[data-d=runs] .bp-step:nth-child(3) .bp-node,.bring-plan.built .bp-step:nth-child(4) .bp-node{background:var(--ok);box-shadow:inset 0 0 0 2px var(--ok),0 0 0 5px var(--page)}
.bp-in{opacity:0;transform:translateY(12px)}
.bring-plan.built .bp-in{opacity:1;transform:none;transition:opacity .6s var(--calm) calc(var(--i) * 300ms + 160ms),transform .8s var(--ease) calc(var(--i) * 300ms + 160ms)}

.bp-lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* 01: the hold the example rules give it */
.bp-act{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--page);font-family:var(--mono);font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.bp-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px}
.bp-rule{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.bp-word{margin-top:10px;font-weight:650;font-stretch:88%;font-size:clamp(25px,2vw,30px);letter-spacing:-.025em;line-height:1.05}
.bp-hold.held .bp-word{color:var(--hold-text)}
.bp-hold.runs .bp-word{color:var(--ok)}
.bp-hold.blocked .bp-word{color:var(--ink)}
.bring-plan.built .bp-word{animation:bp-stamp .55s var(--ease) .5s backwards}
@keyframes bp-stamp{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
.bp-why{margin-top:8px;font-size:14px;line-height:1.5;color:var(--text-2)}

/* 02: the first conversation */
.bp-about{display:inline-block;margin-top:10px;padding:6px 11px;border-radius:8px;background:var(--ink);color:var(--cream);font-weight:600;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.bp-agenda{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.bp-agenda li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
.bp-agenda li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--ink);transform:translateY(-1px)}
.bring-plan.built .bp-agenda li{animation:bring-rise .6s var(--ease) backwards}
.bring-plan.built .bp-agenda li:nth-child(1){animation-delay:.6s}.bring-plan.built .bp-agenda li:nth-child(2){animation-delay:.75s}.bring-plan.built .bp-agenda li:nth-child(3){animation-delay:.9s}

/* 03: the Gate around it. The action rides up to the gate; held, it stops at the bar; runs, it passes */
.bp-lane{position:relative;display:block;height:58px;margin-top:12px;border-radius:12px;background:var(--page);overflow:hidden}
.bp-mv{position:absolute;inset:0}
.bp-pill{position:absolute;left:8px;top:50%;max-width:64%;margin-top:-15px;height:30px;padding:0 8px;border-radius:8px;background:var(--card);box-shadow:0 0 0 1px rgba(15,23,34,.16);font-weight:600;font-size:12px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-bar{position:absolute;left:66%;top:7px;bottom:7px;width:6px;border-radius:3px;background:var(--ink)}
.bp-lamp{position:absolute;right:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ink)}
.held .bp-bar,.held .bp-lamp{background:var(--hold)}
.runs .bp-lamp{background:var(--ok)}
.runs .bp-bar{transform:translateY(-120%)}
.runs .bp-mv{transform:translateX(50%)}
.runs .bp-lamp{display:none}
.held .bp-lamp::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--hold);opacity:0}
.bring.inview .bring-plan.built .held .bp-lamp::after{animation:bp-pulse 2.4s ease-out 1.4s infinite}
@keyframes bp-pulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
.bring-plan.built .bp-gatebox .bp-mv{animation:bp-ride 1s var(--ease) .75s backwards}
.bring-plan.built .bp-gatebox:not(.runs) .bp-bar{animation:bp-drop .5s var(--ease) 1.05s backwards}
.bring-plan.built .bp-gatebox.runs .bp-mv{animation:bp-pass 1.2s var(--ease) .75s backwards}
@keyframes bp-ride{from{transform:translateX(-40%);opacity:0}to{transform:none;opacity:1}}
@keyframes bp-pass{from{transform:translateX(-40%);opacity:0}to{transform:translateX(50%);opacity:1}}
@keyframes bp-drop{from{transform:translateY(-120%)}to{transform:none}}
.bp-rows{margin:12px 0 0;display:grid;gap:6px}
.bp-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 10px;border-radius:8px;background:var(--page)}
.bp-rows dt{font-family:var(--mono);font-size:12px;color:var(--text-3)}
.bp-rows dd{margin:0;font-weight:600;font-size:13.5px;text-align:right;overflow-wrap:anywhere}

/* 04: the receipt it would leave */
.bp-seal{width:118px;height:118px;margin-top:12px}
.bp-seal svg{width:100%;height:100%}
.bp-line{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--text-2)}
.bp-line span{white-space:nowrap}
.bp-id{color:var(--ok)}
.bp-keep.held .bp-dec{color:var(--hold-text)}
.bp-keep.runs .bp-dec{color:var(--ok)}
.bp-keep.blocked .bp-dec{color:var(--ink);font-weight:600}

/* the hand-off to the form */
.bring-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.bring-go .fine{max-width:30em}
.bring-go:not([hidden]){animation:bring-rise .6s var(--ease) 1.2s backwards}
#agent.bring-filled{outline:2px solid var(--ink);outline-offset:3px;animation:bring-flash 1.2s var(--calm) 2}
@keyframes bring-flash{50%{outline-color:transparent}}

@media (max-width:1100px){
  .bring-top{grid-template-columns:1fr;align-items:start;margin-bottom:48px}
  .bring-plan{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:52px}
  .bring-plan::before,.bring-plan::after{display:none}
  .bp-node{top:-28px}
}
/* phones: the chips wrap and the plan runs top to bottom along the rail */
@media (max-width:760px){
  .bring-chips{gap:8px}
  .bring-chip{flex:1 1 140px;min-height:70px;padding:12px 14px 13px;gap:4px}
  .bring-chip span{font-size:17px}
  .bring-chip code{font-size:10.5px}
  .bring-own-row{flex-direction:column}
  .bring-plan{grid-template-columns:1fr;padding:0 0 0 32px;row-gap:16px}
  .bring-plan::before,.bring-plan::after{display:block;left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .bring-plan::after{transform:scaleY(0);transform-origin:50% 0}
  .bring-plan.built::after{transform:scaleY(1)}
  .bp-node{left:-32px;top:24px}
  .bp-step{padding:20px 18px 18px}
  .bring.ready .bp-x,.bring-plan.built .bp-x{min-height:0}
  .bring.ready .bring-plan:not(.built) .bp-step:not(:first-child) .bp-x{display:none}
  .bring-go .btn{width:100%}
}

/* reduced motion: the plan appears complete, without movement */
@media (prefers-reduced-motion:reduce){
  .bring *,.bring-plan::after,#agent.bring-filled{transition:none!important;animation:none!important}
  .bring.ready:not(.met) .bring-chip{opacity:1}
}

/* v13 (31 Oct 2026): no cards and no drop shadows; the work stands on the canvas, divided by hairlines */
.bp-step{background:none;box-shadow:none;border-radius:0;padding-inline:0;border-top:1px solid var(--ink)}
.bring-chip{box-shadow:0 0 0 1px rgba(15,23,34,.22)}
.bring-chip:hover{transform:none;box-shadow:0 0 0 1.5px var(--ink)}
.bring-chip[aria-pressed=true]{box-shadow:0 0 0 1px var(--ink)}
.bp-pill{box-shadow:0 0 0 1px rgba(15,23,34,.16)}
.bring-chip{background:none;border-radius:0;box-shadow:none;border-top:1px solid var(--ink)}
.bring-chip:hover{box-shadow:none;background:rgba(15,23,34,.05)}
.bring-chip[aria-pressed=true]{background:var(--ink);color:var(--cream);box-shadow:none}
/* a chip that takes keyboard focus while it is still rising shows at once */
.bring.met .bring-chip:focus-visible,.bring.ready .bring-chip:focus-visible{animation:none;opacity:1;transform:none}