/* THE SIGN-UP PAGE'S LOOK (GitHub #3816; the page is src/ownsignin.js signInPage with `signup` true, its script signin/page.js). Served at /sign-in/assets/signup.css, linked AFTER the page's one hashed inline style, so
   these rules read over it. Every rule is under `body.su`: the sign-in page does not carry the class and is as it was. The palette is black and blue and lives in the ONE tokens file (studio/app/home/tokens.css, the `--su-*` group): the page links that file first, and this one reads the names and writes no colour. The font is self-hosted (the page's policy allows
   font-src 'self' and no other font host). The palette is the tokens at the top of `body.su`; the white and black shades and glows laid over the photos keep their literal values, as in the design they were ported from. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("/sign-in/assets/plus-jakarta-sans-latin.woff2") format("woff2")}

body.su{
  color-scheme:light;
  --su-radius:14px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:16px; line-height:1.5;
  background:radial-gradient(900px 520px at 85% 0%,var(--su-glow-1) 0%,transparent 62%),radial-gradient(700px 420px at 0% 100%,var(--su-glow-1) 0%,transparent 60%),var(--su-bg);
  color:var(--su-ink); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px;
  -webkit-font-smoothing:antialiased;
}
body.su *{box-sizing:border-box}
body.su .su-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the card: form on the left, the picture on the right ---------- */
body.su main.shell{
  width:100%; max-width:1180px; margin:0 auto; background:var(--su-card); border-radius:28px;
  display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); box-shadow:var(--su-shadow-shell); overflow:hidden;
}

/* ---------- form ---------- */
body.su .form-side{padding:36px 40px 28px}
body.su .top{display:flex;justify-content:space-between;align-items:center;margin:0 0 30px;max-width:none;padding:0}
body.su .brand{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:-.2px;text-decoration:none;color:inherit}
body.su .brand-mark{position:relative;display:block;width:36px;height:36px;border-radius:10px;flex:none;box-shadow:var(--su-shadow-logo)}
body.su .brand-mark img{position:absolute;inset:0;width:100%;height:100%;border-radius:10px;display:block}
body.su .brand b{font-weight:800}
body.su .brand em{font-style:normal;font-weight:500;color:var(--su-muted)}
body.su .login-link{font-size:14px;color:var(--su-muted)}
body.su .login-link a{color:var(--su-accent);font-weight:600;text-decoration:none}
body.su .login-link a:hover{text-decoration:underline}

body.su h1{font-size:clamp(28px,3.4vw,34px);font-weight:800;letter-spacing:-.8px;line-height:1.1;margin:0;text-align:left}
body.su h1 span{color:var(--su-accent)}
body.su .sub{color:var(--su-muted);margin:8px 0 0;font-size:15px;line-height:1.5;text-align:left}

body.su .trial{margin:20px 0;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--su-radius);background:var(--su-accent-soft);font-size:14px;line-height:1.45;color:var(--su-trial-ink);text-align:left}
body.su .trial .ic{flex:none;width:32px;height:32px;border-radius:10px;background:var(--su-card);display:grid;place-items:center;box-shadow:var(--su-shadow-gift);color:var(--su-accent)}
body.su .trial b{color:var(--su-ink)}

body.su .section-label{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--su-muted);font-weight:700;margin:0 0 8px;display:block}
body.su .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
body.su .plan{position:relative;display:block;padding:0;border:0;background:none;box-shadow:none}
body.su .plan input{position:absolute;opacity:0;pointer-events:none}
body.su .plan label{display:block;cursor:pointer;text-align:center;padding:10px 4px;margin:0;border-radius:12px;border:1.5px solid var(--su-line);background:var(--su-card);transition:.18s}
body.su .plan label:hover{border-color:var(--su-hover-line)}
body.su .plan .pn{display:block;font-size:12.5px;color:var(--su-muted);font-weight:500}
body.su .plan .pp{display:block;font-size:18px;font-weight:800;margin-top:2px}
body.su .plan input:checked + label{border-color:var(--su-accent);background:var(--su-plan-on);box-shadow:var(--su-shadow-accent)}
body.su .plan input:checked + label .pp{color:var(--su-accent)}
body.su .plan input:focus-visible + label{outline:2px solid var(--su-sky);outline-offset:2px}
body.su .plan-detail{margin:10px 0 0;min-height:40px;font-size:13.5px;line-height:1.45;color:var(--su-muted);text-align:left}

/* the steps (choose, sent, confirm email, code, terms, phone) sit straight in the column: the card of the sign-in page is only a holder here */
body.su .card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:16px 0 0;max-width:none}
body.su .card p{margin:.5rem 0;text-align:left}
body.su .mut{color:var(--su-muted)}
body.su .err{color:var(--su-err)}
body.su a{color:var(--su-accent)}
body.su .field{position:relative;margin:0 0 10px}
body.su .field svg.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--su-placeholder);pointer-events:none}
body.su .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.su input[type=email],body.su input[type=tel],body.su input[type=text],body.su select{
  width:100%;height:48px;border-radius:12px;border:1.5px solid var(--su-line);background:var(--su-field);font:inherit;font-size:15px;color:var(--su-ink);padding:0 14px;outline:none;transition:.18s;margin:0}
body.su .field input{padding-left:42px}
body.su input::placeholder{color:var(--su-placeholder)}
body.su input[type=email]:hover,body.su input[type=tel]:hover,body.su input[type=text]:hover{border-color:var(--su-line)}
body.su input[type=email]:focus,body.su input[type=tel]:focus,body.su input[type=text]:focus,body.su select:focus{border-color:var(--su-accent);background:var(--su-card);box-shadow:var(--su-ring)}
body.su label.lbl{display:block;margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--su-muted)}
body.su label{margin:.75rem 0}

/* the mobile number: the page's own dial box (a hidden select over a shown code), drawn like the reference's code box and field */
body.su .phone-field{position:relative;display:flex;align-items:stretch;height:48px;border:1.5px solid var(--su-line);border-radius:12px;background:var(--su-field);margin:0 0 10px;transition:.18s}
body.su .phone-field:focus-within{outline:0;border-color:var(--su-accent);background:var(--su-card);box-shadow:var(--su-ring)}
body.su .phone-field .dial{flex:0 0 96px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-right:1.5px solid var(--su-line);font-size:15px;color:var(--su-ink)}
body.su .phone-field .dial::after{content:"\25BE";color:var(--su-muted);font-size:.8em}
body.su .phone-field select{position:absolute;left:0;top:0;width:96px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;border:0}
body.su .phone-field input[type=tel]{flex:1;min-width:0;height:100%;border:0;border-radius:0 12px 12px 0;background:transparent;box-shadow:none;padding:0 14px}
body.su .phone-field input[type=tel]:focus{box-shadow:none;background:transparent}

body.su details.code{margin:4px 0 14px}
body.su details.code summary{list-style:none;cursor:pointer;font-size:14px;color:var(--su-muted);display:inline-flex;align-items:center;gap:8px;font-weight:500}
body.su details.code summary::-webkit-details-marker{display:none}
body.su details.code summary:hover{color:var(--su-ink)}
body.su details.code summary:focus-visible{outline:2px solid var(--su-sky);outline-offset:3px;border-radius:6px}
body.su details.code .plus{width:20px;height:20px;border-radius:6px;background:var(--su-accent-soft);color:var(--su-accent);display:grid;place-items:center;font-weight:700;transition:.2s}
body.su details.code[open] .plus{transform:rotate(45deg)}
body.su details.code .field{margin-top:10px}
body.su details.code .field input{padding-left:42px}

body.su .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin:.5rem 0;padding:0 16px;border:0;border-radius:14px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:700;color:var(--su-on-accent);background:linear-gradient(90deg,var(--su-accent),var(--su-accent-2));
  box-shadow:var(--su-shadow-btn);transition:transform .15s,filter .2s}
body.su .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
body.su .btn:focus-visible{outline:2px solid var(--su-sky);outline-offset:3px}
body.su .btn[disabled]{opacity:.5;cursor:default;transform:none;filter:none}
body.su .btn svg{transition:transform .2s}
body.su .btn:hover svg{transform:translateX(3px)}
body.su .btn.ghost{height:50px;font-size:15px;font-weight:600;color:var(--su-ink);background:var(--su-card);border:1.5px solid var(--su-line);box-shadow:none}
body.su .btn.ghost:hover{border-color:var(--su-line);background:var(--su-field);filter:none;transform:none}
body.su .btn.ghost svg{transition:none}
body.su .btn.ghost:hover svg{transform:none}
body.su .help{font-size:12.5px;color:var(--su-muted);line-height:1.5;margin:10px 0 0;text-align:center}
body.su .card p.help{text-align:center}
body.su .divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--su-placeholder);font-size:13px}
body.su .divider::before,body.su .divider::after{content:"";flex:1;height:1px;background:var(--su-line)}
body.su hr{border:0;border-top:1px solid var(--su-line);margin:1rem 0}

body.su [data-section="staging-signin"]{margin-top:16px;padding:12px;border-radius:12px;border:1.5px dashed var(--su-note-line);background:var(--su-note-bg)}
body.su [data-section="staging-signin"] p{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--su-note-ink)}
body.su [data-section="staging-signin"] a{color:var(--su-note-link);font-weight:700}
body.su [data-section="staging-signin"] .btn{height:44px;font-size:14px}
body.su .card hr + [data-section="staging-signin"]{margin-top:0}

/* ---------- the picture (decoration only: aria-hidden in the page) ---------- */
body.su .visual{
  position:relative;background:linear-gradient(160deg,var(--su-visual-1) 0%,var(--su-visual-2) 100%);
  padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:30px;overflow:hidden}
body.su .visual::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-170px;bottom:-210px;background:var(--su-visual-glow)}
body.su .hero{position:relative}
body.su .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--su-accent);background:var(--su-card);padding:6px 12px;border-radius:999px;box-shadow:var(--su-shadow-chip)}
body.su .hero h2{font-size:clamp(28px,3vw,38px);font-weight:800;letter-spacing:-1px;line-height:1.08;margin:14px 0 0;max-width:520px;color:var(--su-on-dark)}
body.su .hero h2 span{color:var(--su-accent-lite)}
body.su .hero p{color:var(--su-on-dark-muted);margin:10px 0 0;font-size:15px;max-width:440px;line-height:1.5}

body.su .comp{position:relative;height:470px}
body.su .glow{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
body.su .glow.g1{width:320px;height:320px;left:-40px;bottom:10px;background:var(--su-glow-a)}
body.su .glow.g2{width:240px;height:240px;right:30px;top:-20px;background:var(--su-glow-b)}
body.su .ring{position:absolute;left:-10px;top:150px;width:260px;height:260px;border-radius:50%;border:18px solid var(--su-ring-line)}
body.su .pcard{position:absolute;border-radius:28px;overflow:hidden;background:var(--su-photo-bg);box-shadow:var(--su-shadow-photo)}
body.su .pcard img{width:100%;height:100%;object-fit:cover;display:block}
body.su .pcard.left{left:4%;top:70px;width:34%;height:330px;transform:rotate(-4deg);border-radius:120px 120px 28px 28px}
body.su .pcard.right{right:2%;top:70px;width:34%;height:330px;transform:rotate(4deg)}
body.su .pcard.center{left:50%;top:0;width:44%;height:440px;transform:translateX(-50%);z-index:2;border:5px solid var(--su-card);box-shadow:var(--su-shadow-photo-main)}
body.su .pcard .shade{position:absolute;inset:auto 0 0 0;height:45%;background:var(--su-shade)}

body.su .badge{position:absolute;display:inline-flex;align-items:center;gap:6px;background:var(--su-badge-bg);backdrop-filter:blur(8px);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--su-ink);box-shadow:var(--su-shadow-badge)}
body.su .left .badge{left:14px;bottom:16px}
body.su .rec{right:14px;top:14px;background:var(--su-rec-bg);color:var(--su-white)}
body.su .rec i{width:8px;height:8px;border-radius:50%;background:var(--su-rec-dot);animation:su-blink 1.2s steps(1) infinite}
@keyframes su-blink{50%{opacity:0}}
body.su .right .style{right:14px;bottom:16px}

body.su .center .caption{position:absolute;left:14px;right:14px;bottom:62px;color:var(--su-white);font-weight:700;font-size:15px;line-height:1.3;text-shadow:var(--su-text-shadow)}
body.su .center .caption small{display:block;font-weight:500;font-size:12px;opacity:.85;margin-top:2px}
body.su .center .vbar{position:absolute;left:14px;right:14px;bottom:18px}
body.su .bar{position:relative;height:4px;border-radius:4px;background:var(--su-bar-track)}
body.su .bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--su-accent);animation:su-progress 9s linear infinite}
body.su .bar .dot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--su-white);transform:translate(-50%,-50%)}
body.su .bar .dot.d25{left:25%}
body.su .bar .dot.d50{left:50%}
body.su .bar .dot.d75{left:75%}
body.su .float.chip svg.violet{color:var(--su-sky)}
body.su .bar .head{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--su-accent);border:2px solid var(--su-white);transform:translate(-50%,-50%);animation:su-head 9s linear infinite}
body.su .tip{position:absolute;bottom:12px;transform:translateX(-50%);background:var(--su-white);color:var(--su-ink);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;animation:su-head 9s linear infinite}
@keyframes su-progress{from{width:0}to{width:100%}}
@keyframes su-head{from{left:0}to{left:100%}}

body.su .float{position:absolute;z-index:3;background:var(--su-card);border-radius:14px;box-shadow:var(--su-shadow-float);animation:su-bob 4s ease-in-out infinite}
@keyframes su-bob{50%{transform:translateY(-6px)}}
body.su .float.chip{right:-6px;top:18px;display:flex;align-items:center;gap:8px;padding:9px 14px;font-weight:700;font-size:13px}
body.su .float.gen{left:-14px;top:24px;width:210px;padding:12px;font-size:12.5px;animation-delay:-2s}
body.su .float.gen .t{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:8px}
body.su .float.gen .t img{width:20px;height:20px;border-radius:6px}
body.su .float.gen .s{color:var(--su-prompt-ink);line-height:1.4;min-height:36px;background:var(--su-field);border:1px solid var(--su-line);border-radius:8px;padding:7px 8px}
body.su .caret{display:inline-block;width:1.5px;height:12px;background:var(--su-sky);vertical-align:-2px;margin-left:1px;animation:su-blink 1s steps(1) infinite}
body.su .float.gen .go{margin-top:8px;height:32px;border-radius:8px;color:var(--su-white);font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(90deg,var(--su-sky),var(--su-indigo) 60%,var(--su-accent))}

body.su .stats{display:flex;gap:10px;flex-wrap:wrap}
body.su .stat{flex:1;min-width:120px;background:var(--su-glass);border:1px solid var(--su-glass-line);backdrop-filter:blur(6px);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--su-on-dark-muted);box-shadow:var(--su-shadow-stat)}
body.su .stat b{display:block;color:var(--su-on-dark);font-size:20px;font-weight:800}

body.su .foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 40px 20px;font-size:12.5px;color:var(--su-muted);border-top:1px solid var(--su-line)}
body.su .foot a{color:var(--su-muted);text-decoration:none}
body.su .foot a:hover{color:var(--su-accent)}
body.su .foot a:focus-visible{outline:2px solid var(--su-sky);outline-offset:3px;border-radius:4px}
body.su .foot nav{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- one screen on a desktop: the page is drawn to the height of the window, so the whole form (the footer too) is in view without scrolling ----------
   Above 960 px wide the vertical sizes follow the window's height. `--su-d` is three quarters of how far the window is above 730 px (so the design is reached at about 1090 px, the height the whole page needs); each size below is its floor at 730 px, grows with `--su-d`, and stops at the
   size of the design (the value the rules above give it). So at a tall window the page is as designed, and on a laptop it is the same page drawn closer: nothing is hidden. Under about 700 px
   tall the floors meet and the page scrolls as any page does. A phone is not touched (the 960 px rules below). */
@media (min-width:961px){
  body.su{
    --su-d:calc((100dvh - 730px) * .75);
    --su-gap-s:clamp(4px,calc(4px + var(--su-d) * .022),10px);       /* between a label and what it labels */
    --su-gap-m:clamp(6px,calc(6px + var(--su-d) * .037),16px);       /* between two blocks of the form */
    --su-gap-l:clamp(8px,calc(8px + var(--su-d) * .081),30px);       /* between the head, the heading and the form */
    --su-h-field:clamp(36px,calc(36px + var(--su-d) * .044),48px);     /* the height of a field */
    --su-h-press:clamp(40px,calc(40px + var(--su-d) * .044),52px);     /* the height of a button */
    min-height:100dvh;padding:clamp(8px,calc(8px + var(--su-d) * .089),32px) 16px}
  body.su .form-side{padding:clamp(12px,calc(12px + var(--su-d) * .089),36px) 40px clamp(8px,calc(8px + var(--su-d) * .074),28px)}
  body.su .top{margin-bottom:var(--su-gap-l)}
  body.su .brand-mark{width:clamp(30px,calc(30px + var(--su-d) * .022),36px);height:clamp(30px,calc(30px + var(--su-d) * .022),36px)}
  body.su h1{font-size:clamp(26px,calc(26px + var(--su-d) * .03),34px)}
  body.su .sub{margin-top:clamp(2px,calc(2px + var(--su-d) * .022),8px);font-size:clamp(13.5px,calc(13.5px + var(--su-d) * .0056),15px);line-height:1.4}
  body.su .trial{margin:var(--su-gap-m) 0;padding:clamp(6px,calc(6px + var(--su-d) * .022),12px) 14px;font-size:clamp(12.5px,calc(12.5px + var(--su-d) * .0056),14px);line-height:1.4}
  body.su .trial .ic{width:clamp(28px,calc(28px + var(--su-d) * .015),32px);height:clamp(28px,calc(28px + var(--su-d) * .015),32px)}
  body.su .section-label{margin-bottom:var(--su-gap-s)}
  body.su .plan label{padding:clamp(6px,calc(6px + var(--su-d) * .015),10px) 4px}
  body.su .plan .pp{font-size:clamp(16px,calc(16px + var(--su-d) * .0074),18px);margin-top:0}
  body.su .plan-detail{margin-top:var(--su-gap-s);min-height:clamp(34px,calc(34px + var(--su-d) * .022),40px);font-size:clamp(12.5px,calc(12.5px + var(--su-d) * .0037),13.5px);line-height:1.4}
  body.su .card{margin-top:var(--su-gap-m)}
  body.su .card p{margin:var(--su-gap-s) 0}
  body.su .card p.err{font-size:13.5px;line-height:1.35;margin:var(--su-gap-s) 0 0}
  body.su .field,body.su .phone-field{margin-bottom:var(--su-gap-m)}
  body.su input[type=email],body.su input[type=tel],body.su input[type=text],body.su select,body.su .phone-field{height:var(--su-h-field)}
  body.su .phone-field input[type=tel]{height:100%}
  body.su details.code{margin:0 0 var(--su-gap-m)}
  body.su .btn{height:var(--su-h-press);margin:var(--su-gap-s) 0}
  body.su .btn.ghost{height:calc(var(--su-h-press) - 2px)}
  body.su .help,body.su .card p.help{margin:var(--su-gap-s) 0 0;font-size:clamp(12px,calc(12px + var(--su-d) * .0019),12.5px);line-height:1.4}
  body.su .divider{margin:var(--su-gap-m) 0 var(--su-gap-s)}
  /* the staging-only test sign-in (never in production) stays at the foot of the form, as one compact block: its note over a row of the address and the button. Its height comes out of the rest of
     the form, so a page that carries it is drawn as if the window were 110 px shorter (`--su-d` below), and the page still fits. */
  body.su:has([data-section="staging-signin"]){--su-d:calc((100dvh - 840px) * .75)}
  body.su [data-section="staging-signin"]{margin-top:var(--su-gap-m);padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-items:center}
  body.su [data-section="staging-signin"] p{grid-column:1/-1;margin:0;font-size:11.5px;line-height:1.35}
  body.su [data-section="staging-signin"] input{margin:0;height:34px}
  body.su [data-section="staging-signin"] .btn{width:auto;margin:0;padding:0 16px;height:34px;font-size:13.5px}
  body.su .foot{padding:clamp(6px,calc(6px + var(--su-d) * .037),16px) 40px clamp(6px,calc(6px + var(--su-d) * .052),20px)}

  /* the picture is drawn to the same height: its composition is a share of the box, which is as tall as the window allows */
  body.su .visual{padding:clamp(16px,calc(16px + var(--su-d) * .1),44px) 40px;gap:clamp(8px,calc(8px + var(--su-d) * .081),30px)}
  body.su .hero h2{margin-top:var(--su-gap-m);font-size:clamp(24px,min(3vw,calc(24px + var(--su-d) * .052)),38px)}
  body.su .hero p{margin-top:var(--su-gap-s)}
  body.su .comp{height:clamp(230px,calc(100dvh - 480px),470px)}
  body.su .pcard.left,body.su .pcard.right{top:15%;height:70%}
  body.su .pcard.center{height:94%}
  body.su .stat{padding:clamp(8px,calc(8px + var(--su-d) * .015),12px) 14px}
  body.su .stat b{font-size:clamp(17px,calc(17px + var(--su-d) * .011),20px)}
}
@media (min-width:961px) and (max-height:780px){
  body.su .stats{display:none}
}
/* a short window (a small laptop with its browser bars): the same page, a little closer still */
@media (min-width:961px) and (max-height:700px){
  body.su{padding-top:6px;padding-bottom:6px}
  body.su .form-side{padding-top:10px;padding-bottom:6px}
  body.su .top{margin-bottom:6px}
  body.su .brand-mark{width:28px;height:28px}
  body.su h1{font-size:24px}
  body.su .sub{font-size:13px;line-height:1.3;margin-top:2px}
  body.su .trial{margin:6px 0;padding:5px 12px;font-size:12.5px;line-height:1.3}
  body.su .trial .ic{width:26px;height:26px}
  body.su .section-label{font-size:11px;margin-bottom:3px}
  body.su .plan label{padding:5px 4px}
  body.su .plan .pn{font-size:12px;line-height:1.3}
  body.su .plan .pp{font-size:15px;line-height:1.25}
  body.su .plan-detail{margin-top:3px;min-height:32px;font-size:12px;line-height:1.3}
  body.su .card{margin-top:4px}
  body.su .field,body.su .phone-field{margin-bottom:5px}
  body.su input[type=email],body.su input[type=tel],body.su input[type=text],body.su select,body.su .phone-field{height:34px}
  body.su details.code{margin-bottom:4px}
  body.su .btn{height:38px;margin:3px 0;font-size:15px}
  body.su .btn.ghost{height:36px;font-size:14px}
  body.su .help,body.su .card p.help{font-size:11.5px;line-height:1.3;margin-top:3px}
  body.su .divider{margin:5px 0 3px}
  body.su .foot{padding:5px 40px 6px;font-size:12px}
}

@media (max-width:960px){
  body.su{padding:0;align-items:stretch}
  body.su main.shell{grid-template-columns:1fr;border-radius:0}
  body.su .visual{order:-1;padding:28px 16px 24px;gap:22px}
  body.su .stats,body.su .hero p{display:none}
  body.su .form-side{padding:28px 16px}
  body.su .foot{padding:14px 16px 24px}
  body.su .comp{height:330px}
  body.su .pcard.left,body.su .pcard.right{height:230px;top:50px}
  body.su .pcard.center{height:310px;width:48%}
  body.su .float.gen{display:none}
  body.su .float.chip{top:6px;right:0;padding:7px 11px;font-size:12px}
  body.su .center .caption{font-size:13px;bottom:54px}
  body.su .center .caption small{display:none}
  body.su .badge{font-size:11px;padding:5px 9px}
}
@media (max-width:440px){
  body.su .plans{grid-template-columns:repeat(2,1fr)}
  body.su .grid2{grid-template-columns:1fr;gap:0}
  body.su .pcard.left .badge{display:none}
}
@media (prefers-reduced-motion:reduce){body.su *{animation:none!important;transition:none!important}}