/* GENERATED by blog-src/build.mjs from lp/lp.css (@blog-offer ranges) — edit lp.css, not this file */
:root {
  --bg: #FFFFFF; --card: #fff; --ink: #211C15; --ink2: #5D5546; --ink3: #6F6758;
  --line: #E3DAC7; --soft: #FAF6EE; --acc: #F17730; --acc2: #9A3412; --acc-bg: #FDEEE2;
  --ok: #2F7A48; --ok-bg: #E8F3EA; --warn-bg: #FFF4E0;
  --grad: linear-gradient(135deg, oklch(76% 0.14 62), oklch(70% 0.17 47) 50%, oklch(63% 0.17 36));
  --r: 10px; --shadow: 0 12px 32px rgba(33, 28, 21, .06);
  --wash: rgba(241, 119, 48, .07); --grad-btn: linear-gradient(135deg, oklch(72% 0.16 52), oklch(65% 0.17 38));
}
body.has-lpx { overflow-x: clip; }
.lpx { margin: 56px calc(50% - 50vw) 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.lpx *, .bk-ov * { margin: 0; padding: 0; }
.lpx ul { list-style: none; }
.lpx .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lpx .sec { padding: 36px 0; }
.lpx .gt { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lpx .btn, .bk .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: 14px 28px; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; color: var(--ink);
}
.lpx .btn svg { width: 16px; height: 16px; }
.lpx .btn-g { font-size: 14px; background: transparent; border-color: var(--ink); }
.lpx .btn-g:hover { background: rgba(33, 28, 21, .06); color: var(--ink); }
.lpx .btn-sm { padding: 9px 16px; }
.bk .btn-p { background: var(--grad-btn); }
.bk .btn-p:hover { background: linear-gradient(135deg, oklch(70% 0.17 47), oklch(63% 0.18 38)); color: var(--ink); }
.lpx .hp-btn-a:hover { color: var(--ink); }
.lpx .hp-btn-d:hover { color: #fff; }
/* pricing + FAQ — the homepage's Pricing() / FAQ() 1:1 (app/components.jsx,
   pricing CSS in index.html). Its own grey #746C5E, not --ink3, on purpose. */
.hp-sec [hidden] { display: none !important; }
.hp-box { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.hp-h2 { font-size: clamp(30px, 3.5vw, 46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-align: center; }
.hp-pricing { max-width: 1080px; }
.hp-pricing .hp-h2 { margin-bottom: 30px; }
.hp-cap { padding: 20px 30px; margin: 0 auto 26px; max-width: 520px; }
.hp-cap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hp-cap-top .lbl { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink2); line-height: 1.3; }
.hp-cap-top .val { font-size: 26px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; line-height: 1.2; }
.hp-cap-top .u { font-size: 15px; font-weight: 600; color: #746C5E; margin-left: 6px; }
.cap-wrap { --cap-thumb: 16px; max-width: 440px; margin: 0 auto; }
.cap-marks { position: relative; height: 15px; margin-top: 9px; font-size: 12px; font-weight: 600; color: #746C5E; line-height: 1.2; }
.cap-marks span { position: absolute; white-space: nowrap; transform: translateX(-50%); left: calc(var(--cap-thumb) / 2 + var(--t, 0) * (100% - var(--cap-thumb))); }
.cap-slider {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #211C15 0%, #211C15 var(--pct, 30%), #E0D7C3 var(--pct, 30%), #E0D7C3 100%);
}
.cap-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #211C15; border: none; cursor: pointer; transition: transform .15s; }
.cap-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.cap-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: none; background: #211C15; cursor: pointer; }
.cap-slider::-moz-range-track { height: 3px; background: transparent; }
.hp-bill { display: flex; justify-content: center; margin-bottom: 26px; }
.bill-toggle { display: inline-flex; border: 1px solid #D9D0BC; background: #fff; border-radius: 8px; overflow: hidden; }
.bill-opt {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 11px 22px; border: none; border-radius: 0; background: transparent; color: var(--ink2); transition: background .15s, color .15s;
}
.bill-opt:hover { color: var(--ink); }
.bill-active, .bill-opt.bill-active:hover { background: #F17730; color: var(--ink); }
.bill-badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; background: #fff; color: #F17730; }
.bill-opt:not(.bill-active) .bill-badge { background: rgba(241, 119, 48, .12); color: #F17730; }
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 auto 26px; max-width: 740px; }
.plan-card { padding: 32px 28px; overflow: hidden; transition: border-color .2s; line-height: 1.3; }
.plan-card.plan-premium { border-color: #211C15; background: rgba(241, 119, 48, .08); }
.pc-name { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: 4px; }
.plan-premium .pc-name { color: #F17730; }
.pc-sub { font-size: 13.5px; color: #746C5E; margin-bottom: 20px; min-height: 38px; }
.pc-price { margin-bottom: 22px; }
.pc-amt { display: flex; align-items: baseline; gap: 6px; }
.pc-amt .v { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.pc-amt .per { font-size: 15px; font-weight: 600; color: #746C5E; }
.pc-note { font-size: 13px; color: #746C5E; margin-top: 8px; min-height: 18px; }
.pc-talk { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.pc-talk + .pc-note { font-size: 13.5px; }
.pc-vat { font-size: 12px; color: #746C5E; margin-top: 4px; }
.hp-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 14px 30px; border-radius: 8px; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s;
}
.hp-btn-a { background: var(--grad-btn); color: var(--ink); }
.hp-btn-a:hover { background: linear-gradient(135deg, oklch(70% 0.17 47), oklch(63% 0.18 38)); }
.hp-btn-d { background: var(--ink); color: #fff; }
.hp-btn-d:hover { background: var(--acc2); }
.plan-card .hp-btn { width: 100%; padding: 13px 20px; margin-bottom: 24px; justify-content: center; }
.plan-card .hp-btn-a { justify-content: space-between; }
.plan-card .hp-btn svg { flex-shrink: 0; }
.pc-ben { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pc-ben li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink2); font-weight: 500; }
.pc-ben li > svg { flex-shrink: 0; margin-top: 2px; color: #2F7A48; }
.plan-premium .pc-ben li > svg { color: #F17730; }
.plan-premium .pc-ben li:first-child { font-weight: 700; }
.info-i {
  width: 15px; height: 15px; padding: 0; margin-left: 5px; vertical-align: middle;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D9D0BC; border-radius: 50%; background: transparent; color: #746C5E;
  font: 700 10px/1 inherit; cursor: help; transition: color .15s, border-color .15s;
}
.info-i:hover, .info-i:focus-visible, .info-i[aria-expanded="true"] { color: #F17730; border-color: #F17730; outline: none; }
.info-pop {
  position: fixed; z-index: 300; padding: 11px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(33, 28, 21, .13);
  color: var(--ink); font-size: 12.5px; font-weight: 500; line-height: 1.5; text-align: left; white-space: normal;
}
.custom-offer { padding: 34px 34px 36px; text-align: center; overflow: hidden; max-width: 740px; margin: 0 auto; }
.co-h { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.co-h h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.co-badge { font-size: 12px; font-weight: 700; color: #F17730; background: rgba(241, 119, 48, .10); padding: 4px 11px; }
.custom-offer p { font-size: 15.5px; color: var(--ink2); margin: 0 auto 26px; line-height: 1.6; max-width: 640px; }
.custom-offer .hp-btn { padding: 14px 34px; }
.hp-faq { max-width: 760px; }
.hp-faq-h { text-align: center; margin-bottom: 44px; }
.hp-faq-h p { margin: 14px auto 0; font-size: 16px; color: var(--ink2); line-height: 1.6; max-width: 520px; }
.hp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.hp-faq-list details { overflow: hidden; }
.hp-faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1.4;
}
.hp-faq-list summary::-webkit-details-marker { display: none; }
.hp-faq-list .pm { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #EFE8D8; color: var(--ink2); transition: background .2s; }
.hp-faq-list .pm svg { transition: transform .25s; }
.hp-faq-list details[open] .pm { background: var(--ink); color: #F6F1E8; }
.hp-faq-list details[open] .pm svg { transform: rotate(45deg); }
.hp-faq-list .a { padding: 0 22px 20px; font-size: 14.5px; color: var(--ink2); line-height: 1.65; }

/* final CTA */
.final { background: var(--wash); color: var(--ink); border: 1px solid #F3D9C4; border-radius: 16px; padding: 56px 40px; text-align: center; position: relative; overflow: hidden; }
.final::before { display: none; }
.final h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 12px; position: relative; }
.final p { color: var(--ink2); font-size: 17px; max-width: 56ch; margin: 0 auto 26px; position: relative; }
.final .actions { justify-content: center; position: relative; }


/* sign-up form in the final CTA — the cabinet's signup / verify panels 1:1
   (app-receptiongo/frontend/styles/shell.css, its own oklch palette). */
.su-card {
  --su-ink: oklch(15% 0.012 55); --su-ink2: oklch(43% 0.018 55); --su-ink3: oklch(62% 0.018 55);
  --su-primary: oklch(70% 0.17 47); --su-deep: oklch(63% 0.18 38); --su-danger: oklch(58% 0.22 25);
  --su-border: oklch(80% 0.02 55 / 0.45);
  text-align: left; position: relative; color: var(--su-ink); font-size: 14px; line-height: 1.5;
}
.su-card [hidden] { display: none !important; }
.su-card p { margin: 0; max-width: none; font-size: inherit; color: inherit; position: static; }   /* undo .final p */
.su-card .auth-form { width: 100%; }
.su-card .auth-title { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 8px; }
.su-card .auth-hint { color: var(--su-ink2); font-size: 13.5px; line-height: 1.55; margin: 0 0 22px; }
.su-card .auth-hint strong { color: var(--su-ink); font-weight: 600; word-break: break-word; }
.su-card .field { margin-bottom: 16px; }
.su-card .field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.su-card .input {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--su-ink);
  border: 1px solid var(--su-border); border-radius: 10px; background: oklch(100% 0 0 / 0.85);
}
.su-card .input:focus { outline: none; border-color: var(--su-primary); box-shadow: 0 0 0 3px oklch(70% 0.17 47 / 0.20); }
.su-card .input-icon-wrap { position: relative; }
.su-card .input-icon-wrap .input { padding-right: 40px; }
.su-card .input-inline-icon {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); z-index: 1;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; color: var(--su-ink2); cursor: pointer; padding: 0;
}
.su-card .input-inline-icon:hover { color: var(--su-ink); background: oklch(0% 0 0 / 0.06); }
.su-card .input-inline-icon svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.su-card .auth-code { letter-spacing: 6px; font-size: 18px; font-weight: 600; text-align: center; }
.su-card .auth-code::placeholder { letter-spacing: 6px; }
.su-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 18px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--su-ink); text-decoration: none;
  background: oklch(100% 0 0 / 0.92); border: 1px solid oklch(78% 0.02 55 / 0.55); border-radius: 100px; transition: all .2s;
  box-shadow: 0 1px 2px oklch(40% 0.05 50 / 0.08), 0 4px 16px oklch(50% 0.12 48 / 0.06), 0 1px 0 oklch(100% 0 0 / 0.9) inset;
}
.su-google:hover { background: #fff; border-color: oklch(72% 0.03 55 / 0.65); transform: translateY(-1px);
  box-shadow: 0 2px 4px oklch(40% 0.05 50 / 0.08), 0 10px 28px oklch(50% 0.12 48 / 0.12), 0 1px 0 oklch(100% 0 0 / 0.9) inset; }
.su-google svg { width: 18px; height: 18px; flex-shrink: 0; }
.su-divider { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; color: var(--su-ink3);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.su-divider::before, .su-divider::after { content: ""; flex: 1; height: 1px; background: oklch(78% 0.02 55 / 0.45); }
.su-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 13px 22px;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  border: none; border-radius: 100px; background: var(--grad-btn); transition: all .2s;
  box-shadow: 0 4px 24px oklch(65% 0.17 40 / 0.40), 0 1px 0 oklch(100% 0 0 / 0.25) inset;
}
.su-btn:hover { box-shadow: 0 10px 40px oklch(65% 0.17 40 / 0.55), 0 2px 8px oklch(70% 0.17 47 / 0.32); transform: translateY(-2px) scale(1.02); }
.su-btn:disabled { opacity: .6; cursor: default; transform: none; }
.su-card .error-msg { color: var(--su-danger); font-size: 13px; margin-top: 10px; min-height: 18px; }
.su-card .auth-legal { margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--su-ink3); text-align: center; }
.su-card .auth-legal a { color: var(--su-ink2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.su-card .auth-legal a:hover { color: var(--su-deep); }
.su-card .auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--su-ink2); }
.su-card .auth-links--switch { padding-top: 20px; border-top: 1px solid oklch(80% 0.02 55 / 0.4); font-size: 13.5px; }
.su-card .auth-links-sep { opacity: .6; }
.su-card .auth-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--su-primary); font-weight: 600; text-decoration: none; }
.su-card .auth-link:hover { text-decoration: underline; }
.su-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px; }


/* final CTA = the cabinet's sign-up screen inside the orange window: the live
   numbers on the left (.auth-visual), heading + form on the right. */
.su-final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; text-align: left; }
.su-head { grid-column: 1 / -1; text-align: center; padding: 48px 40px 0; }
.su-head p { margin-bottom: 0; }
.su-visual { position: relative; display: flex; flex-direction: column; justify-content: center; margin: 24px 0 32px; padding: 40px clamp(28px, 4vw, 56px); border-right: 1px solid #F3D9C4; }
.su-main { padding: 36px clamp(28px, 4vw, 56px) 48px; max-width: 500px; width: 100%; margin: 0 auto; }
.su-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid oklch(80% 0.02 55 / 0.4); font-size: 14px; font-weight: 500; color: oklch(43% 0.018 55); }
.auth-checks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-check { position: absolute; color: var(--acc); opacity: 0; animation: authCheck var(--dur, 3s) ease-in-out forwards; }
.auth-check svg { display: block; width: 100%; height: 100%; }
.auth-check--green { color: oklch(66% 0.16 150); }
@keyframes authCheck {
  0%   { opacity: 0; transform: translateY(8px) scale(.6) rotate(var(--rot, 0deg)); }
  25%  { opacity: var(--op, .3); transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
  70%  { opacity: var(--op, .3); }
  100% { opacity: 0; transform: translateY(-14px) scale(.9) rotate(var(--rot, 0deg)); }
}
.auth-stats { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 400px; margin: 0 auto; }
.auth-stat { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 20px; row-gap: 2px; padding: 26px 0; min-width: 0; }
.auth-stat + .auth-stat { border-top: 1px solid oklch(70% 0.03 55 / 0.3); }
.auth-stat-icon { grid-row: 1 / -1; width: 56px; height: 56px; }
.auth-stat-value { display: flex; align-items: center; gap: 12px; font-size: 38px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: oklch(15% 0.012 55); }
.auth-stat-label { font-size: 15px; font-weight: 600; color: oklch(43% 0.018 55); line-height: 1.3; }
.auth-stars { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.auth-stars svg { width: 24px; height: 24px; flex-shrink: 0; fill: #FFB400; }
.auth-live-dot { width: 14px; height: 14px; margin: 3px; flex-shrink: 0; border-radius: 50%; background: #32C364; box-shadow: 0 0 0 3px rgba(50,195,100,0.22), 0 0 12px rgba(50,195,100,0.6); animation: authPulse 2s ease infinite; }
@keyframes authPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.auth-count-tick { display: inline-block; animation: authRise .45s ease; }
@keyframes authRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .su-final { grid-template-columns: 1fr; }
  .su-visual { display: none; }   /* as in the cabinet: the form alone on a narrow screen */
}

/* ── book-a-call modal ── */
.bk-ov { position: fixed; inset: 0; z-index: 100; background: rgba(33, 28, 21, .55); display: none; align-items: center; justify-content: center; padding: 16px; }
.bk-ov.open { display: flex; }
.bk { background: var(--card); border-radius: 12px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; padding: 28px; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.bk h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; padding-right: 30px; }
.bk .bs { color: var(--ink2); font-size: 14.5px; margin-bottom: 18px; }
.bk .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--soft); font-size: 20px; cursor: pointer; color: var(--ink2); }
.bk label.l { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); margin: 14px 0 7px; }
.bk input { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); outline: none; }
.bk input:focus { border-color: var(--ink); }
.bk input.bad { border-color: var(--acc); }
.bk .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.bk .days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.bk .days button, .bk .slots button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; border-radius: 9px; color: var(--ink); }
.bk .days button { flex: 0 0 auto; width: 62px; padding: 8px 0; text-align: center; font-size: 12px; color: var(--ink3); }
.bk .days button b { display: block; font-size: 17px; color: var(--ink); font-weight: 700; }
.bk .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.bk .slots button { padding: 9px 0; font-size: 13.5px; font-weight: 600; }
.bk .days button[aria-pressed=true], .bk .slots button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk .days button[aria-pressed=true] b { color: #fff; }
.bk .err { color: #C2410C; font-size: 13px; margin-top: 8px; min-height: 0; }
.bk .submit { margin-top: 20px; width: 100%; }
.bk .direct { text-align: center; font-size: 13.5px; color: var(--ink3); margin-top: 16px; }
.bk .direct a { color: var(--ink2); font-weight: 600; text-decoration: none; }
.bk .done { text-align: center; padding: 20px 0 6px; }
.bk .done .ic { width: 60px; height: 60px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 28px; font-weight: 800; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 720px) {
  .lpx .pricing-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lpx .wrap { padding: 0 16px; }
  .lpx .final { padding: 40px 22px; border-radius: 18px; }
  .lpx .su-final { padding: 0; }
  .lpx .su-head { padding: 36px 20px 0; }
  .lpx .su-main { padding: 28px 20px 36px; }
  .lpx .su-card .auth-title { font-size: 24px; }
  .bk { padding: 22px 18px; }
  .bk .slots { grid-template-columns: repeat(4, 1fr); }
  .bk .two { grid-template-columns: 1fr; }
}