/* Calm, tactile surfaces shared by checkout, renewal and setup. Existing brand tokens win. */
:root{--flow-ink:var(--ink,#15271e);--flow-muted:var(--ink-2,#526459);--flow-bg:var(--surface,#fff);
--flow-soft:var(--surface-2,#f3f7f3);--flow-line:var(--line,#dfe7df);--flow-accent:#13743d}
.flow-backdrop{position:fixed;inset:0;z-index:100001;background:rgba(12,24,18,.55);backdrop-filter:blur(8px);
 display:grid;place-items:center;padding:24px;overscroll-behavior:contain}
.flow-backdrop[hidden],.flow-hidden{display:none!important}
.flow-panel{position:relative;background:var(--flow-bg);color:var(--flow-ink);border:1px solid var(--flow-line);
 border-radius:30px;max-width:460px;width:100%;max-height:88dvh;overflow:auto;padding:30px;
 box-shadow:0 32px 100px rgba(0,0,0,.2);font-family:inherit;animation:flow-enter .24s ease-out}
.flow-close{position:absolute;right:16px;top:16px;width:44px;height:44px;border:0;border-radius:50%;
 background:var(--flow-soft);color:var(--flow-ink);font-size:26px;cursor:pointer;line-height:1}
.flow-eyebrow{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:var(--flow-accent);margin:4px 48px 12px 0}
.flow-title{font-size:28px;line-height:1.12;letter-spacing:-.035em;font-weight:800;margin:0 0 12px}
.flow-description{font-size:15px;line-height:1.5;color:var(--flow-muted);margin:0 0 20px}
.flow-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:21px;margin:10px 0 24px;
 color:var(--flow-accent);background:var(--green-soft,#e6f4e9)}
.flow-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.flow-actions{display:grid;gap:10px;margin-top:20px}
.flow-button{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;border-radius:16px;
 border:1px solid var(--flow-line);padding:12px 16px;background:var(--flow-soft);color:var(--flow-ink);
 line-height:1.3;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none}
.flow-button--primary{background:linear-gradient(110deg,#087c3e,#176ac0);border-color:transparent;color:#fff;
 box-shadow:0 6px 16px rgba(24,122,63,.15)}
.flow-button:disabled{opacity:.55;cursor:wait}
.flow-button:focus-visible,.flow-close:focus-visible,.flow-choice:focus-visible{outline:3px solid #368bfa;
 outline-offset:3px}
.flow-stages{list-style:none;padding:0;margin:24px 0;display:flex;gap:7px}
.flow-stages li{height:4px;flex:1;border-radius:4px;background:var(--flow-line)}
.flow-stages li[data-complete=true]{background:var(--flow-accent)}
.flow-note{font-size:12px;line-height:1.5;color:var(--flow-muted);margin:16px 0 0}
.flow-error{color:var(--danger,#b33434);font-size:14px;line-height:1.4;margin:12px 0}
.flow-strip{position:fixed;z-index:99999;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
 transform:translateX(-50%);width:min(440px,calc(100% - 32px));display:flex;align-items:center;gap:14px;
 background:var(--flow-bg);border:1px solid var(--flow-line);border-radius:22px;padding:16px 18px;
 box-shadow:0 12px 50px rgba(0,0,0,.17);color:var(--flow-ink);font-family:inherit;text-align:left;cursor:pointer}
.flow-strip[hidden]{display:none}
.flow-strip strong{display:block;font-size:14px;line-height:1.3}
.flow-strip small{display:block;font-size:12px;line-height:1.4;color:var(--flow-muted);margin-top:3px}
.flow-dot{width:12px;height:12px;flex-shrink:0;border-radius:50%;background:var(--flow-accent);
 box-shadow:0 0 0 7px var(--green-soft,#e6f4e9);animation:flow-pulse 2s ease-in-out infinite}
.flow-strip-active{padding-bottom:105px!important}
.flow-card{background:var(--flow-bg);border:1px solid var(--flow-line);border-radius:24px;padding:22px;
 margin:18px 0;color:var(--flow-ink)}
.flow-card .flow-title{font-size:23px}
.flow-card .flow-description{font-size:14px}
.flow-card-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.flow-card-top .flow-icon{width:42px;height:42px;border-radius:14px;margin:0;flex-shrink:0}
.flow-card-top .flow-icon svg{width:23px;height:23px}
.flow-inline-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.flow-inline-actions .flow-button{flex:1;min-width:125px}
.flow-choice{display:block;width:100%;padding:17px;margin:10px 0;text-align:left;border:1px solid var(--flow-line);
 border-radius:18px;background:var(--flow-soft);color:var(--flow-ink);font-family:inherit;cursor:pointer}
.flow-choice strong{display:block;font-size:16px;line-height:1.3}
.flow-choice span{display:block;font-size:13px;line-height:1.5;color:var(--flow-muted);margin-top:5px}
.flow-choice[aria-pressed=true]{border-color:var(--flow-accent);box-shadow:inset 0 0 0 1px var(--flow-accent)}
.flow-quote{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:18px;
 border-radius:16px;background:var(--green-soft,#e6f4e9);margin-top:16px}
.flow-quote strong{font-size:28px;letter-spacing:-.04em}
.flow-quote span{font-size:13px;color:var(--flow-muted)}
#setupActivation .flow-description{margin-bottom:8px}
#stepsContainer .step-done{display:none}
#buyDevicesSection .bd-card{border-radius:24px}
@keyframes flow-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes flow-pulse{50%{opacity:.5}}
@media(max-width:550px){.flow-backdrop{padding:12px;align-items:end}
 .flow-panel{padding:26px 22px calc(24px + env(safe-area-inset-bottom));max-height:90dvh;border-radius:28px}
 .flow-title{font-size:26px}.flow-card{padding:19px}}
@media(prefers-color-scheme:dark){:root{--flow-ink:var(--ink,#eef6f0);--flow-muted:var(--ink-2,#b3c2b7);
 --flow-bg:var(--surface,#17251c);--flow-soft:var(--surface-2,#213328);--flow-line:var(--line,#34493b)}}
@media(prefers-reduced-motion:reduce){.flow-panel,.flow-dot{animation:none!important}}

.flow-button[hidden]{display:none}

.setup-installed{margin-top:10px;font-size:13px;background:transparent}
.flow-text-button{border:0;background:transparent;color:var(--flow-accent);font:inherit;font-size:13px;
 font-weight:700;text-decoration:underline;text-underline-offset:4px;padding:16px 0 0;cursor:pointer;min-height:44px}
.app-tab{font-family:inherit;font-size:inherit;text-align:left}
.app-tab:focus-visible,.flow-text-button:focus-visible{outline:3px solid #368bfa;outline-offset:3px}

.flow-panel,.flow-card{--flow-muted:#526056}
@media(prefers-color-scheme:dark){.flow-panel,.flow-card,.flow-strip{
 --flow-ink:#eef6f0;--flow-muted:#b8c8bd;--flow-bg:#17251c;--flow-soft:#213328;--flow-line:#34493b;
 --green-soft:#213d2d;--flow-accent:#64d98b}}
.setup-step-help{display:block;padding:12px 0 0;margin:0 auto;border:0;background:transparent;min-height:44px;
 color:var(--flow-accent);font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.setup-resume{margin-bottom:14px;text-align:left;font-size:13px}


#stepsContainer .step-btn{background:linear-gradient(110deg,#087c3e,#176ac0);color:#fff}
#stepsContainer .app-tab.active .tab-name{color:#13713b}