/* flow: Pricing (div.ticket): the plan, the tier table and the fee calculator behind its toggle. The route rules below are
   gone with the route race; a few phone/reduce rules for it remain harmless.
   Owned by flow. Everything is scoped under #flow; classes carry the flow- prefix (plus the plan's .ticket/.route/.route-pin).
   #flow has NO z-index, so the route's z-index 2 and #sky's z-index 3 share the root stacking context.
   Route layouts (js/flow.js): default = horizontal lanes in a pin; .flow-mv = vertical lanes in a pin (phones);
   .flow-mb = a ~520px block that plays on the clock (short phones), held bottom-aligned through sky's aperture. */

#flow{position:relative;background:var(--paper);color:var(--ink);--fgold:#7a5604}
#flow .flow-gold,#flow .flow-ftab{color:#1a1200;background:var(--gold)}
#flow .flow-lab{display:block;color:var(--ink-2);margin-bottom:16px}
#flow .core-roll-i{text-overflow:clip} /* CT.roll freezes the outgoing line at its rounded width: never an ellipsis */

/* ------------------------------------------------------------------ PART A · TICKET */
#flow .ticket{position:relative;padding:calc(var(--nav-h) + 13vh) var(--g) 13vh;border-top:1px solid var(--line)}
#flow .flow-tk-head,#flow .flow-rt-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
#flow .ticket h2,#flow .route h2{font-weight:400;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.03em;line-height:1.02;max-width:13ch}
#flow .route h2{max-width:none}
#flow .flow-tk-head p,#flow .flow-rt-head p{color:var(--ink-2);font-size:15px;line-height:1.5;max-width:46ch;justify-self:end}
#flow .flow-tk-head p{font-size:17px;max-width:30ch}

/* the calculator's header: a gold tab and its caption */
#flow .flow-cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:clamp(36px,6vh,64px);white-space:nowrap}
#flow .flow-ftab{height:20px;padding:0 7px;display:inline-flex;align-items:center;font:600 11px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
#flow .flow-capt{font:400 12px/1 var(--mono);letter-spacing:.02em;color:var(--ink-2)}

/* chart: geometry is built by js/flow.js in CSS px (one SVG unit = 1px), so every rule is a true 1px hairline */
#flow .flow-chart{position:relative;margin-top:14px;height:var(--flow-ch,456px);touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#flow .flow-chart>svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;max-width:none}
#flow .flow-chart text{font-family:var(--mono);font-size:11px;fill:var(--ink-2);letter-spacing:.02em}
#flow .flow-chart .flow-ax{stroke:var(--ink);stroke-width:1;shape-rendering:crispEdges}
#flow .flow-chart .flow-tk{stroke:var(--ink);stroke-width:1;shape-rendering:crispEdges}
#flow .flow-chart .flow-tk.mi{stroke-opacity:.35}
#flow .flow-chart .flow-gl{stroke:var(--ink);stroke-opacity:.07;shape-rendering:crispEdges}
#flow .flow-chart .flow-bd{stroke:var(--fgold);stroke-dasharray:1 3;shape-rendering:crispEdges}
#flow .flow-chart text.flow-bdl{fill:var(--fgold)}
#flow .flow-chart .flow-rs{stroke:var(--ink);stroke-opacity:.35;shape-rendering:crispEdges}
#flow .flow-chart .flow-tr{stroke:var(--ink);stroke-opacity:.35;stroke-width:1;shape-rendering:crispEdges;transition:stroke-opacity .24s linear}
#flow .flow-chart .flow-tr.on{stroke-opacity:1}
#flow .flow-chart .flow-trf{fill:var(--ink);opacity:0;transition:opacity .24s linear}
#flow .flow-chart .flow-trf.on{opacity:1}

#flow .flow-ov{position:absolute;inset:0;pointer-events:none}
#flow .flow-tab{position:absolute;left:0;top:0;height:18px;padding:0 6px;display:flex;align-items:center;font:600 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:#1a1200;background:var(--gold);white-space:nowrap;transform:translateY(-100%)}
#flow .flow-tab::after{content:"";position:absolute;left:0;bottom:-4px;width:1px;height:4px;background:var(--gold)}

/* the jeweller's tag: #flowTag is the hole; its body rotates about it. The face is sized in ch to its value (--tw, js). */
#flow .flow-tag{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
#flow .flow-thread{position:absolute;left:0;top:0;z-index:1;width:1px;height:1px;overflow:visible;pointer-events:none;max-width:none}
#flow .flow-thread path{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round}
#flow .flow-tagb{--tw:112px;position:absolute;left:-10px;top:-32px;width:var(--tw);height:64px;background:#ffffff;border:1px solid var(--ink);transform-origin:10px 32px;pointer-events:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;will-change:transform}
#flow .flow-tag.is-drag .flow-tagb{cursor:grabbing}
#flow .flow-chart{cursor:pointer}
#flow .flow-hole{position:absolute;left:6px;top:28px;width:6px;height:6px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--ink),0 0 0 3px #ffffff,0 0 0 4px rgba(14,23,38,.22)}
#flow .flow-tagb input{position:absolute;left:18px;top:9px;width:calc(var(--tw) - 22px);height:26px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:var(--ink);font:500 18px/26px var(--mono);letter-spacing:0;outline:none;cursor:inherit;-webkit-appearance:none;appearance:none}
#flow .flow-tagb input:focus{cursor:text}
#flow .flow-tag.is-edit .flow-tagb,#flow .flow-tag.is-key .flow-tagb{outline:2px solid var(--gold);outline-offset:3px}
#flow .flow-tagb .flow-tagf{position:absolute;left:18px;bottom:8px;right:6px;display:flex;justify-content:space-between;font:400 11px/14px var(--mono);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;border-top:1px dashed rgba(14,23,38,.28);padding-top:3px}
#flow .flow-tagb .flow-tagf .core-roll{vertical-align:top}
/* turned: near the right end the tag hangs to the left of its hole (the same tag, mirrored about the hole) */
#flow .flow-tag.is-flip .flow-tagb{left:calc(10px - var(--tw));transform-origin:calc(var(--tw) - 10px) 32px}
#flow .flow-tag.is-flip .flow-hole{left:calc(var(--tw) - 14px)}
#flow .flow-tag.is-flip .flow-tagb input{left:5px}
#flow .flow-tag.is-flip .flow-tagb .flow-tagf{left:6px;right:18px}

/* boundary callout (desktop): gold tab + ruled box; flashes for 1.2s */
#flow .flow-flash{position:absolute;left:0;top:0;display:flex;align-items:stretch;opacity:0;visibility:hidden;white-space:nowrap;pointer-events:none}
#flow .flow-flash b{display:flex;align-items:center;padding:0 8px;font:500 13px/1 var(--mono);color:#1a1200;background:var(--gold)}
#flow .flow-flash span{display:flex;align-items:center;padding:0 10px;height:28px;font:400 13px/1 var(--sans);color:var(--ink);background:#ffffff;border:1px solid var(--ink);border-left:0}
#flow .flow-lead{position:absolute;left:0;top:0;width:1px;background:var(--gold);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none}
/* the phone's boundary ticker (hidden on wide screens) */
#flow .flow-tick{display:none}

/* presets: on desktop each one hangs off the ruler at its own amount */
#flow .flow-pre{position:relative;height:28px;margin-top:12px}
#flow .flow-pre button{position:absolute;left:0;top:0;height:28px;padding:0 9px;display:flex;align-items:center;gap:7px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:600 11px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:background .24s linear,color .24s linear}
#flow .flow-pre button b{font:500 11px/1 var(--mono);letter-spacing:.02em}
#flow .flow-pre button::before{content:"";position:absolute;left:var(--flow-sx,50%);bottom:100%;margin-bottom:1px;width:1px;height:var(--flow-pin,10px);background:var(--ink);opacity:.35}
#flow .flow-pre button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
@media (hover:hover){ #flow .flow-pre button:hover{background:var(--ink);color:var(--paper)} }

/* the ledger: odometer columns on wide screens, receipt rows on phones */
#flow .flow-odo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,5vh,52px);border-top:1px solid var(--ink)}
#flow .flow-col{position:relative;display:flex;flex-direction:column;padding:16px 24px 0 0;min-width:0}
#flow .flow-col+.flow-col{padding-left:24px;border-left:1px solid var(--line)}
#flow .flow-col .lab{display:block;color:var(--ink-2);white-space:nowrap}
#flow .flow-col .lab .core-roll{vertical-align:top}
#flow .flow-num{order:2;display:block;margin-top:14px;font-weight:300;font-size:clamp(36px,4.3vw,62px);letter-spacing:-.035em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
#flow .flow-num .flow-q{display:none}
#flow .flow-num.q .flow-q{display:inline}
#flow .flow-num.q .flow-dg{display:none}
#flow .flow-ks{display:none}
#flow .flow-keep .lab,#flow .flow-keep .flow-num{color:var(--blue)}
#flow .flow-rate{order:3;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 3px;margin-top:14px;font:400 13px/1.4 var(--mono);color:var(--ink-2)}
#flow .flow-rate input{width:4.2ch;padding:0 1px 1px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:500 13px/1.4 var(--mono);text-align:right;outline:none;-webkit-appearance:none;appearance:none}
#flow .flow-rate input#flowCardFix{width:5.4ch}
#flow .flow-rate input:focus{border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
#flow .flow-rate em{font-style:normal;color:var(--ink-2);margin-left:10px}
#flow .flow-hint{margin-top:clamp(22px,4vh,40px);font:400 12px/1.6 var(--mono);letter-spacing:.02em;color:var(--ink-2);max-width:96ch}
#flow .flow-tk-foot{margin-top:6px;font:400 11px/1.6 var(--mono);letter-spacing:.02em;color:var(--ink-2);max-width:96ch}

/* ------------------------------------------------------------------ PHONE */
@media (max-width:719px){
  #flow .ticket{padding:calc(var(--nav-h) + 40px) var(--g) 56px}
  #flow .flow-tk-head,#flow .flow-rt-head{grid-template-columns:1fr;gap:12px}
  #flow .flow-tk-head p,#flow .flow-rt-head p{justify-self:start;font-size:15px;line-height:1.5;max-width:40ch}
  #flow .flow-lab{margin-bottom:12px;font-size:11px}
  #flow .ticket h2,#flow .route h2{font-size:28px;line-height:1.04;max-width:none}

  /* the calculator card fits one screen under the nav */
  #flow .flow-calc{scroll-margin-top:52px}
  #flow .flow-cap{margin-top:28px;gap:10px}
  #flow .flow-capt{font-size:12px}
  #flow .flow-chart{margin-top:10px}
  #flow .flow-tab{height:17px;padding:0 5px;font-size:10.5px}
  #flow .flow-tagb{--tw:96px;height:46px;top:-23px;transform-origin:10px 23px}
  #flow .flow-hole{left:6px;top:19px}
  #flow .flow-tagb input{left:15px;top:3px;width:calc(var(--tw) - 19px);height:22px;font-size:16px;line-height:22px}
  #flow .flow-tagb .flow-tagf{left:15px;bottom:4px;right:6px;padding-top:2px;line-height:13px}
  #flow .flow-tag.is-flip .flow-tagb{transform-origin:calc(var(--tw) - 10px) 23px}
  #flow .flow-tag.is-flip .flow-tagb input{left:4px}
  #flow .flow-tag.is-flip .flow-tagb .flow-tagf{left:5px;right:15px}
  #flow .flow-flash,#flow .flow-lead{display:none}
  #flow .flow-tick{display:flex;align-items:center;gap:8px;height:28px;margin:4px 0 0;font:400 13px/1 var(--mono);letter-spacing:0;color:var(--ink-2);white-space:nowrap;overflow:hidden}
  #flow .flow-tick-d{display:none;height:22px;padding:0 7px;align-items:center;font-weight:500;color:#1a1200;background:var(--gold)}
  #flow .flow-tick.has-d .flow-tick-d{display:inline-flex}
  #flow .flow-tick.has-d .flow-tick-t{color:var(--ink)}

  #flow .flow-pre{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px;height:auto}
  #flow .flow-pre button{position:static;flex-direction:column;justify-content:center;gap:4px;height:48px;padding:0 2px;font-size:11px}
  #flow .flow-pre button b{font-size:13px}
  #flow .flow-pre button::before{display:none}

  #flow .flow-odo{display:block;margin-top:14px;border-top:1px solid var(--ink)}
  #flow .flow-col,#flow .flow-col+.flow-col{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:44px;padding:0;border-left:0;border-bottom:1px solid var(--line)}
  #flow .flow-col .lab{grid-column:1;font-size:11px}
  #flow .flow-lx,#flow .flow-rate em{display:none}
  #flow .flow-rate{grid-column:2;order:0;margin:0;flex-wrap:nowrap;align-items:center;gap:0 2px;font-size:16px;line-height:1}
  #flow .flow-rate input{height:44px;padding:0 1px;font-size:16px;line-height:44px;border-bottom:0;background:linear-gradient(var(--ink),var(--ink)) 0 calc(50% + 11px)/100% 1px no-repeat}
  #flow .flow-rate input:focus{box-shadow:none;background-image:linear-gradient(var(--gold),var(--gold));background-size:100% 2px}
  #flow .flow-num{grid-column:3;margin:0;font:400 15px/1 var(--mono);letter-spacing:0;justify-self:end}
  #flow .flow-keep{min-height:60px;border-bottom:0}
  #flow .flow-keep .lab{max-width:19ch;white-space:normal;line-height:1.3}
  #flow .flow-keep .lab .core-roll-i{white-space:normal}
  #flow .flow-keep .flow-num{font:300 32px/1 var(--sans);letter-spacing:-.03em}
  #flow .flow-ks{display:inline}
  #flow .flow-hint{margin-top:18px;font-size:12px;line-height:1.5}
  #flow .flow-tk-foot{font-size:12px;line-height:1.5}

  /* the route: its copy is a lead-in that scrolls ahead of the pin */
  #flow .flow-rt-lead{padding:calc(var(--nav-h) + 32px) var(--g) 28px}
  #flow .flow-rt-lead .flow-rt-foot{margin-top:16px;font-size:12px;line-height:1.5}
}
@media (max-width:359px){
  #flow .ticket h2,#flow .route h2{font-size:26px}
  #flow .flow-tick{font-size:12px}
  #flow .flow-pre button b{font-size:12px}
  #flow .flow-pre{gap:4px}
  #flow .flow-stage{--hfs:12px}
  #flow .flow-keep .flow-num{font-size:28px}
}
@media (max-width:719px) and (max-height:620px){
  #flow .ticket{padding-top:calc(var(--nav-h) + 28px)}
  #flow .flow-cap{margin-top:22px}
}
#flow .flow-mv .flow-rt-run{height:calc(var(--pin-h) + 180vh)}
#flow .flow-mv .route-pin{padding:calc(var(--nav-h) + 12px) var(--g) calc(var(--safe-b,0px) + 12px)}
#flow .flow-mb .flow-rt-run{height:calc(var(--blk-h,520px) + 60vh)}
#flow .flow-mb .route-pin{top:calc(var(--pin-h) - var(--blk-h,520px));height:var(--blk-h,520px);padding:0 var(--g);box-shadow:none}
#flow .flow-mb .flow-stage{flex:none}
#flow .flow-mb .flow-replay{display:block;position:absolute;right:var(--g);bottom:4px;height:44px;min-width:88px;padding:0 4px;border:0;background:none;color:var(--ink);font:600 12px/44px var(--cond);letter-spacing:.12em;text-transform:uppercase;text-align:right;text-decoration:underline;text-underline-offset:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#flow .flow-mb .flow-replay[hidden]{display:none}

/* ------------------------------------------------------------------ TABLET: horizontal lanes from a 700px stage */
@media (min-width:720px) and (max-width:979px){
  #flow .flow-rt-head{grid-template-columns:1fr;gap:14px}
  #flow .flow-rt-head p{justify-self:start}
  #flow .route-pin{padding-top:calc(var(--nav-h) + 4vh)}
  #flow .flow-val{font-size:11px;padding-left:6px}
}
@media (pointer:coarse) and (min-width:720px){
  #flow .flow-rate,#flow .flow-rate input{font-size:16px}
}

/* ------------------------------------------------------------------ REDUCED MOTION: the final race state, static; no tail */
html.reduce #flow .flow-rt-run{height:auto}
html.reduce #flow .route-pin{position:relative;top:auto;height:auto;box-shadow:none;padding-bottom:12vh}
html.reduce #flow .flow-mb .route-pin{padding:calc(var(--nav-h) + 12px) var(--g) 64px}
html.reduce #flow .flow-stage{flex:none}
html.reduce #flow .flow-rt-pin .flow-rt-foot{margin-top:40px}
html.reduce #flow .flow-pre button,html.reduce #flow .flow-chart .flow-tr,html.reduce #flow .flow-chart .flow-trf,html.reduce #flow .flow-stage.v .flow-strip{transition:none}

/* ------------------------------------------------------------------ NO SCRIPT: the four tiers as a ruled list, the route as its sentence */
#flow .flow-tiers{display:none}
html:not(.js) #flow .flow-chart,html:not(.js) #flow .flow-pre,html:not(.js) #flow .flow-tick{display:none}
html:not(.js) #flow .flow-tiers{display:block;list-style:none;margin:16px 0 0;padding:0;max-width:560px;border-top:1px solid var(--ink)}
html:not(.js) #flow .flow-tiers li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--mono)}
html:not(.js) #flow .flow-tiers b{font-weight:500}
html:not(.js) #flow .flow-rt-run{height:auto}
html:not(.js) #flow .route-pin{position:relative;height:auto;box-shadow:none;padding-bottom:12vh}
html:not(.js) #flow .flow-stage{display:none}
html:not(.js) #flow #flowRouteText{position:static!important;width:auto;height:auto;margin:28px 0 24px;overflow:visible;clip:auto;clip-path:none;white-space:normal;max-width:60ch;font-size:15px;line-height:1.55;color:var(--ink-2)}

#flow .ticket .flow-tk-head h2{max-width:16ch}

/* ------------------------------------------------------------------ SHORT HOMEPAGE (2026-10-10): one strong price line and Order;
   the tier table, dollars at 0.1%, the app screenshots and the card-fee calculator sit behind "See full pricing" (#flowMore). */
#flow .flow-anchor{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:0}
#flow .ticket{padding:clamp(88px,13vh,140px) var(--g) clamp(64px,10vh,104px)}
#flow .flow-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:end}
#flow .ticket h2.flow-big{max-width:none;font-weight:300;font-size:clamp(34px,3.9vw,58px);line-height:1.08;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
#flow .flow-ph{white-space:nowrap}
#flow .flow-ph-r{display:block;color:var(--blue)}
#flow .flow-dot2{display:none}
#flow .flow-dot{color:var(--gold)}
#flow .flow-side{justify-self:end;max-width:400px}
#flow .flow-once{max-width:34ch;font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
#flow .flow-order{margin-top:22px}

/* the toggle: an accessible button that opens the details with a height animation (js/flow.js) */
#flow .flow-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;margin-top:clamp(40px,6vh,64px);padding:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);text-align:left;font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);-webkit-tap-highlight-color:transparent}
#flow .flow-tg-x{position:relative;flex:none;width:18px;height:18px}
#flow .flow-tg-x::before,#flow .flow-tg-x::after{content:"";position:absolute;left:0;top:8.5px;width:18px;height:1px;background:var(--ink);transition:transform .35s var(--out)}
#flow .flow-tg-x::after{transform:rotate(90deg)}
#flow .flow-toggle[aria-expanded=true] .flow-tg-x::after{transform:rotate(0)}
@media (hover:hover){ #flow .flow-toggle:hover{color:var(--blue)} #flow .flow-toggle:hover .flow-tg-x::before,#flow .flow-toggle:hover .flow-tg-x::after{background:var(--blue)} }
html.js #flow .flow-more:not(.is-open){display:none}
#flow .flow-more{overflow:hidden}
#flow .flow-more-in{padding-top:clamp(28px,5vh,48px)}
html:not(.js) #flow .flow-toggle{display:none}

#flow .flow-plan{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
#flow .flow-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#flow .flow-tbl caption{caption-side:top;text-align:left;padding:0 0 12px;font:400 15px/1.4 var(--sans);color:var(--ink-2)}
#flow .flow-tbl thead th{padding:0 0 10px;font:400 13px/1.2 var(--sans);color:var(--ink-2);text-align:left;border-bottom:1px solid var(--ink)}
#flow .flow-tbl thead th+th,#flow .flow-tbl td{text-align:right}
#flow .flow-tbl tbody th{padding:0;font:400 17px/1.3 var(--sans);text-align:left;color:var(--ink)}
#flow .flow-tbl td{padding:0;height:56px;font-weight:300;font-size:clamp(26px,2.3vw,34px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
#flow .flow-tbl tbody tr{border-bottom:1px solid var(--line)}
#flow .flow-tbl tbody tr:last-child td{color:var(--blue)}
#flow .flow-usd{margin-top:22px;max-width:56ch;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
#flow .flow-usd b{font-weight:500;color:var(--ink)}
#flow .flow-inc{margin-top:10px;max-width:56ch;font-size:14px;line-height:1.55;color:var(--ink-3);text-wrap:pretty}

#flow .flow-calc{margin-top:clamp(48px,8vh,80px);padding-top:24px;border-top:1px solid var(--line)}
#flow .flow-calc-h{margin-bottom:28px;font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
#flow .flow-calc .flow-chart{margin-top:0}
#flow .flow-tk-foot{margin-top:18px}

/* the pointer to CrypTap Go under the order button */
#flow .flow-go{margin-top:12px;font-size:15px;line-height:1.4;color:var(--ink-2)}
#flow .flow-go a{display:inline-block;padding:6px 0;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#flow .flow-go a span{display:inline-block;margin-left:6px;transition:transform .38s var(--out)}
@media (hover:hover){ #flow .flow-go a:hover{color:var(--blue)} #flow .flow-go a:hover span{transform:translateX(4px)} }

/* the real CrypTap app, three screens in a row, one quiet caption */
#flow .flow-app{display:flex;justify-content:flex-start;align-items:flex-start;gap:20px}
#flow .flow-shot{position:relative;margin:0;flex:1 1 0;min-width:0;max-width:210px}
#flow .flow-shot-f{position:relative;width:100%;padding:5px;background:var(--white);border:1px solid var(--line-strong);border-radius:24px;
  box-shadow:0 1px 2px rgba(14,23,38,.05),0 24px 48px -26px rgba(14,23,38,.34)}
#flow .flow-shot img{width:100%;height:auto;border-radius:19px;background:var(--white)}
#flow .flow-sh-cap{margin-top:14px;max-width:52ch;font-size:13px;line-height:1.45;color:var(--ink-3)}

#flow .flow-plan>*{min-width:0}
@media (max-width:979px){
  #flow .flow-plan{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  #flow .ticket{padding:64px var(--g) 8px}
  #flow .flow-intro{grid-template-columns:1fr;gap:16px}
  #flow .ticket h2.flow-big{font-size:clamp(28px,8vw,34px);line-height:1.1}
  #flow .flow-dot{display:none}
  #flow .flow-ph{display:block;white-space:normal}
  #flow .flow-side{justify-self:stretch;max-width:none}
  #flow .flow-once{font-size:15px}
  #flow .flow-order{margin-top:18px;width:100%}
  #flow .flow-toggle{margin-top:32px;min-height:60px;font-size:17px;border-bottom:0}
  #flow .flow-more-in{padding-top:12px;padding-bottom:40px}
  #flow .flow-plan{gap:36px}
  #flow .flow-tbl tbody th{font-size:16px}
  #flow .flow-tbl td{height:50px;font-size:26px}
  /* phones: one snapping row of screenshots */
  #flow .flow-app{gap:14px;margin:0 calc(-1 * var(--g));padding:4px var(--g) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #flow .flow-app::-webkit-scrollbar{display:none}
  #flow .flow-shot{flex:none;width:188px;max-width:none;scroll-snap-align:start}
  #flow .flow-sh-cap{margin-top:10px;font-size:12.5px}
  #flow .flow-calc{scroll-margin-top:52px;margin-top:44px}
  #flow .flow-calc-h{font-size:21px;margin-bottom:18px}
}