/* Login (login.html). Builds on about.css tokens and header. Scoped to .login / .login-page. */
.login{--lg-ink:#151517;--lg-mute:#6E6E73;--lg-line:#ECECEE;--lg-soft:#F6F6F7}
.lg-screen{padding-top:clamp(40px,7vw,112px);padding-bottom:clamp(96px,10vw,150px)}
.lg-screen[hidden]{display:none}
.lg-col{max-width:520px}
.lg-col-wide{max-width:640px}
.login h1{font:900 clamp(56px,7.4vw,112px)/.92 var(--display);letter-spacing:-.045em;color:var(--ink);margin:0 0 0 -.05em;white-space:nowrap;outline:none}
.login .lg-lead{margin-top:clamp(20px,2vw,28px);font:400 clamp(20px,1.7vw,24px)/1.4 var(--body);letter-spacing:-.012em;color:var(--lg-ink);text-wrap:pretty}
.login .lg-num{font-weight:600;white-space:nowrap}
.lg-form{margin-top:clamp(36px,3.4vw,48px);display:flex;flex-direction:column}
.lg-label{display:block;margin-bottom:10px;padding:0;font:600 14px/1.2 var(--body);letter-spacing:.01em;color:var(--lg-ink)}
.lg-tel{display:flex;align-items:center;height:64px;border:1.5px solid #D6D6DA;border-radius:16px;background:#fff;transition:border-color .2s,box-shadow .2s}
.lg-tel:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(11,11,12,.06)}
.lg-tel.is-bad{border-color:var(--pink)}
.lg-cc{padding:0 14px 0 20px;margin-right:14px;border-right:1px solid var(--lg-line);font:500 20px/1 var(--body);color:var(--lg-mute)}
.lg-tel input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:500 22px/1 var(--body);letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums;outline:none;padding-right:16px}
.lg-tel input::placeholder{color:#B4B4B9}
.lg-otp{border:0;margin:0;padding:0;min-width:0}
.lg-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,12px)}
.lg-cell{width:100%;height:clamp(60px,5vw,72px);border:1.5px solid #D6D6DA;border-radius:14px;background:#fff;text-align:center;font:600 clamp(24px,2vw,30px)/1 var(--body);color:var(--ink);font-variant-numeric:tabular-nums;outline:none;caret-color:var(--pink);transition:border-color .2s,box-shadow .2s}
.lg-cell:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(11,11,12,.06)}
.lg-otp.is-bad .lg-cell{border-color:var(--pink)}
.login .lg-err{min-height:1.4em;margin-top:12px;font:500 15px/1.4 var(--body);color:#C2005C}
.login .lg-err:empty{min-height:0;margin-top:0}
.lg-btn{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 32px;border:0;border-radius:999px;background:var(--pink);color:#fff;font:600 19px/1 var(--body);letter-spacing:-.005em;cursor:pointer;transition:background .2s,transform .15s,opacity .2s;text-decoration:none}
.lg-btn:hover{background:var(--pink-press)}
.lg-btn:active{transform:scale(.98)}
.lg-btn[disabled],.lg-btn.is-busy{opacity:.55;pointer-events:none}
.login .lg-note,.login .lg-status{margin-top:28px;font:400 15px/1.5 var(--body);color:var(--lg-mute)}
.login .lg-status:empty{display:none}
.login .lg-note a,.lg-link{color:var(--ink);font:500 15px/1.5 var(--body);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
.lg-link{background:none;border:0;padding:0;cursor:pointer}
.lg-link:hover,.login .lg-note a:hover{color:var(--pink)}
.lg-link[disabled]{color:var(--lg-mute);text-decoration-color:var(--lg-line);cursor:default}
.login .lg-links,.login .lg-foot-links{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.lg-dot{color:#C7C7CC}

/* profile */
.lg-row{margin-top:clamp(28px,3vw,40px);display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;border-top:1px solid var(--lg-line);border-bottom:1px solid var(--lg-line)}
.lg-row-k{font:500 15px/1 var(--body);color:var(--lg-mute)}
.lg-row-v{font:600 18px/1 var(--body);color:var(--ink);font-variant-numeric:tabular-nums}
.lg-plan{margin-top:28px;padding:clamp(28px,2.6vw,36px);border-radius:24px;background:var(--lg-soft)}
.login .lg-plan-k{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--lg-mute)}
.lg-plan[data-state="past_due"] .lg-plan-k{color:#C2005C}
.lg-plan-h{margin-top:12px;font:800 clamp(30px,2.6vw,38px)/1.05 var(--display);letter-spacing:-.035em;color:var(--ink)}
.login .lg-plan-p{margin-top:10px;font:400 17px/1.5 var(--body);color:var(--lg-ink)}
.lg-plan-btn[hidden]{display:none}
.lg-manage{margin-top:clamp(40px,4vw,56px)}
.lg-manage[hidden]{display:none}
.lg-manage-h{font:800 22px/1 var(--display);letter-spacing:-.025em;color:var(--ink);margin-bottom:12px}
.lg-list{list-style:none;margin:0;padding:0}
.lg-list li{border-top:1px solid var(--lg-line)}
.lg-list li:last-child{border-bottom:1px solid var(--lg-line)}
.lg-list li[hidden]{display:none}
.lg-item{width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 0;background:none;border:0;cursor:pointer;font:500 19px/1.2 var(--body);color:var(--ink);text-align:left;transition:color .2s}
.lg-item:hover{color:var(--pink)}
.lg-item.is-busy{opacity:.5;pointer-events:none}
.lg-ext{width:18px;height:18px;flex:none;color:var(--lg-mute)}
.lg-item:hover .lg-ext{color:var(--pink)}
.login .lg-fine{margin-top:14px;font:400 14px/1.5 var(--body);color:var(--lg-mute)}
.lg-foot-links{padding-top:8px}

@media (min-width:761px) and (orientation:portrait){.lg-col,.lg-col-wide{max-width:600px}}
@media (max-width:760px){
  .lg-screen{padding-top:28px;padding-bottom:56px}
  .login h1{font-size:clamp(44px,13.6vw,64px);line-height:.95;letter-spacing:-.04em;margin-left:-.03em;white-space:normal}
  .login .lg-lead{margin-top:16px;font-size:clamp(18px,5vw,21px)}
  .lg-form{margin-top:32px}
  .lg-tel{height:60px}
  .lg-cells{gap:8px}
  .lg-cell{height:58px;font-size:24px}
  .lg-btn{width:100%;height:60px}
  .lg-plan{padding:24px}
  .lg-plan-h{font-size:clamp(28px,8vw,34px)}
  .lg-item{font-size:18px;padding:20px 0}
}
@media (prefers-reduced-motion:reduce){.lg-btn,.lg-tel,.lg-cell,.lg-item{transition:none}}
.lg-nw{white-space:nowrap}
@media (max-width:760px){.login h1{font-size:clamp(42px,12.6vw,60px)}}

/* ===== v3 (Oct 27, 2026): founder picks. Meter plan card in every state, outline heart panel (desktop),
   wide Meter banner + Manage tiles on desktop Your account. ===== */
.lg-art,.lg3 .lg-d{display:none}
.lg3 .lg-it{display:flex;flex-direction:column;gap:6px}
.lg3 [hidden]{display:none!important}
.lg3 .lg-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:#FFF0F6;color:#C2005C;font:700 13px/1 var(--body);letter-spacing:0;text-transform:none}
.lg3 .lg-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.lg3 .lg-plan[data-state="past_due"] .lg-chip{background:#FFE3EF;color:#A8004F}
.lg3 .lg-plan[data-state="cancelled"] .lg-chip,.lg3 .lg-plan[data-state="none"] .lg-chip,.lg3 .lg-plan[data-state="unknown"] .lg-chip{background:#EDEDF0;color:#3A3A3C}
.lg3 .lg-plan[data-state="cancelled"] .lg-chip::before,.lg3 .lg-plan[data-state="none"] .lg-chip::before,.lg3 .lg-plan[data-state="unknown"] .lg-chip::before{background:#8E8E93}
.lg3 .lg-plan-h{margin-top:16px}
.lg3 .lg-m{margin-top:22px}
.lg3 .lg-ml{display:flex;justify-content:space-between;align-items:baseline;font:600 17px/1 var(--body);color:var(--ink)}
.lg3 .lg-ml em{font-style:normal;font-weight:500;color:var(--lg-mute);font-variant-numeric:tabular-nums}
.lg3 .lg-bar{height:10px;border-radius:10px;background:#E6E6EA;margin-top:10px;overflow:hidden}
.lg3 .lg-bar i{display:block;height:100%;border-radius:10px;background:var(--pink);transition:width .6s ease}
.lg3 .lg-plan-p{margin-top:14px;font:400 16px/1.45 var(--body);color:var(--lg-mute)}
.lg3 .lg-plan-h + .lg-plan-p{color:var(--lg-ink);font-size:17px}
.lg3 .lg-kvs{margin-top:20px}
.lg3 .lg-kv{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-top:1px solid #E6E6E9;font:500 16px/1.2 var(--body);color:#3A3A3C}
.lg3 .lg-kv b{font-weight:600;color:var(--ink);text-align:right}
.lg3 .lg-plan-btn{margin-top:24px}
.lg3 .lg-err.is-info{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--lg-soft);color:var(--lg-ink);font-weight:400}

@media (min-width:1024px){
  /* Log in + code: form left, outline heart right */
  .lg3 .lg-screen[data-screen="phone"]:not([hidden]),.lg3 .lg-screen[data-screen="code"]:not([hidden]){display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:clamp(48px,6vw,112px);align-items:stretch;padding-top:24px;padding-bottom:40px}
  .lg3 .lg-screen[data-screen="phone"] .lg-col,.lg3 .lg-screen[data-screen="code"] .lg-col{align-self:center}
  .lg3 .lg-screen[data-screen="code"] h1{white-space:normal;font-size:clamp(56px,6vw,88px)}
  .lg-art{display:flex;height:min(660px,calc(100vh - 230px));min-height:500px}
  .lg-heart{flex:1;position:relative;border-radius:32px;background:#FAF8F9;border:1px solid #F1EDEF;overflow:hidden}
  .lg-hrt{position:absolute;width:820px;height:820px;right:-250px;top:-60px}
  .lg-hrt .o{stroke:var(--pink);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
  .lg-hrt .d{fill:none;stroke:var(--pink);stroke-width:2.2;transition:fill .4s}
  .lg-art.is-code .lg-hrt .d{fill:var(--pink)}
  .login .lg-heart-cap{position:absolute;left:44px;bottom:40px;max-width:16em;font:400 18px/1.45 var(--body);color:#3A3A3C}
  .login .lg-heart-cap span{display:block;margin-bottom:12px;font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}

  /* Your account: full width, wide Meter banner, Manage tiles */
  .lg3 #lg-profile{padding-top:clamp(32px,3.4vw,56px)}
  .lg3 #lg-profile .lg-col-wide{max-width:none}
  .lg3 .lg-row{margin-top:32px;border-top:0;padding:0 0 20px;justify-content:flex-start;gap:16px}
  .lg3 .lg-plan{display:grid;grid-template-columns:minmax(0,1fr);column-gap:72px;align-items:end;margin-top:24px;padding:48px 56px;border-radius:32px}
  .lg3 .lg-plan.has-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lg3 .lg-pm{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .lg3 .lg-meters{align-self:stretch}
  .lg3 .lg-plan-h{font-size:clamp(44px,3.6vw,56px);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
  .lg3 .lg-plan[data-state="active"] .lg-plan-h{font-size:clamp(56px,5vw,80px);letter-spacing:-.05em}
  .lg3 .lg-m{margin-top:24px}
  .lg3 .lg-ml{font-size:18px}
  .lg3 .lg-bar{height:12px}
  .lg3 .lg-kvs{margin-top:0}
  .lg3 .lg-pside .lg-kv:last-child{border-bottom:1px solid #E6E6E9}
  .lg3 .lg-plan-btn{width:100%;margin-top:24px}
  .lg3 .lg-kvs[hidden] + .lg-plan-btn,.lg3 .lg-kvs[hidden] ~ .lg-plan-btn{margin-top:0}
  .lg3 .lg-manage{margin-top:56px}
  .lg3 .lg-manage-h{margin-bottom:20px}
  .lg3 .lg-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .lg3 .lg-list li,.lg3 .lg-list li:last-child{border:1px solid var(--lg-line);border-radius:24px}
  .lg3 .lg-item{padding:28px 28px 30px;align-items:flex-start;min-height:150px}
  .lg3 .lg-d{display:block;font:400 16px/1.4 var(--body);color:var(--lg-mute)}
}
@media (prefers-reduced-motion:reduce){.lg3 .lg-bar i,.lg-hrt .d{transition:none}}
@media (min-width:1024px) and (max-width:1279px){
  /* iPad landscape: narrower panel, so the heart scales with it */
  .lg-heart{container-type:size}
  .lg-hrt{width:156cqw;height:156cqw;right:-48cqw;top:-60px}
  .login .lg-heart-cap{left:32px;bottom:28px;max-width:12em;font-size:16px}
}