/* MeshEase account - brand 9.7 C. The account is a quiet tool: one strong element (the plan card), plain lists
   with hairlines elsewhere, a heading and one sentence per section. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/account/assets/manrope-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/account/assets/manrope-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/account/assets/instrument-serif-italic-400-latin.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/account/assets/dm-mono-normal-500-latin.woff2) format("woff2")}
:root{--ink:#1F2231;--ink-2:#555A6E;--cobalt:#1F5AD8;--paper:#fff;--mist:#F6F4FF;--line:rgba(31,34,49,.12);--line-2:rgba(31,34,49,.22);
--ok:#16794a;--ok-bg:#E6F4EC;--warn:#8a4b00;--warn-bg:#FFF1DC;--bad:#b3261e;--off-bg:#EEEDF3;
--acc:linear-gradient(95deg,#252ACF 0%,#6748EF 30%,#9E0BC5 58%,#DD35BE 80%,#E23A6A 100%);
--wave-bar:linear-gradient(90deg,#252ACF 0%,#6748EF 28%,#DD35BE 58%,#F6803D 82%,#FBC448 100%);
--ground:radial-gradient(40% 52% at 80% 20%,rgba(132,92,255,.13),transparent 72%),radial-gradient(34% 46% at 58% 98%,rgba(255,150,70,.13),transparent 72%),radial-gradient(44% 60% at 0% 0%,rgba(110,155,255,.11),transparent 70%),linear-gradient(125deg,#F6F4FF 0%,#FBFAFF 42%,#FFF5F2 100%);
--glass:rgba(255,255,255,.9);--f-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--f-serif:"Instrument Serif","Playfair Display",Georgia,serif;--f-mono:"DM Mono","IBM Plex Mono",ui-monospace,Consolas,monospace;
--r:22px;--shadow:0 1px 0 rgba(31,34,49,.04),0 24px 48px -32px rgba(31,34,49,.35);--gutter:clamp(16px,5vw,64px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--mist);scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden;background:var(--ground);
color:var(--ink);font:400 16px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wave-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wave{position:absolute;top:-150px;right:-330px;width:980px;max-width:none;height:auto;pointer-events:none;user-select:none}
.top,main,.foot{position:relative;z-index:1}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--gutter)}
.brand img{display:block;height:44px;width:auto}
a{color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:.18em}a:hover{text-decoration-thickness:2px}
main{flex:1;width:100%;margin:0 auto;padding:16px 16px 56px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,40px);margin-bottom:10px}
h2{font-size:22px;margin-bottom:6px}
h3{font-size:16px;letter-spacing:-.01em;margin:22px 0 4px}
.acc{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.14em;line-height:.8;
background-image:var(--acc);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
p{margin:0 0 12px}.muted{color:var(--ink-2)}.small{font-size:14px}
.lead{color:var(--ink-2);margin-bottom:6px;max-width:60ch}

/* panels: the sign-in pages and the plug-in / checkout pages */
/* no backdrop blur on the large surfaces: a long page of blurred panels repaints slowly on phones */
.panel{position:relative;max-width:480px;margin:8px auto 0;background:var(--glass);border-radius:var(--r);padding:34px 32px 28px;
box-shadow:var(--shadow);overflow:hidden}
.panel.wide{max-width:640px}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--wave-bar)}

/* forms */
label{display:block;font-weight:700;margin:16px 0 6px;font-size:15px}
.field{position:relative}
input[type=email],input[type=password],input[type=text]{width:100%;font:inherit;padding:13px 16px;border:0;border-radius:14px;background:#fff;
box-shadow:inset 0 0 0 1.5px var(--line-2)}
input:focus{box-shadow:inset 0 0 0 2px var(--cobalt);outline:none}
.field input{padding-right:84px}
.reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;margin:0;padding:0 12px;font-size:14px;
background:transparent;color:var(--cobalt);box-shadow:none}
.reveal:hover{background:var(--mist);transform:translateY(-50%)}
.hint{font-size:14px;color:var(--ink-2);margin:6px 0 0}
.code-in{display:block;font-family:var(--f-mono);font-size:24px;letter-spacing:.3em;max-width:240px}
.between{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.between label{margin-bottom:6px}
.switch{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--ink-2)}
.linkish{background:none;box-shadow:none;color:var(--cobalt);padding:0;min-height:0;margin:0;font:600 15px/1.4 var(--f-sans);
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.linkish:hover{background:none;transform:none;text-decoration-thickness:2px}

/* buttons */
button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;margin-top:18px;border:0;
border-radius:999px;font:700 16px/1 var(--f-sans);letter-spacing:-.005em;cursor:pointer;background:var(--ink);color:#fff;
box-shadow:0 14px 28px -18px rgba(31,34,49,.9);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
button:hover{transform:translateY(-1px);background:#2B2F44}
button.ghost{background:rgba(255,255,255,.75);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
button.ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(31,34,49,.38)}
button.sm{min-height:40px;padding:0 16px;margin:0;font-size:14px}
button:disabled{opacity:.5;cursor:default;transform:none}
.danger-btn{background:var(--bad)}.danger-btn:hover{background:#8f1d17}
.back{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;
color:var(--ink);text-decoration:none;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.back:hover{background:#fff}
.top-end{display:flex;align-items:center;gap:10px;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang select{appearance:none;-webkit-appearance:none;min-height:40px;max-width:180px;padding:0 34px 0 16px;margin:0;border:0;border-radius:999px;
font:700 14px/1 var(--f-sans);color:var(--ink);cursor:pointer;background-color:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1.5px var(--line-2);
background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.lang select:hover{background-color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.msg{min-height:1.5em;margin:12px 0 0}.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.choice{display:flex;gap:12px;align-items:flex-start;margin:14px 0;font-weight:600}.choice input{width:20px;height:20px;margin-top:3px;flex:none}
.renew{margin:12px 0;color:var(--ink-2);font-size:15px}.renew p{margin-bottom:8px}.renew p:first-child{font-weight:600;color:var(--ink)}
.trial-terms{margin:14px 0}
/* the promo code on the checkout page: a quiet link that opens the field */
.promo{margin:14px 0 6px}
.promo summary{display:flex;align-items:center;min-height:44px;color:var(--cobalt);font-weight:600;cursor:pointer;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:.18em}
.promo summary:hover{text-decoration-thickness:2px}
.promo summary:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.promo label{margin-top:8px}
.promo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.promo-row input{flex:1 1 180px;width:auto;min-width:0}
.promo-row button{margin-top:0;min-height:44px}
#promo-actions:empty{display:none}

/* the account: a menu on the left, the sections on the right */
.dash{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
.side{position:sticky;top:20px;padding:6px 0}
.side h1{font-size:30px;margin:4px 0 18px}
.side nav ul{list-style:none;margin:0;padding:0}
.side nav a{display:block;padding:9px 14px;margin:2px 0;border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none}
.side nav a:hover{background:rgba(255,255,255,.7)}
.side nav a[aria-current="true"]{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.who{margin:22px 0 0;padding:16px 14px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.who button{margin-top:10px}
.content{min-width:0}
.sec{background:var(--glass);border-radius:var(--r);padding:28px 30px;margin:0 0 20px;box-shadow:var(--shadow);scroll-margin-top:20px}
.banner{margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-weight:600}
.banner.bad{background:#FBE9E7;color:var(--bad)}

/* the plan card: the one strong element */
.plan{position:relative;margin:16px 0 0;padding:24px 24px 20px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.plan::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--wave-bar)}
.plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.until{margin:10px 0 4px;font-size:clamp(26px,3.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.until small{display:block;font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink-2);margin-bottom:2px}
.status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;background:var(--off-bg);color:var(--ink-2)}
.status.good{background:var(--ok-bg);color:var(--ok)}.status.warn{background:var(--warn-bg);color:var(--warn)}
.keyline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.key{font-family:var(--f-mono);font-size:14px;letter-spacing:.03em;color:var(--ink);overflow-wrap:anywhere}
.others{list-style:none;padding:0;margin:14px 0 0}
.others li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}

/* computers */
.slots{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-weight:700}
.slot-dots{display:flex;gap:6px}
.slot-dots span{width:26px;height:10px;border-radius:999px;background:var(--off-bg);box-shadow:inset 0 0 0 1px var(--line)}
.slot-dots span.on{background:var(--ink);box-shadow:none}
ul.items{list-style:none;padding:0;margin:10px 0 0}
ul.items li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--line)}
.item-main{min-width:0}
.item-title{font-weight:700}
.item-sub{font-size:14px;color:var(--ink-2)}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.inline input{flex:1 1 200px}
.empty{margin:12px 0 0;padding:16px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}

/* payments and security */
.facts{margin:14px 0 0}
.facts>div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:14px 0;border-top:1px solid var(--line)}
.fact-k{font-weight:700;min-width:130px}.fact-v{flex:1;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.subform{width:100%;padding:4px 0 6px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
th,td{text-align:left;padding:9px 6px;border-top:1px solid var(--line)}th{font-weight:700;color:var(--ink-2)}
details.danger{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}summary{cursor:pointer;color:var(--bad);font-weight:700}

.foot{text-align:center;padding:24px var(--gutter) 32px;color:var(--ink-2);font-size:14px}.foot a{color:var(--ink-2)}
.foot .seller{font-size:13px;margin:8px auto 0;max-width:72ch;overflow-wrap:anywhere}
@media (max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr);gap:16px}
  .side{position:static;padding:0}
  .side h1{margin:0 0 10px}
  .side nav ul{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .side nav ul::-webkit-scrollbar{display:none}
  .side nav a{white-space:nowrap;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);margin:0}
  .who{display:none}
}
@media (max-width:640px){
  .wave{top:-90px;right:-260px;width:620px}.brand img{height:38px}
  .top{gap:8px}.back{display:none}.lang select{min-height:44px;max-width:170px}
  .panel{padding:28px 20px 22px}.sec{padding:22px 18px}.plan{padding:20px 18px 16px}
  button.sm,.side nav a{min-height:44px}.side nav a{display:inline-flex;align-items:center}
  td,th{padding:7px 3px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,button:hover{transition:none;transform:none}}