/* /setup: the website's one page of five steps (J3-1, J3-32).
   The look and the motion of the approved prototype out/journey/mock/onboarding.html,
   with its tokens (out/app2/system/tokens.css: values copied, names kept).
   Motion uses those names only. Reduced motion: 0 ms, 0 px, the rest 1,500 ms stays. */
:root{
  color-scheme:light;
  --xf-page:#fff;--xf-text:#0d0d0d;--xf-quiet:#49494e;--xf-raised:#f9f9f9;--xf-sheet:#fff;
  --xf-hair:rgb(13 13 13 / 5%);--xf-line:rgb(13 13 13 / 10%);--xf-rule:rgb(13 13 13 / 15%);--xf-hover:rgb(13 13 13 / 8%);
  --xf-edge:rgb(13 13 13 / 45%);--xf-accent-rgb:0 106 96;--xf-accent:rgb(var(--xf-accent-rgb));
  --xf-button:#0d0d0d;--xf-button-text:#fff;--xf-button-hover:#303030;
  --xf-lock:#181818;--xf-glass:rgb(255 255 255 / 9%);--xf-on-dark:#fff;--xf-on-dark-quiet:#d2d2d6;
  --xf-lift:0 1px 2px rgb(0 0 0 / 4%),0 12px 32px -16px rgb(0 0 0 / 12%);--xf-dim:rgb(13 13 13 / 15%);
  --xf-font:ui-sans-serif,-apple-system,system-ui,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --xf-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono",Consolas,"Roboto Mono",monospace;
  --xf-label:500 .875rem/1.25rem var(--xf-font);--xf-body:400 1rem/1.5rem var(--xf-font);
  --xf-order:500 1rem/1.5rem var(--xf-font);--xf-total:500 1.25rem/1.5rem var(--xf-mono);
  --xf-title:600 1.5rem/1.875rem var(--xf-font);--xf-count:500 2rem/2.25rem var(--xf-mono);
  --xf-display:600 2.5rem/2.75rem var(--xf-font);
  --xf-r-tag:6px;--xf-r-row:8px;--xf-r-inner:12px;--xf-r-tile:16px;--xf-r-card:22px;--xf-r-pill:99px;
  --xf-s1:4px;--xf-s2:8px;--xf-s3:12px;--xf-s4:16px;--xf-gap:24px;--xf-pad:24px;--xf-top:32px;--xf-s10:40px;
  --xf-tap:44px;--xf-button-h:48px;
  --xf-spring-press:cubic-bezier(.35,.676,.046,1.073);
  --xf-spring-surface-flat:cubic-bezier(.305,.487,.04,1);
  --xf-ease-come:cubic-bezier(.16,1,.3,1);
  --xf-press-ms:230ms;--xf-surface-ms:440ms;--xf-exit-ms:310ms;--xf-come-ms:300ms;--xf-tint-ms:150ms;
  --xf-swap-leave-ms:110ms;--xf-swap-come-ms:200ms;--xf-stagger-ms:35ms;
  --xf-come-y:8px;--xf-look-y:12px;--xf-press-scale:.97;--xf-press-scale-row:.99;
  --xf-rest:1500ms;      /* a clock, not motion: the last look takes no press */
  }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --xf-page:#181818;--xf-text:#fff;--xf-quiet:#d2d2d6;--xf-raised:rgb(255 255 255 / 4.5%);--xf-sheet:#222;
  --xf-hair:rgb(255 255 255 / 6%);--xf-line:rgb(255 255 255 / 12%);--xf-rule:rgb(255 255 255 / 20%);--xf-hover:rgb(255 255 255 / 12%);
  --xf-edge:rgb(255 255 255 / 40%);--xf-accent-rgb:0 156 149;
  --xf-button:#f3f3f3;--xf-button-text:#0d0d0d;--xf-button-hover:#ededed;
  --xf-lock:#0d0d0d;--xf-lift:0 1px 2px rgb(0 0 0 / 24%);--xf-dim:rgb(0 0 0 / 40%);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --xf-page:#181818;--xf-text:#fff;--xf-quiet:#d2d2d6;--xf-raised:rgb(255 255 255 / 4.5%);--xf-sheet:#222;
  --xf-hair:rgb(255 255 255 / 6%);--xf-line:rgb(255 255 255 / 12%);--xf-rule:rgb(255 255 255 / 20%);--xf-hover:rgb(255 255 255 / 12%);
  --xf-edge:rgb(255 255 255 / 40%);--xf-accent-rgb:0 156 149;
  --xf-button:#f3f3f3;--xf-button-text:#0d0d0d;--xf-button-hover:#ededed;
  --xf-lock:#0d0d0d;--xf-lift:0 1px 2px rgb(0 0 0 / 24%);--xf-dim:rgb(0 0 0 / 40%);
}
@media (prefers-reduced-motion:reduce){:root{
  --xf-press-ms:0ms;--xf-surface-ms:0ms;--xf-exit-ms:0ms;--xf-come-ms:0ms;--xf-tint-ms:0ms;
  --xf-swap-leave-ms:0ms;--xf-swap-come-ms:0ms;--xf-stagger-ms:0ms;--xf-come-y:0px;--xf-look-y:0px;--xf-press-scale:1;--xf-press-scale-row:1;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-anchor:none}
body{margin:0;overflow-anchor:none;background:var(--xf-page);color:var(--xf-text);font:var(--xf-body);-webkit-font-smoothing:antialiased;
  transition:background-color var(--xf-tint-ms),color var(--xf-tint-ms)}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--xf-text);outline-offset:2px;border-radius:var(--xf-r-row)}
[hidden]{display:none!important}
.num{font-family:var(--xf-mono);font-variant-numeric:tabular-nums}
.m-sub .num,.radio .num,p .num,.plans .num{font-family:inherit}
.quiet{color:var(--xf-quiet)}
.label{font:var(--xf-label);color:var(--xf-quiet)}

/* the frame */
.top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;max-width:1040px;margin:0 auto}
.brand{display:flex;align-items:center;gap:var(--xf-s2);font:600 1rem/1.5rem var(--xf-font)}
.brand i{width:16px;height:16px;border-radius:4px;background:var(--xf-accent)}
.top-right{display:flex;align-items:center;gap:var(--xf-s4);font:var(--xf-body)}
.who{display:inline-flex;align-items:center;gap:var(--xf-s2);height:32px;padding:0 var(--xf-s3) 0 var(--xf-s1);border-radius:var(--xf-r-pill);box-shadow:inset 0 0 0 1px var(--xf-line)}
.who b{width:24px;height:24px;border-radius:50%;background:var(--xf-hover);display:grid;place-items:center;font:var(--xf-label)}
.wrap{max-width:1040px;margin:0 auto;padding:var(--xf-s2) 20px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--xf-s10)}
.rail{display:none}
@media (max-width:429px){.top{padding:0 16px}.wrap{padding-left:16px;padding-right:16px}.sheet{padding-left:16px;padding-right:16px}}
@media (min-width:1000px){
  .top{padding:0 var(--xf-pad)}
  .wrap{grid-template-columns:600px 360px;justify-content:space-between;padding:var(--xf-top) var(--xf-pad) 96px}
  .rail{display:block;position:sticky;top:var(--xf-pad);align-self:start}
}

/* the head: the one large line, then the strip */
.head{display:grid;gap:var(--xf-s4);margin-bottom:var(--xf-gap)}
.head h1{font:600 2rem/2.25rem var(--xf-font);letter-spacing:-.03em;text-wrap:balance}
@media (min-width:1000px){.head h1{font:var(--xf-display);letter-spacing:-.03em}}
.head h1.small{font:var(--xf-title);letter-spacing:-.015em}
/* signed in: no title line on top (J3 step 03); the H1 is for a screen reader only */
.head h1.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.head .label:empty{display:none}
/* the foot of every site page (site.css .xf-foot): who is signed in, then the links, "Report a problem" last (J7-4) */
.setup-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:16px var(--xf-pad) 20px;border-top:1px solid var(--xf-hair);font:var(--xf-label);font-weight:400;color:var(--xf-quiet)}
.setup-foot ul{display:flex;flex-wrap:wrap;gap:4px 16px}
.setup-foot a{color:inherit;text-decoration:underline;text-decoration-color:var(--xf-edge);text-underline-offset:2px}
@media (pointer:coarse){.setup-foot{align-items:center;padding-block:4px}.setup-foot a{display:inline-flex;align-items:center;min-height:var(--xf-tap)}}
.strip{display:grid;gap:var(--xf-s2)}
.strip-words{display:flex;justify-content:space-between;gap:var(--xf-s3);font:var(--xf-label);min-height:36px}
.strip-words span:last-child{text-align:right;max-width:26ch}
@media (min-width:640px){.strip-words{min-height:18px}.strip-words span:last-child{max-width:none}}
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--xf-s1)}
.segs i{height:4px;border-radius:var(--xf-r-pill);background:var(--xf-hover);position:relative;overflow:hidden}
.segs i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--xf-text);transform:scaleX(0);transform-origin:left;
  transition:transform var(--xf-surface-ms) var(--xf-spring-surface-flat),background-color var(--xf-tint-ms)}
.segs i[data-s="done"]::after{transform:scaleX(1)}
.segs i[data-s="next"]::after{transform:scaleX(.5);background:var(--xf-accent)}
.segs i[data-s="later"]::after,.segs i[data-s="none"]::after{transform:scaleX(1);background:var(--xf-rule)}

/* a step */
.steps{border-top:1px solid var(--xf-line)}
.step{border-bottom:1px solid var(--xf-line)}
.step-h{width:100%;min-height:64px;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:var(--xf-s3);text-align:left;padding:var(--xf-s2) 0;
  transition:transform var(--xf-press-ms) var(--xf-spring-press)}
.step-h:not([aria-disabled="true"]):active{transform:scale(var(--xf-press-scale-row))}
.step-h[aria-disabled="true"]{cursor:default}
.dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:var(--xf-label);font-family:var(--xf-mono);
  box-shadow:inset 0 0 0 1px var(--xf-rule);color:var(--xf-quiet);transition:background-color var(--xf-tint-ms),color var(--xf-tint-ms),box-shadow var(--xf-tint-ms)}
.step[data-s="next"] .dot{box-shadow:inset 0 0 0 1.5px var(--xf-text);color:var(--xf-text)}
.step[data-s="done"] .dot{background:var(--xf-text);color:var(--xf-page);box-shadow:none}
.dot svg{width:12px;height:12px;display:none}
.step[data-s="done"] .dot svg{display:block;animation:pop var(--xf-press-ms) var(--xf-spring-press) both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.step[data-s="done"] .dot span{display:none}
.step-name,.step-sum{display:block}
.step-name{font:var(--xf-order)}
.step[data-s="todo"] .step-name,.step[data-s="none"] .step-name{color:var(--xf-quiet)}
.step-sum{font:var(--xf-body);color:var(--xf-quiet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step-meta{font:var(--xf-label);color:var(--xf-quiet);text-align:right;white-space:nowrap;display:flex;gap:var(--xf-s2);align-items:center}
.step-meta b{font-weight:500;color:var(--xf-text)}
.step-meta .num{font-family:var(--xf-font)}
.step[data-s="next"] .step-meta b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--xf-accent);margin-right:6px;vertical-align:1px}
.body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--xf-exit-ms) ease-out}
.step[data-open] .body{grid-template-rows:1fr;transition:grid-template-rows var(--xf-surface-ms) var(--xf-spring-surface-flat)}
.body>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s var(--xf-exit-ms)}
.step[data-open] .body>div{visibility:visible;transition:visibility 0s}
.inner{padding:var(--xf-s1) 0 var(--xf-pad) 40px;display:grid;gap:var(--xf-s4);opacity:0;transform:translateY(var(--xf-come-y));
  transition:opacity var(--xf-swap-leave-ms) ease-out,transform var(--xf-swap-leave-ms) ease-out}
.step[data-open] .inner{opacity:1;transform:none;transition:opacity var(--xf-come-ms) var(--xf-ease-come) 60ms,transform var(--xf-come-ms) var(--xf-ease-come) 60ms}
@media (max-width:639px){.inner{padding-left:0}}

/* parts */
.btn{height:var(--xf-button-h);padding:0 var(--xf-pad);border-radius:var(--xf-r-pill);background:var(--xf-button);color:var(--xf-button-text);
  font:500 1rem/1.5rem var(--xf-font);display:inline-flex;align-items:center;justify-content:center;gap:var(--xf-s2);white-space:nowrap;
  transition:transform var(--xf-press-ms) var(--xf-spring-press),background-color var(--xf-tint-ms),opacity var(--xf-tint-ms)}
.btn:hover{background:var(--xf-button-hover)}
.btn:active{transform:scale(var(--xf-press-scale))}
.btn.line{background:none;color:var(--xf-text);box-shadow:inset 0 0 0 1px var(--xf-rule)}
.btn.line:hover{background:var(--xf-hover)}
.btn:disabled{opacity:.38;cursor:default;transform:none}
.btn.wide{width:100%}
.row-btns{display:flex;flex-wrap:wrap;gap:var(--xf-s3);align-items:center}
.link{font:500 1rem/1.5rem var(--xf-font);text-decoration:underline;text-decoration-color:var(--xf-rule);text-underline-offset:3px;min-height:var(--xf-tap);display:inline-flex;align-items:center;
  transition:text-decoration-color var(--xf-tint-ms)}
.link:hover{text-decoration-color:var(--xf-text)}
a.link{color:inherit}
a.btn{text-decoration:none}
.link.help{min-width:var(--xf-tap);justify-content:center}
.stack{display:grid;gap:var(--xf-s4)}
.stand{font:var(--xf-label);min-height:44px;padding:0 var(--xf-s3);border-radius:var(--xf-r-pill);border:1px dashed var(--xf-edge);color:var(--xf-quiet);display:inline-flex;align-items:center;position:relative;
  transition:transform var(--xf-press-ms) var(--xf-spring-press),background-color var(--xf-tint-ms)}
.stand::after{content:"";position:absolute;inset:-6px 0}
.stand:hover{background:var(--xf-hover)}
.stand:active{transform:scale(var(--xf-press-scale))}
.mark{font:var(--xf-label);color:var(--xf-text);height:20px;padding:0 6px;border-radius:var(--xf-r-tag);box-shadow:inset 0 0 0 1px var(--xf-edge);display:inline-flex;align-items:center;white-space:nowrap}
.come{animation:come var(--xf-come-ms) var(--xf-ease-come) both}
@keyframes come{from{opacity:0;transform:translateY(var(--xf-come-y))}}
.q{font:var(--xf-order)}
.card{background:var(--xf-raised);border-radius:var(--xf-r-tile);box-shadow:inset 0 0 0 1px var(--xf-hair)}
.note{padding:var(--xf-s3) var(--xf-s4);border-radius:var(--xf-r-inner);background:var(--xf-raised);box-shadow:inset 0 0 0 1px var(--xf-hair);display:grid;gap:var(--xf-s1)}
.never{font:var(--xf-label);color:var(--xf-quiet);max-width:46ch}

/* step 2: the agent */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xf-s2)}
.pick button{min-height:64px;padding:var(--xf-s3);border-radius:var(--xf-r-inner);box-shadow:inset 0 0 0 1px var(--xf-line);text-align:left;display:grid;align-content:center;gap:2px;
  transition:transform var(--xf-press-ms) var(--xf-spring-press),box-shadow var(--xf-tint-ms),background-color var(--xf-tint-ms)}
.pick button:hover{background:var(--xf-raised)}
.pick button:active{transform:scale(var(--xf-press-scale))}
.pick button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--xf-text);background:var(--xf-raised)}
.pick b{font:500 1rem/1.5rem var(--xf-font)}
.pick span{font:var(--xf-label);color:var(--xf-quiet)}
.road{display:grid;gap:var(--xf-s3);counter-reset:n}
.road li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--xf-s2);counter-increment:n}
.road li::before{content:counter(n);font:var(--xf-label);font-family:var(--xf-mono);color:var(--xf-quiet);line-height:1.25rem}
.road li>div{display:grid;gap:var(--xf-s2)}
.code{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--xf-s2);background:var(--xf-raised);border-radius:var(--xf-r-inner);box-shadow:inset 0 0 0 1px var(--xf-hair);padding:2px 2px 2px var(--xf-s3);min-height:var(--xf-button-h)}
.code code{font:400 .875rem/1.25rem var(--xf-mono);overflow-wrap:anywhere}
.code.say code{font:var(--xf-order)}
.copy{height:var(--xf-tap);min-width:72px;padding:0 var(--xf-s3);border-radius:10px;font:var(--xf-label);color:var(--xf-text);box-shadow:inset 0 0 0 1px var(--xf-line);background:var(--xf-page);
  transition:transform var(--xf-press-ms) var(--xf-spring-press),background-color var(--xf-tint-ms)}
.copy:active{transform:scale(var(--xf-press-scale))}
.copy span{display:inline-block;transition:opacity var(--xf-swap-leave-ms) ease-out,filter var(--xf-swap-leave-ms) ease-out}
.copy.swap span{opacity:0;filter:blur(.18em)}
.live{display:flex;align-items:center;gap:var(--xf-s2);flex-wrap:wrap;min-height:var(--xf-tap)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--xf-accent);flex:none;animation:breathe 1600ms ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live i{animation:none}}
.plans{display:grid}
.plans li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--xf-s3);padding:var(--xf-s3) 0;border-top:1px solid var(--xf-hair);align-items:baseline}
.plans li:first-child{border-top:0}
.plans b{font:500 1rem/1.5rem var(--xf-font)}
.plans .num{font-size:1rem}
.plans span{grid-column:1/-1;font:var(--xf-label);color:var(--xf-quiet)}
.todo-list{display:grid;gap:var(--xf-s1)}
.todo-list li{padding-left:var(--xf-s4);position:relative}
.todo-list li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:var(--xf-quiet)}
.todo-list li.has-link::before{top:20px}

/* step 3: the money */
.money{border-radius:var(--xf-r-tile);box-shadow:inset 0 0 0 1px var(--xf-line);overflow:hidden}
.m-row{border-top:1px solid var(--xf-hair)}
.m-row:first-child{border-top:0}
.m-h{width:100%;min-height:64px;padding:var(--xf-s3) var(--xf-s4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--xf-s3);text-align:left;align-items:center}
.m-h[aria-expanded]:hover{background:var(--xf-raised)}
.m-name{display:flex;align-items:center;gap:var(--xf-s2);font:var(--xf-order);justify-content:space-between}
.m-sub{grid-column:1;color:var(--xf-quiet)}
.m-end{grid-row:1/3;grid-column:2;font:var(--xf-label);color:var(--xf-quiet);display:flex;align-items:center;gap:var(--xf-s1)}
.m-end svg{width:16px;height:16px;transition:transform var(--xf-surface-ms) var(--xf-spring-surface-flat)}
.m-h[aria-expanded="true"] .m-end svg{transform:rotate(180deg)}
.m-row[data-chosen] .m-end{color:var(--xf-text)}
.m-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--xf-exit-ms) ease-out}
.m-row[data-open] .m-body{grid-template-rows:1fr;transition:grid-template-rows var(--xf-surface-ms) var(--xf-spring-surface-flat)}
.m-body>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s var(--xf-exit-ms)}
.m-row[data-open] .m-body>div{visibility:visible;transition:visibility 0s}
.step:not([data-open]) .m-row[data-open] .m-body>div{visibility:hidden;transition:visibility 0s var(--xf-exit-ms)}
.m-in{padding:0 var(--xf-s4) var(--xf-s4);display:grid;gap:var(--xf-s3)}
.tabs{display:inline-grid;grid-template-columns:1fr 1fr;padding:2px;border-radius:var(--xf-r-pill);background:var(--xf-hover);justify-self:start;max-width:100%}
.tabs button{height:36px;padding:0 var(--xf-s4);border-radius:var(--xf-r-pill);font:var(--xf-label);color:var(--xf-quiet);white-space:nowrap;position:relative;transition:color var(--xf-tint-ms),background-color var(--xf-tint-ms)}
.tabs button::after{content:"";position:absolute;inset:-4px 0}
.tabs button[aria-selected="true"]{background:var(--xf-page);color:var(--xf-text);box-shadow:0 1px 2px rgb(0 0 0 / 8%)}
.radio{display:grid;gap:0;border-radius:var(--xf-r-tile);box-shadow:inset 0 0 0 1px var(--xf-line);overflow:hidden}
.radio button{min-height:52px;padding:var(--xf-s3) var(--xf-s4);display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--xf-s3);align-items:center;text-align:left;border-top:1px solid var(--xf-hair);
  transition:background-color var(--xf-tint-ms)}
.radio button:first-child{border-top:0}
.radio button:hover{background:var(--xf-raised)}
.radio i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--xf-edge);display:grid;place-items:center;transition:box-shadow var(--xf-tint-ms)}
.radio i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--xf-text);transform:scale(0);transition:transform var(--xf-press-ms) var(--xf-spring-press)}
.radio button[aria-checked="true"] i{box-shadow:inset 0 0 0 1.5px var(--xf-text)}
.radio button[aria-checked="true"] i::after{transform:scale(1)}

/* step 4: the proposal. From "working" on, the step holds the card's height: an arrival moves no other row */
#s4{align-content:start;transition:min-height var(--xf-surface-ms) var(--xf-spring-surface-flat)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:var(--xf-s3);min-height:var(--xf-tap);font:var(--xf-label);color:var(--xf-quiet)}
.foot .link{color:var(--xf-text);flex:none;padding:0 var(--xf-s1)}
.where{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--xf-s3);align-items:center;padding:var(--xf-s2) var(--xf-s4);border-radius:var(--xf-r-inner);box-shadow:inset 0 0 0 1px var(--xf-line);min-height:64px}
.where .link{padding:0 var(--xf-s1)}
.rcpt{display:grid;gap:var(--xf-s2);padding:var(--xf-s3) var(--xf-s4);border-radius:var(--xf-r-inner);box-shadow:inset 0 0 0 1px var(--xf-line)}
.rc-paper{font:var(--xf-label);color:var(--xf-text)}
/* the decision receipt: production's paper (receipt.rs), one family with the trading receipt */
.paper{position:relative;background:#fffdf7;color:#141414;border-radius:var(--xf-r-row) var(--xf-r-row) 0 0;padding:var(--xf-s4) var(--xf-s4) var(--xf-s3);display:grid;gap:6px;font:400 .875rem/1.25rem var(--xf-mono);box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%)}
.paper .pp-head{text-align:center}.pp-brand{font-weight:600;letter-spacing:.04em}.pp-tag{font-size:.8125rem;letter-spacing:.08em;color:rgb(20 20 20 / 62%)}
.pp-band{text-align:center;border-block:1px dashed rgb(20 20 20 / 30%);padding:4px 0;font-size:.8125rem}
.pp-row{display:flex;justify-content:space-between;gap:var(--xf-s3)}.pp-row span:last-child{text-align:right}
.pp-fig{text-align:center;padding:2px 0}.pp-k{font-size:.8125rem;color:rgb(20 20 20 / 62%)}.pp-big{font:600 1.25rem/1.5rem var(--xf-mono);letter-spacing:.06em}
.pp-small{font-size:.8125rem;color:rgb(20 20 20 / 62%)}.paper p,.paper span{text-wrap:pretty}
.paper{margin-bottom:8px}.paper::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(135deg,#fffdf7 4px,transparent 0) 0 0/8px 8px repeat-x,linear-gradient(225deg,#fffdf7 4px,transparent 0) 0 0/8px 8px repeat-x}
.radio button[aria-disabled="true"]{cursor:not-allowed;opacity:.62}
.radio button[aria-disabled="true"]:hover{background:none}
.pair .btn{transition:transform var(--xf-press-ms) var(--xf-spring-press),background-color var(--xf-tint-ms),opacity var(--xf-come-ms) var(--xf-ease-come)}
.keep{min-height:var(--xf-tap)}
@media (max-width:639px){.foot{min-height:54px}}
/* while the agent works, the held space is a quiet frame of the card's size */
#s4[data-fill]{grid-template-rows:auto minmax(0,1fr)}
/* nothing moves at a decision: in step 4 an arrival fades, it does not slide */
#s4 .come,#s4 .look{animation-name:fade}
@keyframes fade{from{opacity:0}}
.look-say{min-height:var(--xf-button-h);display:flex;align-items:center}
.closed{display:flex;align-items:center}
.ghost{align-content:start}
/* the coming card as a quiet skeleton: each shape has the place and the size of the card's own part */
.sk-hid{visibility:hidden}
.sk{position:relative}
.sk::after{content:"";position:absolute;left:0;top:50%;height:60%;width:100%;transform:translateY(-50%);border-radius:var(--xf-r-tag);background:var(--xf-hover)}
.sk-slot{position:relative}
.sk-over{position:absolute;inset:0;display:grid;gap:var(--xf-s2);align-content:start}
.prop-why.sk-slot .sk-over p{padding-left:0;border-left:0}
.sk-btn{display:block;min-height:var(--xf-button-h);border-radius:var(--xf-r-pill);background:var(--xf-hover)}

/* the view "Connections" */
.conn{display:grid;gap:var(--xf-s4)}
.conn-card{border-radius:var(--xf-r-tile);box-shadow:inset 0 0 0 1px var(--xf-line);padding:var(--xf-s4);display:grid;gap:var(--xf-s3)}
.conn-h{display:flex;justify-content:space-between;align-items:center;gap:var(--xf-s2);font:var(--xf-order)}
.acts{display:grid;counter-reset:n}
.acts li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:0 var(--xf-s3);padding:var(--xf-s2) 0;border-top:1px solid var(--xf-hair);counter-increment:n}
.acts li::before{content:counter(n);grid-column:1;grid-row:1;font:var(--xf-label);font-family:var(--xf-mono);color:var(--xf-quiet)}
.acts b{grid-column:2;grid-row:1;font:var(--xf-label);color:var(--xf-quiet)}
.acts span{grid-column:2;grid-row:2}
.acts em{grid-column:3;grid-row:1;font:var(--xf-label);font-style:normal;color:var(--xf-quiet);white-space:nowrap}
.acts li>.code{grid-column:2/-1;grid-row:3;margin-top:var(--xf-s2)}
@media (min-width:1000px){.conn-paper{display:none}}
.proto{font:var(--xf-label);color:var(--xf-quiet);border:1px dashed var(--xf-edge);border-radius:var(--xf-r-inner);padding:var(--xf-s2) var(--xf-s3)}
.radio small{display:block;font:var(--xf-label);color:var(--xf-quiet)}
.split.two{border-top:0;padding-top:0}
.split.two b{font:var(--xf-total)}

.bar{height:4px;border-radius:var(--xf-r-pill);background:var(--xf-hover);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--xf-text);transform:scaleX(0);transform-origin:left}
.bar.run i{transform:scaleX(1);transition:transform var(--xf-work) linear}
.prop{padding:var(--xf-s4);border-radius:var(--xf-r-card);background:var(--xf-raised);box-shadow:inset 0 0 0 1px var(--xf-line);display:grid;gap:var(--xf-s3)}
.prop-kind{display:flex;justify-content:space-between;align-items:center;gap:var(--xf-s2)}
.prop-name{font:var(--xf-title);letter-spacing:-.015em}
.prop-cost{display:flex;justify-content:space-between;align-items:baseline;padding:var(--xf-s3) 0;border-top:1px solid var(--xf-line);border-bottom:1px solid var(--xf-line)}
.prop-cost b{font:var(--xf-total)}
.prop-why{display:grid;gap:var(--xf-s1)}
.prop-why p:last-child{padding-left:var(--xf-s3);border-left:2px solid var(--xf-rule)}
.act{min-height:var(--xf-button-h);display:grid}
.act>*{grid-area:1/1}
.act .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--xf-s3)}
.look{display:grid;gap:var(--xf-s2);animation:look var(--xf-come-ms) var(--xf-ease-come) both}
@keyframes look{from{opacity:0;transform:translateY(var(--xf-look-y))}}
.look .btn,.pair .btn{position:relative;overflow:hidden}
.look .btn i,.pair .btn i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.5;transform-origin:left;animation:rest var(--xf-rest) linear both}
@keyframes rest{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.facts{display:grid;gap:0}
.facts div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:var(--xf-s3);padding:var(--xf-s2) 0;border-top:1px solid var(--xf-hair)}
.facts dt{color:var(--xf-quiet)}

/* step 5: the phone */
.app{display:grid;grid-template-columns:fit-content(176px) minmax(0,1fr);gap:var(--xf-gap);align-items:start}
.app.app-no-link{grid-template-columns:minmax(0,1fr)}
.qr{width:132px;height:132px;padding:10px;border-radius:var(--xf-r-inner);background:#fff;box-shadow:inset 0 0 0 1px var(--xf-line)}
.qr svg{display:block;width:100%;height:100%}
@media (max-width:639px){.app{grid-template-columns:minmax(0,1fr)}.qr-box{display:none}}
@media (min-width:640px){.only-phone{display:none!important}}
@media (max-width:639px){.only-desk{display:none!important}}
.lock{background:var(--xf-lock);color:var(--xf-on-dark);border-radius:var(--xf-r-card);padding:var(--xf-s4);display:grid;gap:var(--xf-s3)}
.lock time{font:500 2rem/2.25rem var(--xf-font);letter-spacing:-.02em;text-align:center;padding:var(--xf-s2) 0}
.push{background:var(--xf-glass);border-radius:var(--xf-r-tile);padding:var(--xf-s3);display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:2px var(--xf-s3)}
.push i{width:28px;height:28px;border-radius:7px;background:rgb(0 156 149);grid-row:1/4}
.push b{font:600 .875rem/1.25rem var(--xf-font)}
.push span{grid-column:2/4;font:400 .875rem/1.25rem var(--xf-font);text-wrap:pretty}
.push em{font:var(--xf-label);font-style:normal;color:var(--xf-on-dark-quiet)}
.lock small{font:var(--xf-label);color:var(--xf-on-dark-quiet);text-align:center}

/* the rail */
.rail-card{border-radius:var(--xf-r-card);box-shadow:inset 0 0 0 1px var(--xf-line);padding:var(--xf-pad);display:grid;gap:var(--xf-s4);min-height:268px;align-content:start}
.pv{display:grid;gap:var(--xf-s3)}
.pv .big{font:var(--xf-count);letter-spacing:-.02em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--xf-s3);padding-top:var(--xf-s3);border-top:1px solid var(--xf-line)}
.split b{display:block;font:500 .875rem/1.25rem var(--xf-mono)}
.term{background:var(--xf-lock);color:var(--xf-on-dark);border-radius:var(--xf-r-inner);padding:var(--xf-s3);font:400 .875rem/1.25rem var(--xf-mono);display:grid;gap:2px;overflow-wrap:anywhere}
.term span{color:var(--xf-on-dark-quiet)}
.host{background:var(--xf-raised);border-radius:var(--xf-r-tile);box-shadow:inset 0 0 0 1px var(--xf-hair);padding:var(--xf-s4);display:grid;gap:var(--xf-s2)}
.rail-foot{margin-top:var(--xf-s4);padding:0 var(--xf-s1);display:grid;gap:var(--xf-s2)}
.rail-foot ul{display:grid;gap:2px;font:var(--xf-label);color:var(--xf-quiet)}
.below{display:grid;gap:var(--xf-s2);margin-top:var(--xf-gap)}
.done-panel{margin-top:var(--xf-gap);padding:var(--xf-pad);border-radius:var(--xf-r-card);background:var(--xf-raised);box-shadow:inset 0 0 0 1px var(--xf-line);display:grid;gap:var(--xf-s3)}
.done-panel h2{font:var(--xf-title);letter-spacing:-.015em}

/* the sheet */
.scrim{position:fixed;inset:0;background:var(--xf-dim);opacity:0;pointer-events:none;transition:opacity var(--xf-exit-ms) ease-out;z-index:10}
.scrim[data-on]{opacity:1;pointer-events:auto;transition:opacity var(--xf-surface-ms) var(--xf-spring-surface-flat)}
.sheet{position:fixed;z-index:11;left:0;right:0;bottom:0;background:var(--xf-sheet);border-radius:var(--xf-r-card) var(--xf-r-card) 0 0;padding:var(--xf-pad) 20px calc(var(--xf-pad) + env(safe-area-inset-bottom));
  box-shadow:var(--xf-lift),inset 0 0 0 1px var(--xf-line);display:grid;gap:var(--xf-s4);transform:translateY(105%);visibility:hidden;
  transition:transform var(--xf-exit-ms) ease-out,visibility 0s var(--xf-exit-ms)}
.sheet[data-on]{transform:none;visibility:visible;transition:transform var(--xf-surface-ms) var(--xf-spring-surface-flat),visibility 0s}
@media (min-width:640px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:420px;border-radius:var(--xf-r-card);padding:var(--xf-pad);transform:translate(-50%,calc(-50% + var(--xf-look-y)));opacity:0;
    transition:transform var(--xf-exit-ms) ease-out,opacity var(--xf-exit-ms) ease-out,visibility 0s var(--xf-exit-ms)}
  .sheet[data-on]{transform:translate(-50%,-50%);opacity:1;transition:transform var(--xf-surface-ms) var(--xf-spring-surface-flat),opacity var(--xf-come-ms) var(--xf-ease-come),visibility 0s}
}
.sheet h2{font:var(--xf-title);letter-spacing:-.015em}
.sheet .standin{border:1px dashed var(--xf-edge);border-radius:var(--xf-r-tile);padding:var(--xf-s4);display:grid;gap:var(--xf-s3)}
.acct{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--xf-s3);align-items:center;min-height:56px;padding:var(--xf-s2) var(--xf-s3);border-radius:var(--xf-r-inner);box-shadow:inset 0 0 0 1px var(--xf-line);text-align:left;width:100%;
  transition:transform var(--xf-press-ms) var(--xf-spring-press),background-color var(--xf-tint-ms)}
.acct:hover{background:var(--xf-raised)}
.acct:active{transform:scale(var(--xf-press-scale))}
.acct b{width:36px;height:36px;border-radius:50%;background:var(--xf-hover);display:grid;place-items:center;font:var(--xf-order)}
.acct span{display:grid}
.yesno{display:grid;gap:var(--xf-s2)}
.yesno li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--xf-s3);padding:var(--xf-s2) 0;border-top:1px solid var(--xf-hair)}
.yesno li:first-child{border-top:0}
.yesno b{font:var(--xf-label);color:var(--xf-quiet);line-height:1.25rem}

.toast{position:fixed;left:16px;right:16px;top:6px;margin:0 auto;z-index:12;transform:translateY(calc(-1 * var(--xf-look-y)));opacity:0;pointer-events:none;background:var(--xf-button);color:var(--xf-button-text);
  font:var(--xf-body);padding:var(--xf-s3) var(--xf-s4);border-radius:var(--xf-r-inner);max-width:440px;box-shadow:var(--xf-lift);
  transition:opacity var(--xf-exit-ms) ease-out,transform var(--xf-exit-ms) ease-out}
.toast[data-on]{opacity:1;transform:none;transition:opacity var(--xf-come-ms) var(--xf-ease-come),transform var(--xf-come-ms) var(--xf-ease-come)}
/* the toast never covers a row that waits: over the top bar on a phone, under the rail at a desk */
@media (min-width:1000px){.toast{top:auto;left:auto;margin:0;bottom:var(--xf-pad);right:max(var(--xf-pad),calc(50vw - 520px + var(--xf-pad)));width:360px;max-width:360px;transform:translateY(var(--xf-look-y))}}

/* ---- production: links, forms, no script ---- */
a{color:inherit}
.brand{text-decoration:none;color:inherit;min-height:var(--xf-tap)}
.btn{text-decoration:none}
a.btn:hover{background:var(--xf-button-hover)}
a.btn.line:hover{background:var(--xf-hover)}
.step-t{margin:0;font:inherit}
form.fact{display:contents}
.pick{margin:0}
.pick button:disabled,.step-h[aria-disabled="true"]{cursor:default}
.pick button:disabled{opacity:.62;transform:none}
.label.strong{color:var(--xf-text)}
.link:disabled,.btn:disabled{cursor:default;opacity:.38;transform:none}
.plans{padding:0 var(--xf-s4)}
/* step 2 on a phone: "This step is on your computer." unless he asks for the lines */
.on-phone{display:none}
@media (max-width:639px){
  .agent-road:not([data-lines]) .agent-lines{display:none}
  .agent-road:not([data-lines]) .on-phone{display:grid}
}
/* With no script each step stands open, in order: nothing is hidden behind a press */
html:not([data-js]) .body{grid-template-rows:1fr}
html:not([data-js]) .body>div{visibility:visible}
html:not([data-js]) .inner{opacity:1;transform:none}
html:not([data-js]) .m-body{grid-template-rows:1fr}
html:not([data-js]) .m-body>div{visibility:visible}
html:not([data-js]) .m-end{display:none}
html:not([data-js]) [data-pane]{display:grid}
html:not([data-js]) .tabs{display:none}
html[data-js] [data-pane][data-off]{display:none}
noscript .note{margin-bottom:var(--xf-gap)}
/* Every term of the proposal before its controls (J3-17, J8-1, J8-2): the orders, the server's fee rows, its total, "How this fee is counted". */
.terms{display:grid;gap:var(--xf-s2)}
.t-orders{list-style:none;margin:0;padding:0;display:grid;gap:var(--xf-s1)}
.t-orders li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xf-s2)}
.t-act{font-weight:600}
.t-rows{margin:0;display:grid}
.t-row{display:flex;justify-content:space-between;gap:var(--xf-s3);padding:var(--xf-s1) 0;border-top:1px solid var(--xf-line)}
.t-row dt small{display:block;color:var(--xf-quiet);font:var(--xf-label)}
.t-row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-total{font-weight:600}
/* "How this fee is counted": a fixed dialog over the page, opened modal by the script (setup_steps.js); the card under it never moves */
.t-sum-open{min-height:44px;display:inline-flex;align-items:center;justify-self:start;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
html:not([data-js]) .t-sum-open{display:none}
.t-sum{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:24px;border:0;border-radius:16px;background:var(--xf-sheet);color:var(--xf-text);display:none;gap:var(--xf-s3)}
.t-sum[open]{display:grid;animation:t-sum-in 300ms ease-out}
.t-sum::backdrop{background:rgb(0 0 0 / 40%)}
.t-sum-h{font-weight:600}
.t-sum p,.t-sum-plain p{overflow-wrap:anywhere}
.t-sum [data-fee-close]{min-height:44px}
@keyframes t-sum-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.t-sum[open]{animation:none}}
/* the status line's slot: the live line and, hidden under it, the same line with its longest count, in one grid cell.
   The cell holds the taller line's height from the first paint, so the final minute moves no button and the comma stays at the count (J3-32) */
.s4-line-slot{display:grid;grid-template-columns:minmax(0,1fr)}
.s4-line-slot>span{grid-area:1/1;min-width:0}
.s4-line-measure{visibility:hidden;pointer-events:none}