/* App flows drawn in HTML/SVG (1440x900 each, scaled to their box by js/flows.js).
   Used by the home page's How it works and by the feature pages. Every class here is
   specific to the flows (hw-, i-, w-, s-, g-, fv-), so nothing leaks into site.css. */
.fv { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #f5f6fa; }
.fv > [data-flow] { position: absolute; inset: 0; }
  /* ---- the app inside each step (drawn at 1440x900, scaled) ---- */
.hw { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; display: flex; background: #f5f6fa; font: 400 15px/1.35 'Inter', system-ui, sans-serif; color: #0f1116;
  --blue: #1f6bff; --green: #22a447; --red: #e5484d; --amber: #f2a20c; --teal: #17a2b8; --grey: #6c757d; --soft: #eef4ff; }
.hw-main { flex: 1; padding: 0 34px; min-width: 0; position: relative; }
.hw-head { height: 76px; display: flex; align-items: center; gap: 12px; }
.hw-head h3 { font-size: 21px; font-weight: 700; }
.hw-head .av { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.hw-card { background: #fff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15,17,22,.05), 0 0 0 1px rgba(15,17,22,.04); padding: 26px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.fc-ok { color: var(--green); background: #e8f7ee; } .fc-blue { color: var(--blue); background: var(--soft); } .fc-red { color: var(--red); background: #fdecec; }
.fc-amber { color: #b97300; background: #fff4e0; } .fc-grey { color: var(--grey); background: #f1f2f5; }
.fnum { font-variant-numeric: tabular-nums; }
.flow-cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 20; pointer-events: none; }

/* 1 · import */
.i-drop { position: relative; height: 330px; border: 3px dashed #cfd8ea; border-radius: 16px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.i-drop.hot { border-color: var(--blue); background: var(--soft); }
.i-drop b { display: block; color: #0f1116; font-size: 18px; margin: 10px 0 4px; }
.i-file { position: absolute; width: 190px; height: 230px; left: 0; top: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 60px -18px rgba(11,22,48,.4), 0 0 0 1px rgba(15,17,22,.06); padding: 18px; z-index: 5; }
.i-file .h { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; }
.i-file .h i { width: 30px; height: 30px; border-radius: 8px; background: #e8f7ee; color: var(--green); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
.i-file .r { height: 9px; border-radius: 5px; background: #eceff4; margin-top: 10px; }
.i-scan { position: absolute; inset: 14px; background: #fff; border-radius: 12px; padding: 18px 22px; text-align: left; opacity: 0; }
.i-scan .tt { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; } .i-scan .tt em { font-style: normal; color: var(--blue); }
.i-row { display: flex; align-items: center; height: 40px; border-bottom: 1px solid #f0f2f6; font-size: 15px; } .i-row span:first-child { flex: 1; }
.i-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.i-sum div { border-radius: 14px; padding: 18px; text-align: center; opacity: 0; }
.i-sum b { display: block; font-size: 34px; font-weight: 800; } .i-sum small { font-size: 13px; font-weight: 600; }

/* 2 · write with AI */
.w-grid { display: grid; grid-template-columns: 1fr 330px; gap: 26px; }
.w-ai { border-radius: 16px; padding: 18px 20px; background: linear-gradient(120deg, #eef4ff, #f6f0ff); border: 1px solid #dbe6ff; }
.w-ai .lab { font-size: 13px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 8px; }
.w-prompt { margin-top: 10px; height: 52px; border-radius: 12px; background: #fff; border: 1px solid #dbe6ff; display: flex; align-items: center; padding: 0 16px; font-size: 16px; }
.fcaret { display: inline-block; width: 2px; height: 20px; background: var(--blue); margin-left: 2px; animation: blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
.w-gen { margin-left: auto; height: 38px; padding: 0 18px; border-radius: 99px; background: var(--grad); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.w-subj { margin-top: 18px; } .w-subj .lab2 { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.w-opt { display: flex; align-items: center; gap: 10px; height: 46px; border-radius: 12px; border: 1px solid var(--line); padding: 0 14px; margin-bottom: 8px; font-weight: 600; opacity: 0; background: #fff; }
.w-opt .pct { margin-left: auto; font-size: 12px; color: var(--green); font-weight: 700; }
.w-opt.pick { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,107,255,.15); }
.w-body { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; height: 300px; font-size: 16px; line-height: 1.7; color: #2a2f3a; }
.ftagm { color: var(--blue); background: var(--soft); border-radius: 6px; padding: 1px 6px; font-weight: 600; }
.fphone { position: relative; height: 640px; border-radius: 44px; background: #0f1116; padding: 14px; box-shadow: 0 30px 60px -20px rgba(11,22,48,.4); }
.fphone .scr { height: 100%; border-radius: 32px; background: #fff; padding: 46px 18px 18px; overflow: hidden; }
.fphone .mail { border-bottom: 1px solid #f0f2f6; padding: 12px 4px; font-size: 13px; }
.fphone .mail b { display: block; font-size: 14px; } .fphone .mail span { color: var(--muted); }
.fphone .mail.new { background: #f3f8ff; border-radius: 10px; padding: 12px 10px; }

/* 3 · send */
.s-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.s-top .hw-card { padding: 20px 22px; } .s-top small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); } .s-top b { display: block; font-size: 32px; font-weight: 800; margin-top: 6px; }
.s-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; margin-top: 18px; }
.s-bars { display: flex; align-items: flex-end; gap: 12px; height: 280px; margin-top: 18px; position: relative; padding-top: 10px; }
.s-bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.s-bars .bar { width: 100%; border-radius: 8px 8px 4px 4px; background: var(--grad); height: 0; }
.s-bars .col span { font-size: 12px; color: var(--muted); }
.s-cap { position: absolute; left: 0; right: 0; top: 46px; border-top: 2px dashed #f2a20c; }
.s-cap em { position: absolute; right: 0; top: -26px; font-style: normal; font-size: 12px; font-weight: 700; color: #b97300; background: #fff4e0; padding: 3px 8px; border-radius: 99px; }
.s-check { display: flex; align-items: center; gap: 12px; height: 52px; border-bottom: 1px solid #f0f2f6; font-weight: 600; opacity: 0; }
.s-check .ok { width: 28px; height: 28px; border-radius: 50%; background: #e8f7ee; color: var(--green); display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.s-check .fchip { margin-left: auto; }
.s-prog { height: 10px; border-radius: 6px; background: #eef0f4; overflow: hidden; margin-top: 16px; } .s-prog i { display: block; height: 100%; width: 0; background: var(--grad); }

/* 4 · grow */
.g-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.g-top .hw-card { padding: 20px 22px; } .g-top small { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); } .g-top b { display: block; font-size: 34px; font-weight: 800; margin-top: 6px; }
.g-grid { display: grid; grid-template-columns: 300px 1fr 1fr; gap: 18px; margin-top: 18px; }
.g-donut { position: relative; width: 200px; height: 200px; margin: 10px auto 0; }
.g-donut b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; }
.g-line { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-weight: 600; font-size: 14px; }
.g-line .tr { flex: 1; height: 10px; border-radius: 6px; background: #eef0f4; overflow: hidden; } .g-line .tr i { display: block; height: 100%; width: 0; border-radius: 6px; }
.g-line em { font-style: normal; width: 44px; text-align: right; color: var(--muted); }
.g-feed .f { display: flex; align-items: center; gap: 12px; height: 62px; border-bottom: 1px solid #f0f2f6; opacity: 0; }
.g-feed .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.g-feed b { display: block; font-size: 14px; } .g-feed span { color: var(--muted); font-size: 13px; } .g-feed .fchip { margin-left: auto; }


/* Home page "How it works": the flows sit inside the frame under its bar; site.js switches .on. */
.how .screens .frame { overflow: hidden; }
.how .screens .fv .shot { top: 0; left: 0; right: 0; bottom: 0; }

/* The app's sidebar, as on app.devlo.co.uk (built by source/sidebar.py). */
.hw-side { position: relative; width: 250px; flex: 0 0 auto; background: #161a22; padding: 22px 0 0; color: rgba(255,255,255,.7); font-size: 14px; }
.hw-side > img { height: 44px; margin: 0 0 22px 24px; display: block; }
.hw-side svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .75; }
.hw-nav { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 24px; font-weight: 500; }
.hw-nav.top { background: rgba(255,255,255,.06); color: #fff; font-weight: 700; }
.hw-grp { position: relative; height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 24px; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.62); }
.hw-grp i { margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; }
.hw-grp.open { background: rgba(31,107,255,.14); color: #6fa8ff; }
.hw-grp.open i { transform: rotate(180deg); }
.hw-subs { position: relative; padding: 6px 0 6px 38px; }
.hw-subs::before { content: ''; position: absolute; left: 33px; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,.12); }
.hw-sub { height: 36px; display: flex; align-items: center; gap: 12px; padding-left: 14px; font-size: 13.5px; color: rgba(255,255,255,.66); }
.hw-sub svg { width: 14px; height: 14px; opacity: .55; }
.hw-sub.on { color: #6fa8ff; font-weight: 700; }
.hw-sub.on svg { opacity: 1; }
.hw-foot { position: absolute; left: 0; right: 0; bottom: 18px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.hw-nav.out { color: #ff6b6b; }