/* smm.guide — auth.css
   Loaded by the pages auth-2fa, auth-forgot, auth-login, auth-register, auth-reset, auth-verify, business-start — after core.css (src/css-bundles.js says which page loads which file).
   What only the pages of this area use. A rule other areas need too belongs in core.css.
   Split out of main.css on 27.09.2026: rules keep their old order within each file. */

.acc-type{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.acc-card{position:relative;display:block;border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 15px;cursor:pointer;transition:all .25s var(--ease);background:#fff}
.acc-card:hover{border-color:rgba(10,138,95,.4);transform:translateY(-2px);box-shadow:var(--sh-m)}
.acc-card.on{border-color:var(--em);background:linear-gradient(180deg,#f4faf7,#fff);box-shadow:0 0 0 3px rgba(16,176,119,.12)}
.acc-card .ic{width:38px;height:38px;border-radius:11px;background:var(--em-soft);color:var(--em-ink);display:grid;place-items:center;margin-bottom:10px}
.acc-card .ic svg{width:19px;height:19px}
.acc-card.on .ic{background:linear-gradient(150deg,#13b47a,#0a8a5f);color:#fff}
.acc-card b{font-size:14px;display:block}
.acc-card>span:not(.chk):not(.ic){font-size:11.5px;color:var(--ink3);line-height:1.4;display:block;margin-top:3px}
.acc-card .chk{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.acc-card.on .chk{background:var(--em);border-color:var(--em)}
.acc-card .chk svg{width:9px;height:9px;color:#fff;opacity:0}
.acc-card.on .chk svg{opacity:1}
.auth-alt{margin-top:22px;text-align:center;font-size:13.5px;color:var(--ink3)}
.auth-alt b{color:var(--em-ink);font-weight:650}
.auth-alt a{display:inline-block;padding:6px 2px}
/* the other way in (sign in / create an account) is a real button for a thumb */
/* a label with a link on its right ("Password" · "Forgot it?") */
.field-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* a comfortable target for a thumb: the padding makes the tap area ~27px tall without moving the text */
.field-link{font-size:12.5px;font-weight:600;color:var(--em-ink);margin-bottom:3px;padding:4px 0}
.field-link:hover{color:var(--em-dark)}
.auth-note{font-size:13px;line-height:1.5;color:var(--ink3);margin:-6px 0 18px}
.auth-hero{position:relative;background:radial-gradient(120% 140% at 75% 10%,#15211c,#0c1210 60%);color:#fff;display:flex;align-items:center;justify-content:center;padding:56px 40px;overflow:hidden}
.auth-hero .grid-bg{position:absolute;inset:0;opacity:.7;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(ellipse 90% 90% at 40% 30%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 90% 90% at 40% 30%,#000 30%,transparent 78%)}
.auth-hero .glow{position:absolute;bottom:-260px;right:-140px;width:760px;height:600px;background:radial-gradient(closest-side,rgba(18,196,132,.3),transparent 70%)}
.auth-hero-in{position:relative;max-width:430px}
.auth-hero .duck-frame{width:190px;height:190px;border-radius:32px;background:#fff;display:grid;place-items:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);margin-bottom:30px;overflow:hidden}
.auth-hero .duck-frame img{width:92%}
.auth-hero h2{font-size:29px;letter-spacing:-.026em;margin-bottom:14px;color:#fff}
.auth-hero p{color:rgba(255,255,255,.62);font-size:15px;line-height:1.6}
.auth-hero .pts{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.auth-hero .pt{display:flex;gap:11px;font-size:14px;color:rgba(255,255,255,.85);align-items:flex-start}
.auth-hero .pt i{width:19px;height:19px;border-radius:6px;background:rgba(46,207,143,.16);border:1px solid rgba(46,207,143,.35);display:grid;place-items:center;flex:none;margin-top:1px;font-style:normal}
.auth-hero .pt i svg{width:10px;height:10px;color:#2ecf8f}
@media (max-width:1040px){
.auth-hero{display:none}
}
@media (max-width:640px){
.acc-type{grid-template-columns:1fr}
}
/* code entry screen */
.auth-ic.tg{background:linear-gradient(150deg,#3aa8e4,#1c7bbd)}
.code-form{margin-top:18px}
.code-input{width:100%;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:30px;font-weight:700;letter-spacing:.34em;padding:14px 10px 14px 20px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--bg3);margin-bottom:12px}
.code-input:focus{outline:2px solid var(--em-soft2);border-color:var(--em);background:#fff}
.auth-alt{font-size:12.5px;color:var(--ink3);margin-top:14px}
.auth-alt a{color:var(--em-ink);font-weight:600}
@media (max-width:640px){
.code-input{font-size:25px;letter-spacing:.24em}
}
/* the 2FA step: a centered card — the template shipped before its styles did */
.auth-wrap{min-height:calc(100vh - 260px);display:flex;align-items:center;justify-content:center;padding:56px 20px}
.auth-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--line2);border-radius:20px;
  box-shadow:var(--sh-m,0 10px 30px -12px rgba(16,22,19,.18));padding:38px 34px;text-align:center}
.auth-ic{width:54px;height:54px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--em-soft);color:var(--em-ink);margin-bottom:14px}
.auth-ic svg{width:26px;height:26px}
.auth-ic.tg{background:#e7f3fb;color:#2f9bd8}
.auth-card h1{font-size:24px;letter-spacing:-.02em;margin-bottom:8px}
.auth-lead{color:var(--ink2);font-size:14px;line-height:1.6;margin-bottom:16px}
.code-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.code-input{width:100%;text-align:center;font-size:28px;letter-spacing:12px;text-indent:12px;font-weight:700;
  padding:13px 8px;border:1.5px solid var(--line);border-radius:13px;background:var(--bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.code-input:focus{outline:none;border-color:var(--em-ink);box-shadow:0 0 0 3px var(--em-soft);background:#fff}
.auth-card .auth-alt{margin-top:18px;line-height:1.55}
@media (max-width:480px){
.auth-card{padding:30px 22px}
.code-input{font-size:24px;letter-spacing:9px;text-indent:9px}
}
.auth-ic.app{background:var(--em-soft);color:var(--em-dark)}
.auth-alt-form{margin:14px 0 0}
.auth-alt-btn{border:0;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--em-ink);
  cursor:pointer;text-decoration:underline;padding:0}
.auth-alt-btn:hover{color:var(--em-dark)}
/* ---------- "what do you run?" (/business/start/): the one door for every business ---------- */
.bstart-wrap{position:relative;overflow:hidden}
.bstart-glow{position:absolute;left:0;right:0;top:-160px;height:560px;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 0%,rgba(16,176,119,.13),transparent 72%)}
.bstart{position:relative;max-width:920px;margin:0 auto;padding-top:56px;padding-bottom:72px;text-align:center}
.bstart-eyebrow{display:inline-block;font-size:11.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--em-ink);
  background:var(--em-soft);border:1px solid var(--em-soft2);padding:5px 12px;border-radius:var(--pill);margin-bottom:16px}
.bstart h1{font-size:40px;letter-spacing:-.035em;line-height:1.08;margin-bottom:12px}
.bstart-lead{color:var(--ink2);font-size:16px;line-height:1.6;max-width:600px;margin:0 auto 30px}
.bstart-note{max-width:600px;margin:0 auto 22px;text-align:left}
.bstart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left}
.bstart-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 26px 26px;border-radius:var(--r-lg);color:inherit;
  background:linear-gradient(180deg,#fff,#fbfdfc);border:1px solid var(--line2);box-shadow:var(--sh-m);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.bstart-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--em2),var(--em))}
a.bstart-card:hover{transform:translateY(-4px);box-shadow:var(--sh-l);border-color:rgba(10,138,95,.28)}
.bstart-art{position:absolute;top:16px;right:16px;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(16,22,19,.14))}
.bstart-tag{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--em-ink);
  background:var(--em-soft);padding:4px 10px;border-radius:var(--pill)}
.bstart-t{display:block;font-size:20px;letter-spacing:-.02em;margin-top:6px;padding-right:100px}
.bstart-d{display:block;font-size:14px;line-height:1.55;color:var(--ink2);padding-right:48px}
.bstart-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-right:100px}
.bstart-count{font-size:12.5px;color:var(--ink3);white-space:nowrap}
.bstart-count b{color:var(--ink);font-weight:750}
.bstart-list{display:flex;flex-direction:column;gap:9px;margin:14px 0 22px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.bstart-list>span{display:flex;align-items:flex-start;gap:8px}
.bstart-list svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--em)}
.bstart-go{align-self:flex-start;margin-top:auto}
/* the card's button sits at its foot, level with the other card's */
.bstart-go svg{transition:transform .3s var(--ease)}
a.bstart-card:hover .bstart-go svg{transform:translateX(3px)}
.bstart-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bstart-cat{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--pill);font-size:13px;font-weight:650;color:var(--ink);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-s);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.bstart-cat:hover{border-color:var(--em);color:var(--em-ink);transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(10,138,95,.35)}
.bstart-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:28px 0 0;padding:0;list-style:none;font-size:13.5px;font-weight:600;color:var(--ink2)}
.bstart-perks li{display:inline-flex;align-items:center;gap:7px}
.bstart-perks svg{width:16px;height:16px;color:var(--em)}
.bstart-foot{margin-top:16px;font-size:13.5px;color:var(--ink3)}
.bstart-foot a{color:var(--em-ink);font-weight:650}
@media (max-width:900px){
/* two cards side by side need ~900px: below that each takes the full row, the counts stay beside their tags */
.bstart-grid{grid-template-columns:1fr;gap:16px;max-width:620px;margin:0 auto}
}
@media (max-width:760px){
.bstart{padding-top:32px;padding-bottom:48px}
.bstart h1{font-size:30px}
.bstart-lead{font-size:15px;margin-bottom:22px}
.bstart-grid{gap:14px}
.bstart-card{padding:22px 20px 20px}
.bstart-art{top:14px;right:12px;width:72px;height:72px}
.bstart-t{font-size:18px;padding-right:76px}
.bstart-top{padding-right:78px}
.bstart-d{padding-right:0}
.bstart-perks{flex-direction:column;align-items:flex-start;max-width:320px;margin-left:auto;margin-right:auto}
}