/* The Yönetim Paneli and the pages around it (src/components/panel-v3), in the decided look.
   Taken from the design boards' web.css and pnl.css. Every rule holds only inside an element with the
   class "er-p" (the panel's root, and the windows it opens outside of it), so nothing leaks into the
   rest of the site. The brand blue lives in --red (the name is from the first drafts). */
@layer components{
.er-p{
  color-scheme:light;
--paper:#FBFCFF; --band:#EEF1F8; --tile:#F5F7FC;
  --ink:#161A22; --ink-2:rgba(17,24,39,.76); --ink-3:rgba(17,24,39,.66); --ink-4:rgba(17,24,39,.42);
  --line:#E0E5EF; --line-2:#CFD6E3;
  --red:#2560F0; --mark:#E10600; --red-tint:#EEF3FF;
  --ok:#17A865; --ok-ink:#0B6E3F; --ok-bg:#EDFBF3;
  --warn:#EAB308; --warn-ink:#8A5A00; --warn-bg:#FFFAE6;
  --man:#E4570F; --man-ink:#B8440B; --man-bg:#FFF3EA;
  --bad:#D92D20; --bad-ink:#B42318; --bad-bg:#FEF1F0;
  --sans:var(--font-geist,"Geist"),"Helvetica Neue",Arial,system-ui,sans-serif;
  --word:var(--font-outfit,"Outfit"),"Avenir Next","Century Gothic",system-ui,sans-serif;
  --mono:var(--font-plex-mono,"IBM Plex Mono"),ui-monospace,Menlo,monospace;
  --sh-hair:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --sh-card:0 0 0 1px rgba(0,0,0,.05),0 18px 44px -18px rgba(16,24,40,.22);
  --spring:linear(0,.55 7%,.83 11.5%,1.02 16%,1.11 20.5%,1.145 25%,1.12 31%,1.05 39%,1.01 46%,.988 54%,.99 64%,1 82%,1);
}
:where(.er-p),:where(.er-p) *,:where(.er-p) *::before,:where(.er-p) *::after{box-sizing:border-box}
:where(.er-p){font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.er-p) h1,:where(.er-p) h2,:where(.er-p) h3,:where(.er-p) h4,:where(.er-p) p,:where(.er-p) ul,:where(.er-p) ol,:where(.er-p) figure,:where(.er-p) blockquote{margin:0}
:where(.er-p) ul,:where(.er-p) ol{padding:0;list-style:none}
:where(.er-p) a{color:inherit;text-decoration:none}
:where(.er-p) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:where(.er-p) input{font:inherit;color:inherit}
.er-p :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
:where(.er-p) .i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.er-p) .row{display:flex;align-items:center;gap:10px}
:where(.er-p) .col{display:flex;flex-direction:column}
:where(.er-p) .sp{flex:1}
:where(.er-p) .mono{font-family:var(--mono);font-weight:500}
:where(.er-p) .container{width:100%;max-width:1080px;margin-inline:auto;padding-inline:20px}
:where(.er-p) .h1{font-size:46px;line-height:1.08;letter-spacing:-.045em;font-weight:470;text-wrap:balance}
:where(.er-p) .h2{font-size:30px;line-height:1.15;letter-spacing:-.04em;font-weight:480;text-wrap:balance}
:where(.er-p) .h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:600}
:where(.er-p) .lede{font-size:17px;line-height:1.55;color:var(--ink-2)}
:where(.er-p) .cap{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
:where(.er-p) .eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.er-p a.lnk{color:var(--red);font-weight:560}
:where(.er-p) .brand{display:inline-flex;align-items:center;gap:7px;font-family:var(--word);font-weight:600;font-size:21px;letter-spacing:-.015em;color:var(--ink)}
:where(.er-p) .brand svg{width:32px;height:32px;flex:none}
:where(.er-p) .mk-bg{fill:#E10600}
:where(.er-p) .mk-fg{fill:#fff}
:where(.er-p) .kf{width:28px;height:28px;flex:none}
:where(.er-p) .kf-c{fill:#D21F29}
:where(.er-p) .kf-v{fill:#15161B}
:where(.er-p) .kf-e{fill:#fff}
:where(.er-p) .kf.blue .kf-c{fill:#2D6BF0}
:where(.er-p) .kf.green .kf-c{fill:#17A566}
:where(.er-p) .kf.violet .kf-c{fill:#7B57EE}
:where(.er-p) .kf.amber .kf-c{fill:#F0A30A}
:where(.er-p) .ava{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--band);flex:none}
:where(.er-p) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:540;white-space:nowrap}
.er-p .btn-red{background:var(--red);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(24,61,154,.3),0 8px 18px -8px rgba(37,96,240,.6)}
.er-p .btn-ink{background:var(--ink);color:var(--paper)}
.er-p .btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--sh-hair)}
:where(.er-p) .btn-sm{height:38px;padding:0 16px;font-size:14px}
:where(.er-p) .btn-block{width:100%}
:where(.er-p) .btn .i{width:15px;height:15px;stroke-width:2.2}
:where(.er-p) .hdr{height:64px;background:#fff;box-shadow:0 1px 0 var(--line)}
:where(.er-p) .hdr .container{display:flex;align-items:center;gap:24px;height:100%}
:where(.er-p) .nav{display:flex;flex-wrap:wrap;gap:4px;margin-inline:auto}
:where(.er-p) .nav a{padding:8px 12px;border-radius:8px;font-size:15px;color:var(--ink-2)}
.er-p .nav a.on{color:var(--ink);background:rgba(17,24,39,.06);font-weight:540}
:where(.er-p) .foot{padding-block:44px 34px;border-top:1px solid var(--line)}
:where(.er-p) .foot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
:where(.er-p) .foot h4{font-size:14px;font-weight:520;color:var(--ink-3);margin-bottom:12px}
:where(.er-p) .foot li{margin-bottom:9px;font-size:14.5px}
:where(.er-p) .tagl{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--band);font-size:12.5px;font-weight:520;color:var(--ink-2)}
:where(.er-p) .chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:var(--sh-hair);font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.er-p .chip.on{background:var(--ink);color:var(--paper);box-shadow:none}
:where(.er-p) .chip .i{width:14px;height:14px}
:where(.er-p) .cat{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:540;color:var(--ink-2)}
:where(.er-p) .cat .i{width:14px;height:14px;color:var(--spn,var(--red));stroke-width:2}
:where(.er-p) .ref{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;background:var(--band);font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-2)}
:where(.er-p) .vd{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
:where(.er-p) .vd::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor;flex:none}
:where(.er-p) .vd-ok{background:var(--ok-bg);color:var(--ok-ink)}
:where(.er-p) .vd-ok::before{background:var(--ok)}
:where(.er-p) .vd-warn{background:var(--warn-bg);color:var(--warn-ink)}
:where(.er-p) .vd-warn::before{background:var(--warn)}
:where(.er-p) .vd-man{background:var(--man-bg);color:var(--man-ink)}
:where(.er-p) .vd-man::before{background:var(--man)}
:where(.er-p) .vd-bad{background:var(--bad-bg);color:var(--bad-ink)}
:where(.er-p) .vd-bad::before{background:var(--bad)}
:where(.er-p) .talk{display:flex;flex-direction:column;gap:12px}
:where(.er-p) .bub{position:relative;align-self:flex-start;max-width:88%;padding:12px 20px;border-radius:26px;background:#fff;box-shadow:0 10px 34px rgba(16,24,40,.06),0 0 0 1px rgba(0,0,0,.04);font-size:15.5px;line-height:1.5}
:where(.er-p) .bub b{font-weight:600}
:where(.er-p) .bub .tail{position:absolute;left:-2px;bottom:-1px;width:16px;height:13px;fill:#fff}
.er-p .bub.me{align-self:flex-end;background:var(--ink);color:var(--paper);box-shadow:0 10px 34px rgba(16,24,40,.1)}
:where(.er-p) .bub.me .tail{left:auto;right:-2px;fill:var(--ink);transform:scaleX(-1)}
.er-p .bub.err{background:var(--bad-bg);color:var(--bad-ink);box-shadow:none}
:where(.er-p) .bub.err .tail{fill:var(--bad-bg)}
:where(.er-p) .fld{display:flex;align-items:center;gap:6px;height:54px;padding:5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 8px 22px -12px rgba(24,61,154,.2)}
.er-p .fld.on{box-shadow:0 0 0 1.5px var(--red),0 0 0 5px rgba(37,96,240,.12)}
.er-p .fld.bad{box-shadow:0 0 0 1.5px var(--bad),0 0 0 5px rgba(217,45,32,.12)}
:where(.er-p) .fld input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0 6px 0 18px;font-size:16px}
:where(.er-p) .fld input::placeholder{color:var(--ink-4)}
:where(.er-p) .fld .btn{height:44px;padding:0 20px}
:where(.er-p) .fld .eye{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-3)}
:where(.er-p) .lbl{display:block;font-size:14px;font-weight:540;margin-bottom:7px}
:where(.er-p) .hint{font-size:13px;color:var(--ink-3);padding-left:18px}
:where(.er-p) .agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
:where(.er-p) .agree input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--red);flex:none}
:where(.er-p) .agree u{text-decoration-color:var(--line-2);text-underline-offset:3px}
:where(.er-p) .rc{border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 18px 40px -18px rgba(16,24,40,.2);overflow:hidden}
:where(.er-p) .rc-band{display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:15px;font-weight:600}
:where(.er-p) .rc-band .vd{background:#fff}
:where(.er-p) .rc-bad .rc-band{background:var(--bad-bg);color:var(--bad-ink)}
:where(.er-p) .rc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55;color:var(--ink-2)}
:where(.er-p) .rc-body b{color:var(--ink);font-weight:600}
:where(.er-p) .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;color:var(--ink-3)}
:where(.er-p) .kbd{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;background:var(--band);font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
:where(.er-p) .note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:18px;background:var(--band);font-size:16px;line-height:1.55;color:var(--ink-2)}
:where(.er-p) .tbl{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
:where(.er-p) .tbl th{text-align:left;font-size:13px;font-weight:600;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line-2)}
:where(.er-p) .tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
:where(.er-p) .cta{position:relative;border-radius:24px;background:var(--band);padding:28px 30px}
:where(.er-p) .ps{flex:none;width:256px;display:flex;flex-direction:column;gap:3px;padding:22px 14px 16px;background:#161A22;color:#E5E9F1}
.er-p .ps .brand{color:#fff;font-size:20px;padding:0 8px}
:where(.er-p) .ps-sub{padding-left:47px;margin-top:-7px;font-size:12.5px;color:#979DAA}
:where(.er-p) .ps-cap{padding:20px 10px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.4)}
:where(.er-p) .ps-n{display:flex;align-items:center;gap:11px;height:42px;padding:0 10px;border-radius:11px;font-size:15px;color:#A8AEBB}
:where(.er-p) .ps-n .i{width:18px;height:18px}
.er-p .ps-n.on{background:#202632;color:#fff;font-weight:520}
:where(.er-p) .ps-acct{margin-top:10px;padding:12px;border-radius:16px;background:#202632}
:where(.er-p) .ps-meter{height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
:where(.er-p) .ps-meter i{display:block;height:100%;border-radius:2px;background:var(--ok)}
:where(.er-p) .pg{flex:1;min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff 0,var(--paper) 420px)}
:where(.er-p) .pg main{width:100%;max-width:1140px;margin-inline:auto;padding:0 40px 56px}
:where(.er-p) .pg-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 24px;padding-top:20px}
:where(.er-p) .pg-h h1{font-size:34px;line-height:1.1;letter-spacing:-.04em;font-weight:480}
:where(.er-p) .pn-card{background:#fff;border-radius:24px;box-shadow:var(--sh-hair);padding:24px}
:where(.er-p) .pn-cap{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
:where(.er-p) .pn-sec{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:52px 0 18px}
:where(.er-p) .pn-sec h2{font-size:26px;line-height:1.15;letter-spacing:-.035em;font-weight:500}
:where(.er-p) .pn-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--band);color:var(--ink);flex:none}
:where(.er-p) .pn-ic .i{width:22px;height:22px}
:where(.er-p) .pn-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--tile);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
:where(.er-p) .pn-note.warn{background:var(--warn-bg);color:var(--warn-ink)}
:where(.er-p) .pn-note.ok{background:var(--ok-bg);color:var(--ok-ink)}
:where(.er-p) .pn-note.bad{background:var(--bad-bg);color:var(--bad-ink)}
:where(.er-p) .pn-note .i{margin-top:2px}
:where(.er-p) .pn-state{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:600;white-space:nowrap}
:where(.er-p) .pn-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
:where(.er-p) .pn-state.wait{background:var(--warn-bg);color:var(--warn-ink)}
:where(.er-p) .pn-state.wait::before{background:var(--warn)}
:where(.er-p) .pn-state.bad{background:var(--bad-bg);color:var(--bad-ink)}
:where(.er-p) .pn-state.bad::before{background:var(--bad)}
:where(.er-p) .pn-state.off{background:var(--band);color:var(--ink-2)}
:where(.er-p) .pn-state.off::before{background:var(--ink-4)}
:where(.er-p) .pn-plan{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:24px;box-shadow:var(--sh-hair);padding:26px 22px 22px;min-width:0}
:where(.er-p) .pn-plan.cur{box-shadow:0 0 0 1.5px var(--ok),0 18px 40px -22px rgba(23,168,101,.5)}
:where(.er-p) .pn-plan.pop{box-shadow:0 0 0 1.5px var(--ink),var(--sh-card)}
:where(.er-p) .pn-flag{position:absolute;left:22px;top:-13px;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
:where(.er-p) .pn-plan.cur .pn-flag{background:var(--ok)}
:where(.er-p) .pn-name{font-size:14px;color:var(--ink-3)}
:where(.er-p) .pn-ttl{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
:where(.er-p) .pn-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:8px;font-size:30px;line-height:1.1;font-weight:540;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
:where(.er-p) .pn-price small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
:where(.er-p) .pn-price s{font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-4)}
:where(.er-p) .pn-sub{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
:where(.er-p) .pn-li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
:where(.er-p) .pn-li .i{color:var(--ok);stroke-width:2.2;margin-top:3px}
:where(.er-p) .pn-off{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:12px;font-weight:600;white-space:nowrap}
:where(.er-p) .pn-off.ok{background:var(--ok-bg);color:var(--ok-ink)}
:where(.er-p) .pills{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--band)}
:where(.er-p) .pills a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:999px;font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.er-p .pills a.on{background:#fff;color:var(--ink);font-weight:540;box-shadow:var(--sh-hair)}
:where(.er-p) .f{display:block;min-width:0}
:where(.er-p) .f>span{display:block;font-size:13.5px;font-weight:540;margin-bottom:6px}
:where(.er-p) .f>div,:where(.er-p) .f>input{display:flex;align-items:center;gap:8px;width:100%;height:48px;padding:0 14px;border:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);font-size:15.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
:where(.er-p) .f>div.ph{color:var(--ink-4)}
.er-p .f.on>div{box-shadow:0 0 0 1.5px var(--red),0 0 0 5px rgba(37,96,240,.12)}
.er-p .f.bad>div{box-shadow:0 0 0 1.5px var(--bad),0 0 0 5px rgba(217,45,32,.12)}
:where(.er-p) .f small{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.er-p .f.bad small{color:var(--bad-ink)}
:where(.er-p) .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:var(--band)}
:where(.er-p) .seg a{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;font-size:14.5px;color:var(--ink-2)}
.er-p .seg a.on{background:#fff;color:var(--ink);font-weight:540;box-shadow:var(--sh-hair)}
:where(.er-p) .opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);font-size:15px}
.er-p .opt.on{box-shadow:0 0 0 1.5px var(--ink)}
:where(.er-p) .opt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.er-p .opt.on::before{box-shadow:inset 0 0 0 5.5px var(--ink)}
:where(.er-p) .opt b{font-weight:600}
:where(.er-p) .opt em{font-style:normal;font-size:13px;color:var(--ink-3)}
:where(.er-p) .opt .amt{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:500;white-space:nowrap}
:where(.er-p) .sw{flex:none;width:44px;height:26px;border-radius:13px;background:var(--line-2);position:relative}
:where(.er-p) .sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.er-p .sw.on{background:var(--ink)}
:where(.er-p) .sw.on::after{left:21px}
:where(.er-p) .sw.lock{opacity:.55}
:where(.er-p) .pay{position:relative;width:1040px;max-width:calc(100% - 48px);border-radius:28px;background:var(--paper);box-shadow:0 40px 90px -24px rgba(0,0,0,.55);overflow:hidden}
:where(.er-p) .pay-h{display:flex;align-items:center;gap:18px;padding:22px 28px;border-bottom:1px solid var(--line);background:#fff}
:where(.er-p) .pay-h h2{font-size:22px;line-height:1.2;font-weight:540;letter-spacing:-.03em}
:where(.er-p) .steps{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:14px;color:var(--ink-3)}
:where(.er-p) .steps span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
:where(.er-p) .steps span::before{content:attr(data-n);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:12.5px;font-weight:600}
.er-p .steps span.on{color:var(--ink);font-weight:540}
.er-p .steps span.on::before{background:var(--ink);color:#fff;box-shadow:none}
.er-p .steps span.done::before{content:"✓";background:var(--ok);color:#fff;box-shadow:none}
:where(.er-p) .steps i{display:block;width:26px;height:1.5px;background:var(--line-2)}
:where(.er-p) .pay-b{display:grid;grid-template-columns:minmax(0,1fr) 376px}
:where(.er-p) .pay-l{padding:26px 28px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
:where(.er-p) .pay-r{padding:26px 26px 26px;background:var(--tile);border-left:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
:where(.er-p) .sum{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;color:var(--ink-2)}
:where(.er-p) .sum b{font-family:var(--mono);font-weight:500;color:var(--ink);white-space:nowrap}
:where(.er-p) .sum.neg b{color:var(--ok-ink)}
:where(.er-p) .sum.tot{align-items:baseline;padding-top:14px;border-top:1px dashed var(--line-2);font-size:16px;font-weight:600;color:var(--ink)}
:where(.er-p) .sum.tot b{font-family:var(--sans);font-size:28px;font-weight:560;letter-spacing:-.03em}
:where(.er-p) .cardv{position:relative;height:190px;border-radius:20px;padding:20px 22px;background:linear-gradient(135deg,#283142,#161A22);color:#fff;display:flex;flex-direction:column;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
:where(.er-p) .cardv .no{margin-top:auto;font-family:var(--mono);font-size:21px;letter-spacing:.08em}
:where(.er-p) .cardv small{font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.55)}
:where(.er-p) .tagb{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-2)}
:where(.er-p) .ptbl{width:100%;border-collapse:collapse;font-size:14.5px}
:where(.er-p) .ptbl th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:0 16px 12px;white-space:nowrap}
:where(.er-p) .ptbl td{padding:16px;border-top:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
:where(.er-p) .ptbl td b{color:var(--ink);font-weight:560}
:where(.er-p) .ptbl .num{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
:where(.er-p) .stp{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px}
:where(.er-p) .stp>b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
:where(.er-p) .shot{border-radius:14px;background:var(--band);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--ink-4);font-size:13px}
:where(.er-p) .ph-bar{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;background:#fff;box-shadow:0 1px 0 var(--line)}
:where(.er-p) .ph-bar .brand{font-size:18px}
:where(.er-p) .ph-bar .brand svg{width:26px;height:26px}
:where(.er-p) .ph-b{padding:18px 16px 110px;display:flex;flex-direction:column;gap:14px}
:where(.er-p) .ph-cta{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 20px;background:#fff;box-shadow:0 -1px 0 var(--line)}
:where(.er-p) .grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:-8px auto 14px}
:where(.er-p) .scrim{position:absolute;inset:0;background:rgba(17,24,39,.46)}
:where(.er-p) .pn-card{background:#fff;border-radius:24px;box-shadow:var(--sh-hair);padding:24px}
:where(.er-p) .pn-cap{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
:where(.er-p) .pn-big{font-size:40px;line-height:1.05;font-weight:520;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
:where(.er-p) .pn-big small{font-size:16px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
:where(.er-p) .pn-bar{display:flex;height:8px;border-radius:4px;background:var(--band);overflow:hidden}
:where(.er-p) .pn-bar i{display:block;height:100%}
:where(.er-p) .pn-sec{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:56px 0 18px}
:where(.er-p) .pn-sec h2{font-size:26px;line-height:1.15;letter-spacing:-.035em;font-weight:500}
:where(.er-p) .pn-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--band);color:var(--ink);flex:none}
:where(.er-p) .pn-ic .i{width:22px;height:22px}
:where(.er-p) .pn-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--tile);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
:where(.er-p) .pn-note.warn{background:var(--warn-bg);color:var(--warn-ink)}
:where(.er-p) .pn-note .i{margin-top:2px}
:where(.er-p) .pn-state{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:13px;font-weight:600;white-space:nowrap}
:where(.er-p) .pn-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
:where(.er-p) .pn-bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:22px}
:where(.er-p) .pn-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
:where(.er-p) .pn-bars i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:#D8DEE9}
:where(.er-p) .pn-bars .on i{background:var(--ink)}
:where(.er-p) .pn-bars .on{color:var(--ink);font-weight:600}
:where(.er-p) .pn-plan{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border-radius:24px;box-shadow:var(--sh-hair);padding:26px 22px 22px}
:where(.er-p) .pn-plan.cur{box-shadow:0 0 0 1.5px var(--ok),0 18px 40px -22px rgba(23,168,101,.5)}
:where(.er-p) .pn-plan.pop{box-shadow:0 0 0 1.5px var(--ink),var(--sh-card)}
:where(.er-p) .pn-flag{position:absolute;left:22px;top:-13px;display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
:where(.er-p) .pn-plan.cur .pn-flag{background:var(--ok)}
:where(.er-p) .pn-price{font-size:30px;line-height:1.1;font-weight:540;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
:where(.er-p) .pn-price small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
:where(.er-p) .pn-eq{display:grid;grid-template-columns:1fr 1fr;margin:10px 0 6px;border-radius:14px;background:var(--tile);font-size:12.5px;color:var(--ink-3)}
:where(.er-p) .pn-eq span{padding:10px 6px 10px 12px;white-space:nowrap}
:where(.er-p) .pn-eq b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
:where(.er-p) .pn-li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
:where(.er-p) .pn-li .i{color:var(--ok);stroke-width:2.2}
:where(.er-p) .pn-off{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:12px;font-weight:600}

/* ───────── what the boards did not need: real controls, states, the frame on a real screen ───────── */
.er-p.app{display:flex;min-height:100vh;min-height:100dvh;background:var(--paper)}
.er-p .ps{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;scrollbar-width:none;z-index:40}
.er-p .ps-n{width:100%;transition:background-color .15s,color .15s}
.er-p .ps-n:hover{background:rgba(255,255,255,.06);color:#fff}
.er-p .ps-x{display:none}
.er-p .pg{min-height:100vh;min-height:100dvh}
.er-p .pg-foot{margin-top:auto;padding:0 40px 26px;width:100%;max-width:1140px;margin-inline:auto}
.er-p .ph-bar{display:none}
.er-p [id]{scroll-margin-top:24px}

.er-p .btn{cursor:pointer;text-align:center;transition:background-color .15s,box-shadow .15s,opacity .15s,transform .15s}
.er-p .btn-ink:hover{background:#2A303C}
.er-p .btn-ghost:hover{background:var(--tile)}
.er-p .btn-red:hover{filter:brightness(1.07)}
.er-p .btn:active{transform:scale(.985)}
.er-p .btn:disabled,.er-p .btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.er-p .btn-tall{height:52px;font-size:16px}
.er-p .btn-soft{background:var(--band);color:var(--ink-4);cursor:default}
.er-p .btn-ok{background:var(--ok-bg);color:var(--ok-ink);cursor:default}
.er-p .btn-two{height:54px;flex-direction:column;gap:0;line-height:1.2}
.er-p .btn-two small{font-size:12px;font-weight:400;opacity:.85}
.er-p .lnk{color:var(--red);font-weight:560;cursor:pointer}
.er-p .lnk:hover{text-decoration:underline;text-underline-offset:3px}
.er-p .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:er-p-spin .7s linear infinite;flex:none}
.er-p .spin-lg{width:44px;height:44px;border-width:3px;border-color:var(--line);border-top-color:var(--ink)}
@keyframes er-p-spin{to{transform:rotate(360deg)}}

/* grids that fold on narrower screens */
.er-p .g4,.er-p .g3,.er-p .g2{display:grid;gap:16px}
.er-p .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.er-p .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.er-p .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.er-p .pn-eq{display:flex;margin:10px 0 2px;border-radius:14px;background:var(--tile);font-size:12.5px;color:var(--ink-3)}
.er-p .pn-eq span{flex:1;padding:10px 12px}
.er-p .pn-eq b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.er-p .pn-bars .on i{background:var(--ink)}
.er-p .pn-bars .on{color:var(--ink);font-weight:600}
.er-p .pn-bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.er-p .pn-bars i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:#D8DEE9;min-height:3px}

/* pills, segments and choices as real buttons */
.er-p .pills button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;border-radius:999px;font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.er-p .pills button.on,.er-p .pills button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:540;box-shadow:var(--sh-hair)}
.er-p .seg button{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;font-size:14.5px;color:var(--ink-2)}
.er-p .seg button.on,.er-p .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:540;box-shadow:var(--sh-hair)}
.er-p button.opt,.er-p label.opt{width:100%;text-align:left;cursor:pointer}
.er-p .opt[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--ink)}
.er-p .opt[aria-checked="true"]::before{box-shadow:inset 0 0 0 5.5px var(--ink)}
.er-p .opt>div{min-width:0}

/* fields that are typed into */
.er-p .f input,.er-p .f select,.er-p .f textarea{display:block;width:100%;height:48px;padding:0 14px;border:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);font:inherit;font-size:15.5px;color:var(--ink);outline:0;appearance:none;-webkit-appearance:none;transition:box-shadow .15s}
.er-p .f textarea{height:auto;min-height:84px;padding:12px 14px;line-height:1.45;resize:vertical}
.er-p .f select{padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.er-p .f input::placeholder,.er-p .f textarea::placeholder{color:var(--ink-4)}
.er-p .f input:focus,.er-p .f select:focus,.er-p .f textarea:focus{box-shadow:0 0 0 1.5px var(--red),0 0 0 5px rgba(37,96,240,.12)}
.er-p .f.bad input,.er-p .f.bad select,.er-p .f.bad textarea{box-shadow:0 0 0 1.5px var(--bad),0 0 0 5px rgba(217,45,32,.12)}
.er-p .f input:disabled,.er-p .f select:disabled{background:var(--tile);color:var(--ink-3)}
.er-p .f .mono{letter-spacing:.04em}
.er-p .fld:focus-within{box-shadow:0 0 0 1.5px var(--red),0 0 0 5px rgba(37,96,240,.12)}
.er-p .chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.er-p .chk input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.er-p input[type="range"].rng{width:100%;height:22px;appearance:none;-webkit-appearance:none;background:none;cursor:pointer;--fill:50%}
.er-p .rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--band) var(--fill))}
.er-p .rng::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--band) var(--fill))}
.er-p .rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 4px 10px -4px rgba(0,0,0,.4)}
.er-p .rng::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 4px 10px -4px rgba(0,0,0,.4)}

/* a window over the page; on phones a card that rises from the bottom */
.er-p.er-scrim{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(17,24,39,.46);overflow-y:auto;overscroll-behavior:contain;animation:er-p-fade .2s both}
.er-p .er-win{position:relative;width:520px;max-width:100%;margin:auto;border-radius:28px;background:var(--paper);box-shadow:0 40px 90px -24px rgba(0,0,0,.55);animation:er-p-in .5s var(--spring) both}
.er-p .er-win:focus,.er-p .er-win:focus-visible{outline:0}
.er-p .er-win.wide{width:1040px}
.er-p .er-win.mid{width:720px}
.er-p .er-win-h{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);background:#fff;border-radius:28px 28px 0 0}
.er-p .er-win-h h2{font-size:21px;line-height:1.2;font-weight:540;letter-spacing:-.03em}
.er-p .er-win-b{padding:22px 24px 24px}
.er-p .er-x{display:grid;place-items:center;width:40px;height:40px;margin:-6px -8px -6px auto;border-radius:50%;color:var(--ink-3);flex:none}
.er-p .er-x:hover{background:var(--band);color:var(--ink)}
.er-p .er-x .i{width:18px;height:18px}
.er-p .er-grab{display:none}
.er-p.er-scrim.is-out{animation:er-p-fade-out .2s both;pointer-events:none}
.er-p.er-scrim.is-out .er-win{animation:er-p-out .2s cubic-bezier(.4,0,1,1) both}
@keyframes er-p-fade-out{to{opacity:0}}
@keyframes er-p-out{to{opacity:0;transform:translateY(10px) scale(.985)}}
@keyframes er-p-down{to{transform:translateY(100%)}}
@keyframes er-p-fade{from{opacity:0}}
@keyframes er-p-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes er-p-up{from{transform:translateY(100%)}}

@media (max-width:1180px){
  .er-p .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .er-p .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .er-p .pay-b{grid-template-columns:minmax(0,1fr)}
  .er-p .pay-r{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:900px){
  .er-p.app{display:block}
  .er-p .ph-bar{display:flex;position:sticky;top:0;z-index:30}
  .er-p .ph-bar button{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border-radius:50%}
  .er-p .ph-bar .i{width:22px;height:22px}
  .er-p .ps{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);transform:translateX(-102%);transition:transform .3s cubic-bezier(.22,1,.36,1);z-index:70}
  .er-p .ps.open{transform:none}
  .er-p .ps-scrim{position:fixed;inset:0;z-index:65;background:rgba(17,24,39,.46);animation:er-p-fade .2s both}
  .er-p .ps-x{display:grid;place-items:center;position:fixed;right:14px;top:14px;z-index:71;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff}
  .er-p .pg main{padding:0 16px 40px}
  .er-p .pg main>.meta{display:none}
  .er-p .pg-h{padding-top:18px}
  .er-p .pg-h h1{font-size:25px;line-height:1.15;letter-spacing:-.035em;font-weight:520}
  .er-p .pg-foot{padding:0 16px 22px}
  .er-p .pn-sec{margin:36px 0 14px}
  .er-p .pn-sec h2{font-size:21px}
  .er-p .pn-card{padding:18px;border-radius:20px}
  .er-p .g2,.er-p .g3{grid-template-columns:minmax(0,1fr)}
  .er-p .ptbl{display:none}
}
@media (max-width:640px){
  .er-p .g4{grid-template-columns:minmax(0,1fr)}
  /* the card from the bottom: it leaves the top of the page in sight, its top edge is the handle,
     its body scrolls inside it, and it leaves the way it came */
  .er-p.er-scrim{align-items:flex-end;padding:0;overflow:hidden;touch-action:none}
  .er-p .er-win,.er-p .er-win.wide,.er-p .er-win.mid{width:100%;margin:0;max-height:calc(100dvh - 44px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;border-radius:22px 22px 0 0;background:var(--paper);box-shadow:0 -1px 0 rgba(255,255,255,.6) inset,0 -18px 50px -18px rgba(0,0,0,.4);animation:er-p-up .42s cubic-bezier(.22,1,.36,1) both;will-change:transform;touch-action:pan-y}
  .er-p .er-win::after{content:"";position:absolute;left:0;right:0;top:100%;height:60vh;background:var(--paper)}
  .er-p.er-scrim.is-out{animation-duration:.26s}
  .er-p.er-scrim.is-out .er-win{animation:er-p-down .26s cubic-bezier(.4,0,1,1) both}
  .er-p .er-win-h{flex:none;gap:10px;padding:26px 16px 12px;border-radius:22px 22px 0 0;background:var(--paper);border-bottom:1px solid var(--line)}
  .er-p .er-win-h h2{font-size:18px;letter-spacing:-.02em;min-width:0}
  .er-p .er-x{width:36px;height:36px;margin:-4px -4px -4px auto;background:var(--band);color:var(--ink-2)}
  .er-p .er-x .i{width:16px;height:16px;stroke-width:2.2}
  .er-p .er-win-b{padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;min-height:0;-webkit-overflow-scrolling:touch}
  .er-p .er-grab{display:block;position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-2);z-index:2}
  .er-p .steps span{font-size:0;gap:0}
  .er-p .steps{gap:6px}
  .er-p .pay-l,.er-p .pay-r{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .er-p *,.er-p *::before,.er-p *::after{animation:none!important;transition:none!important}
}
}