:root {
  --bg: #ffffff;
  --soft: #f3f7f8;
  --ink: #12262b;
  --muted: #5f7479;
  --line: #d9e3e5;
  --brand: #14304f;
  --teal: #1f7a80;
  --gold: #b08d3e;
  --brand2: #e8eef5;
  --in: #1b873f;
  --in-bg: #e4f5ea;
  --out: #c0392b;
  --out-bg: #fbe8e5;
  --amber: #b36b00;
  --amber-bg: #fff1d6;
  --blue: #1553b8;
  --blue-bg: #e3edff;
  --radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.neg { color: var(--out) !important; }
.ok { color: var(--in); }
.center { text-align: center; }
.spacer { height: 110px; }
.code { font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; background: var(--soft); padding: 2px 8px; border-radius: 8px; }

/* layout */
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 90px; }
.wrap.wide { max-width: 900px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.card > h2 { font-size: 13px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.card p { margin: 6px 0; }
.toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.toprow h2 { font-size: 22px; }
.foot { text-align: center; color: var(--muted); font-size: 12.5px; margin: 26px 0 8px; }
.hint { font-size: 13.5px; color: var(--muted); margin: 6px 0; }
.empty { text-align: center; color: var(--muted); padding: 26px 0; }
.empty.small { padding: 12px 0; font-size: 14px; }

/* header, banners, tabs */
header.top { background: #fff; border-bottom: 1px solid var(--line); padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 4; }
header.top .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
header.top img { height: 42px; width: auto; max-width: 110px; object-fit: contain; }
header.top h1 { font-size: 16px; line-height: 1.2; }
header.top small { display: block; color: var(--muted); font-size: 12px; }
header.top button { background: #fff; color: var(--brand); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.banner { padding: 9px 16px; font-size: 14px; text-align: center; }
.banner.trial { background: var(--amber-bg); color: #6b4200; }
.banner.push { background: var(--blue-bg); color: #123f8d; }
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs button { flex: 1; position: relative; background: none; border: 0; padding: 9px 4px 8px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
nav.tabs .ic { font-size: 20px; line-height: 1; }
nav.tabs button.on { color: var(--brand); font-weight: 700; }
.badge { font-style: normal; font-size: 11px; background: var(--out); color: #fff; border-radius: 999px; min-width: 18px; padding: 1px 6px; position: absolute; top: 4px; left: calc(50% + 8px); font-weight: 700; }
.badge[hidden] { display: none; }
.badge.off { position: static; background: var(--out-bg); color: var(--out); margin-left: 6px; }
.badge.ok { position: static; background: var(--in-bg); color: var(--in); }

/* forms */
label.field { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=date], select {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--soft); outline: none; }
input:focus, select:focus { border-color: var(--brand); background: #fff; }
input.big { font-size: 24px; font-weight: 700; text-align: center; padding: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 10px 0 0; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.btn { width: 100%; padding: 15px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 700; font-size: 17px; margin-top: 16px; text-align: center; text-decoration: none; display: block; }
.btn.small { width: auto; display: inline-block; padding: 9px 14px; font-size: 14px; margin: 0; }
.btn.ghost { background: #fff; color: var(--brand); border: 1.5px solid var(--line); }
.btn.go, .btn.submit.in { background: var(--in); }
.btn.out, .btn.submit.out { background: var(--out); }
.btn.danger, .btn.ghost.danger { color: var(--out); }
.btn.accept { margin-top: 12px; background: var(--in); }
.btn:disabled { opacity: .5; }
.btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btnrow .btn:only-child { grid-column: 1 / -1; }
.err { color: var(--out); font-size: 14px; margin-top: 10px; min-height: 1em; }
.linkbtn { background: none; border: 0; color: var(--brand); font-size: 14px; padding: 6px 6px; font-weight: 600; }
.linkbtn.dangerlink { color: var(--out); }
.linkbtn:disabled { opacity: .3; }
.links { text-align: center; margin-top: 14px; font-size: 14.5px; }
form.inline { display: flex; gap: 8px; margin-top: 12px; }
form.inline input { flex: 1; min-width: 0; }
.stepper { display: grid; grid-template-columns: 62px 1fr 62px; gap: 10px; }
.stepper button { border: 1.5px solid var(--line); background: var(--soft); border-radius: 12px; font-size: 30px; font-weight: 600; color: var(--brand); }
.half { width: 100%; margin-top: 10px; padding: 11px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips button { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--soft); font-weight: 600; }
.chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* capsule + segments */
.capsule { display: flex; background: var(--brand2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-top: 16px; }
.capsule button { flex: 1; border: 0; background: transparent; padding: 11px 8px; border-radius: 999px; font-weight: 700; font-size: 16px; color: var(--muted); }
.capsule button.on { background: var(--brand); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.capsule.small, .capsule.mini { margin-top: 4px; }
.capsule.small button, .capsule.mini button { padding: 8px; font-size: 15px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.seg button { padding: 12px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--soft); font-weight: 700; color: var(--muted); }
.seg button.in.on { background: var(--in-bg); border-color: var(--in); color: var(--in); }
.seg button.out.on { background: var(--out-bg); border-color: var(--out); color: var(--out); }

/* auth */
.auth { max-width: 420px; margin: 0 auto; padding: 36px 18px 20px; }
.brandmark { text-align: center; margin-bottom: 8px; }
.brandmark .logo { width: 68px; height: 68px; border-radius: 16px; }
.brandmark h1 { font-size: 24px; margin-top: 8px; }
.brandmark .sub { color: var(--muted); margin: 4px 0 6px; font-size: 14.5px; }
.auth .card h2 { font-size: 20px; color: var(--ink); text-transform: none; letter-spacing: 0; margin: 0 0 4px; }
.cta { text-align: center; }
.devotp { background: var(--amber-bg); color: #6b4200; border-radius: 10px; padding: 10px; text-align: center; margin: 10px 0; }
.devotp b { font-size: 20px; letter-spacing: .15em; }

/* orders */
.fchips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchips button { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 650; font-size: 14.5px; white-space: nowrap; }
.fchips button i { font-style: normal; background: var(--soft); border-radius: 999px; padding: 0 7px; margin-left: 3px; }
.fchips button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fchips button.on i { background: rgba(255,255,255,.25); }
.ocard { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-top: 12px; cursor: pointer; background: #fff; }
.ocard:active { background: var(--soft); }
.ocard .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ocard .due { font-size: 13px; color: var(--amber); font-weight: 650; white-space: nowrap; }
.brief1 { font-size: 14px; color: var(--muted); margin: 6px 0; }
.chips2 { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 0; }
.chip { font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.chip.done { background: var(--in-bg); color: var(--in); }
.chip.accepted { background: var(--amber-bg); color: var(--amber); }
.chip.open { background: var(--blue-bg); color: var(--blue); }
.arrow { color: var(--line); }
.r3 { display: flex; justify-content: space-between; font-size: 13.5px; gap: 8px; }
.st { font-weight: 650; }
.st.open { color: var(--blue); } .st.work { color: var(--amber); } .st.done { color: var(--in); } .st.bad { color: var(--out); }
h3.sec { margin: 22px 0 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
h3.sec i { font-style: normal; background: var(--blue-bg); color: var(--blue); border-radius: 999px; padding: 1px 8px; font-size: 13px; }

/* order detail */
.back { padding-left: 0; margin-top: 10px; }
.dhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dhead h2 { font-size: 24px; }
.big2 { font-size: 19px; display: block; margin-bottom: 4px; }
.note { background: var(--amber-bg); border-radius: 10px; padding: 8px 10px; margin-top: 8px; font-size: 14.5px; }
.tl { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; }
.tl .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); margin-top: 4px; flex-shrink: 0; }
.tl.done .dot { background: var(--in); } .tl.accepted .dot { background: var(--amber); } .tl.open .dot { background: var(--blue); }
.item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .grow { flex: 1; min-width: 0; }
.num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; background: var(--soft); }
.pgroup { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 10px; }
.pgroup.bad { border-color: var(--out); background: var(--out-bg); }
.pg1 { display: flex; justify-content: space-between; align-items: center; }
.pill { font-weight: 800; background: var(--brand); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.pill.in { background: none; color: var(--in); font-size: 16px; } .pill.out { background: none; color: var(--out); font-size: 16px; }
.layouts { margin-top: 10px; }
.lay { margin-top: 10px; }
.plansvg { width: 100%; height: auto; display: block; border-radius: 6px; background: #fff; }
.ptotal { text-align: right; font-size: 18px; margin-top: 12px; }
.actionbar { position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 5; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.actionbar .btn { margin: 0; flex: 1 1 140px; max-width: 300px; padding: 12px; font-size: 15.5px; }

/* order form */
.icard .ih { display: flex; justify-content: space-between; align-items: center; }
.icard .ih h2 { margin: 0; }
.photorow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

/* stock + lists */
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total b { font-size: 34px; }
table.stock { width: 100%; border-collapse: collapse; }
table.stock th, table.stock td { text-align: right; padding: 11px 5px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.stock th:first-child, table.stock td:first-child, table.stock th:nth-child(2), table.stock td:nth-child(2) { text-align: left; }
table.stock th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 650; }
table.stock td.s { font-weight: 800; font-size: 19px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row.off { opacity: .55; }
.row .l { min-width: 0; flex: 1; }
.row .l small { display: block; color: var(--muted); font-size: 12.5px; }
.row .acts { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.row select { width: auto; padding: 7px 8px; font-size: 14px; }

/* modal / popup */
.modal { position: fixed; inset: 0; background: rgba(10, 25, 30, .5); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.msheet { background: #fff; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
.sform h2 { font-size: 21px; margin-bottom: 6px; }
.popup { text-align: center; }
.popup h2 { font-size: 26px; }
.popup .ping { font-size: 44px; animation: ring 1s ease-in-out infinite; }
.popup .client { font-size: 20px; font-weight: 700; margin: 6px 0 0; }
.popup ul.brief { list-style: none; padding: 0; margin: 10px 0; text-align: left; background: var(--soft); border-radius: 12px; }
.popup ul.brief li { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.popup ul.brief li:last-child { border-bottom: 0; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(8deg); } }
img.bigphoto { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: var(--soft); }

#toast { position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #12262b; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; transition: .25s; z-index: 40; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--out); }

@media (min-width: 760px) {
  .ocard:hover { background: var(--soft); }
  .actionbar { left: 50%; right: auto; transform: translateX(-50%); width: 640px; border-radius: 14px 14px 0 0; border: 1px solid var(--line); }
  .modal { align-items: center; } .msheet { border-radius: 20px; }
}
@media print { header.top, nav.tabs, .actionbar, #toast { display: none; } }

/* fixes */
.card .toprow { margin-top: 0; }
.card .toprow h2 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
table.stock td:nth-child(2) { white-space: nowrap; font-size: 14px; }
.r1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.r1 .badge, .card .badge { position: static; }

/* fractional size fields */
.szf { display: flex; gap: 6px; }
.szf input { flex: 1 1 55px; min-width: 0; }
.szf select { flex: 1 1 92px; min-width: 0; padding: 13px 6px; font-size: 14.5px; }
.szrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form#szf .btn.small { margin-top: 12px; }

/* platform dashboard */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.kpi span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 650; }
.kpi b { display: block; font-size: 25px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 12.5px; }
.kpi.hero { background: var(--brand); border-color: var(--brand); }
.kpi.hero span, .kpi.hero small { color: rgba(255,255,255,.8); } .kpi.hero b { color: #fff; font-size: 30px; }
.sec2 { margin: 14px 0 2px; font-size: 14px; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 16px; }
.bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar i { display: block; width: 100%; max-width: 26px; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.bar em { font-style: normal; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; line-height: 1; }
.bar span { font-size: 10px; color: var(--muted); height: 14px; margin-top: 3px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.two:has(.szf) { grid-template-columns: 1fr; gap: 0; }
.szf input { flex: 1 1 90px; } .szf select { flex: 1 1 130px; }

/* Glaziox palette: navy (brand), teal (accent), gold (highlight) */
.brandmark .wordmark { width: min(300px, 80%); height: auto; display: block; margin: 0 auto; }
.brandmark .sub { margin-top: 0; }
.capsule button.on { background: linear-gradient(135deg, var(--brand), #1b4a6e); }
.btn.go, .btn.accept, .btn.submit.in { background: var(--teal); }
.kpi.hero { background: linear-gradient(135deg, var(--brand), #1b4a6e); }
header.top { border-bottom: 2px solid var(--gold); }
nav.tabs button.on { color: var(--teal); }
.pill { background: var(--teal); }

/* leftovers */
.reuse { background: var(--in-bg); border: 1px solid #b9e0c5; border-radius: 12px; padding: 12px; margin: 10px 0; }
.reuse1 { margin-top: 10px; }
.keep { background: var(--soft); border-radius: 10px; padding: 8px 10px; font-size: 14px; margin: 10px 0 0; color: #1b6b35; }

/* ---- pricing, bills, ledger, reports ---- */
.opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12px; margin-left: 4px; }
.oid { background: var(--brand); color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 14px; margin-right: 6px; }
.bigid { font-size: 38px; margin: 0; letter-spacing: -1px; color: var(--brand); }
.dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.nostock { background: var(--amber-bg); color: var(--amber); border-radius: 10px; padding: 7px 10px; font-size: 13px; font-weight: 600; margin: 6px 0; }
.nostock.big { font-size: 14.5px; padding: 12px; margin: 10px 0; line-height: 1.45; }
.nostock .small { font-weight: 400; font-size: 13px; }
.reusebox { background: var(--in-bg); color: #145c2c; border-radius: 10px; padding: 12px; margin: 10px 0; font-size: 14.5px; line-height: 1.5; }
.gstseg button { padding: 10px 6px; font-size: 14px; }
.gstseg button.on { background: var(--brand2); border-color: var(--brand); color: var(--brand); }
.bill { margin-top: 12px; font-size: 14.5px; }
.bill .bl { border-bottom: 1px dashed var(--line); padding: 8px 0; }
.bill .b1, .bill .bt { display: flex; justify-content: space-between; gap: 12px; }
.bill .b2 { color: var(--muted); font-size: 12.5px; }
.bill .bt { padding: 4px 0; }
.bill .bt.muted { color: var(--muted); }
.bill .bt.grand { font-size: 18px; font-weight: 800; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; }
.badge.gst { position: static; background: var(--blue-bg); color: var(--blue); margin-left: 6px; }
.card h2 .badge { position: static; background: var(--soft); color: var(--muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.payline { display: flex; gap: 10px; margin: 12px 0; }
.payline > div { flex: 1; background: var(--soft); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.payline b { font-size: 18px; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.btnrow .btn { flex: 1; text-align: center; text-decoration: none; min-width: 130px; }
.search { margin: 8px 0; }
.addons { display: flex; flex-wrap: wrap; gap: 8px; }
.addon { display: inline-flex; align-items: center; gap: 6px; }
.addon button { border: 1.5px solid var(--line); background: var(--soft); border-radius: 999px; padding: 7px 12px; font-size: 14px; }
.addon.on button { background: var(--brand2); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.addon input { width: 62px; padding: 6px 8px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.stat { background: var(--soft); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
.stat span { color: var(--muted); font-size: 13px; }
.stat b { font-size: 22px; }
.stat small { color: var(--muted); font-size: 12px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 18px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 11px; color: var(--muted); }
.bar i { display: block; width: 100%; background: var(--teal); border-radius: 5px 5px 0 0; min-height: 2px; }
.bar em { font-style: normal; font-size: 10px; }
.row .amt { text-align: right; display: flex; flex-direction: column; }
.row .amt small { color: var(--muted); font-size: 11.5px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.arow { display: grid; grid-template-columns: 1.4fr 1.3fr .8fr auto; gap: 6px; margin-bottom: 8px; align-items: center; }
.arow input, .arow select { padding: 8px; font-size: 14px; min-width: 0; }
.inline { display: flex; gap: 6px; margin: 8px 0 14px; }
.inline > * { min-width: 0; }
.inline input, .inline select { flex: 1; padding: 8px; }
input.mini { width: 90px; padding: 6px 8px; }
.langs { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.langs button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; }
.langs button.on { border-color: var(--brand); background: var(--brand2); font-weight: 700; }
.kc .r1 b:first-child { font-size: 16px; }
input[type=search].search { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--soft); }
.perfpick { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.perfpick input, .perfpick select { width: auto; padding: 8px 10px; }
.bars.dense { gap: 2px; }
.bars.dense .bar span { font-size: 9px; }
.banner.install { background: var(--blue-bg); color: var(--blue); }
ol.steps { padding-left: 20px; line-height: 1.6; }

/* ---- fit: nothing may be wider than the phone screen ---- */
html, body { max-width: 100%; overflow-x: hidden; }
body { overscroll-behavior-x: none; }
#app, #view, .wrap, .card { min-width: 0; max-width: 100%; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.stock th, table.stock td { padding-left: 6px; padding-right: 6px; }
@media (max-width: 420px) { table.stock { font-size: 13px; } }
.code { word-break: break-all; overflow-wrap: anywhere; }
.two > *, .three > *, .arow > *, .inline > *, .row .l { min-width: 0; }
img, svg, video { max-width: 100%; }
.fchips, .chips { max-width: 100%; }
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  nav.tabs { padding-bottom: env(safe-area-inset-bottom); }
}
.pline { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; margin: 10px 0; background: var(--soft); }
.plh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.plh .linkbtn { margin-left: auto; }
.plrow { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; align-items: end; margin: 8px 0; }
.pline input[data-lf=design] { margin-top: 4px; }
.check.inl { margin: 0 0 0 auto; font-size: 13.5px; }
.photorow { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.arow.chg { grid-template-columns: 1.6fr 1fr auto; }
.addon small { color: var(--muted); font-size: 11.5px; }
.addon input { width: 64px; }

/* subscription plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
.plan{position:relative;border:2px solid var(--line,#dbe4e7);border-radius:14px;padding:16px 12px 12px;text-align:center;display:flex;flex-direction:column;gap:6px;background:#fff}
.plan.best{border-color:#14304f;box-shadow:0 2px 10px rgba(20,48,79,.12)}
.plan .pr{font-size:15px;color:#7a8e92}.plan .pr span{font-size:24px;font-weight:800;color:#14304f}.plan .pr s{color:#c0392b}.plan .pr small{font-size:12px}
.plan .btn{margin-top:4px;width:100%}
.ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#1b873f;color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.btn.danger{background:#fff;color:#c0392b;border:1px solid #c0392b}
@media(max-width:380px){.plans{grid-template-columns:1fr}}

.partyseg{margin:0 0 12px}
.legal{margin-top:18px;text-align:center;font-size:12.5px;color:#7a8e92}.legal a{color:inherit;text-decoration:underline;margin:0 6px}
.consent{display:flex;gap:10px;align-items:flex-start;margin:12px 0;font-size:13.5px}.consent input{margin-top:3px;flex:none}
.company label.field{margin-top:10px}.company textarea{width:100%;min-height:90px;font:inherit;padding:10px;border:1px solid #dbe4e7;border-radius:10px}

/* guided tour */
#tour{position:fixed;inset:0;z-index:9000;touch-action:pan-y}
.tour-dim{position:fixed;inset:0;background:rgba(10,25,35,.55)}
.tour-spot{position:fixed;display:none;border-radius:12px;box-shadow:0 0 0 100vmax rgba(10,25,35,.62);outline:3px solid #ffd24a;pointer-events:none;animation:tpulse 1.6s infinite}
@keyframes tpulse{50%{outline-color:#fff}}
.tour-card{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 20px));background:#fff;color:#12262b;border-radius:16px;padding:16px 16px 14px;box-shadow:0 10px 40px rgba(0,0,0,.35);z-index:9002}
.tour-card.tour-center{top:50%;transform:translate(-50%,-50%)}
.tour-card h3{margin:0 0 6px;font-size:18px;color:#14304f}.tour-card h3 small{font-size:12px;color:#7a8e92;font-weight:500}
.tour-card p{margin:0 0 10px;font-size:15px;line-height:1.5}.tour-sub{color:#4d6368}
.tour-step{font-size:12px;color:#7a8e92;margin-bottom:4px}
.tour-prog{height:4px;background:#e3eaec;border-radius:3px;margin:4px 0 12px;overflow:hidden}.tour-prog i{display:block;height:100%;background:#14304f}
.tour-btns{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tour-next,.tour-back{border:0;border-radius:10px;padding:11px 18px;font:700 15px system-ui;cursor:pointer}
.tour-next{background:#14304f;color:#fff}.tour-back{background:#e8eef5;color:#14304f;margin-right:8px}
.tour-link{background:none;border:0;color:#7a8e92;font:14px system-ui;text-decoration:underline;padding:8px 0;cursor:pointer}
.tour-langs{display:grid;gap:10px;margin:12px 0}.tour-langs button{padding:14px;font:700 18px system-ui;border-radius:12px;border:2px solid #dbe4e7;background:#f6f9fa;cursor:pointer}.tour-langs button.on{border-color:#14304f;background:#e8eef5;color:#14304f}
.tour-arrow{position:fixed;display:none;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;z-index:9001;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.tour-arrow.up{border-bottom:18px solid #ffd24a;animation:tbob 1s infinite}.tour-arrow.down{border-top:18px solid #ffd24a;animation:tbobd 1s infinite}
@keyframes tbob{50%{transform:translateY(5px)}}@keyframes tbobd{50%{transform:translateY(-5px)}}
.tour-busy{text-align:center;padding:20px;color:#7a8e92}
.partyseg button.on{background:#14304f;color:#fff;border-color:#14304f}

input.autofill{color:#1f7a80}
details.calc{margin:10px 0}details.calc summary{cursor:pointer;color:#7a8e92;font-size:13px}

/* subscribe banner and popup */
.banner.sub{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(100deg,#14304f,#1f7a80);color:#fff;border:0;padding:10px 14px}
.banner.sub .bs1{font-size:14.5px;line-height:1.3}.banner.sub small{display:block;opacity:.8;font-size:12px}
.banner.sub button{background:#ffd24a;color:#14304f;border:0;border-radius:999px;padding:10px 20px;font:800 15px system-ui;box-shadow:0 2px 8px rgba(0,0,0,.25);animation:subpulse 2.2s infinite;cursor:pointer}
.banner.sub.warn{background:linear-gradient(100deg,#b4440e,#e08a1e)}
@keyframes subpulse{50%{transform:scale(1.06)}}
.subm{position:relative}.mclose{position:absolute;right:2px;top:-6px;z-index:2;background:rgba(255,255,255,.2);border:0;color:#fff;font-size:26px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer}
.subhero{background:linear-gradient(135deg,#14304f,#1f7a80);color:#fff;border-radius:16px;padding:22px 18px;text-align:center;margin:0 0 14px}
.subhero small{opacity:.85;font-size:13px}.subsave{font-size:46px;font-weight:800;line-height:1.15;color:#ffd24a;margin:4px 0}.subhero p{margin:0;opacity:.92;font-size:14.5px}
.subx{display:inline-block;margin-top:12px;background:rgba(255,255,255,.16);padding:7px 14px;border-radius:999px;font-size:14px}
.subperks{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}.subperks li{padding-left:26px;position:relative;font-size:14.5px}.subperks li:before{content:"✓";position:absolute;left:0;color:#1b873f;font-weight:800}
.plan.best{background:linear-gradient(180deg,#f2f8ff,#fff)}.plan .btn{font-weight:800}
/* bell for new orders */
#bellbar{position:fixed;left:8px;right:8px;top:8px;z-index:8000;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#c0392b;color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.35);animation:bellshake 1.2s infinite}
#bellbar small{flex:1 1 100%;opacity:.9}#bellbar b{flex:1}#bellbar button{background:#fff;color:#c0392b;border:0;border-radius:10px;padding:9px 16px;font:800 15px system-ui;cursor:pointer}
.bellic{font-size:24px;display:inline-block;animation:bellring .6s infinite}
@keyframes bellring{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}@keyframes bellshake{50%{box-shadow:0 6px 30px rgba(192,57,43,.8)}}

/* ---------- landing page ---------- */
.btn.gold{background:linear-gradient(180deg,#ffdc6a,#f5b82e);color:#14304f;font-weight:800;box-shadow:0 4px 14px rgba(245,184,46,.45)}
.lback{margin:0 0 6px}.lback a{font-size:14px;color:#1f7a80;text-decoration:none;font-weight:600}
.trialhero{background:linear-gradient(135deg,#14304f,#1f7a80);color:#fff;border-radius:16px;padding:16px 18px;margin:0 0 14px;text-align:center;box-shadow:0 6px 20px rgba(20,48,79,.25)}
.trialhero .th1{font-size:30px;letter-spacing:.5px;color:#ffd24a;line-height:1.1}.trialhero p{margin:4px 0 8px;opacity:.95}
.trialhero ul{list-style:none;padding:0;display:grid;gap:3px;font-size:14.5px;text-align:left;width:max-content;max-width:100%;margin:0 auto}

.land{--navy:#0e2640;--ink:#14304f;--teal:#1f7a80;--gold:#ffd24a;--pad:clamp(16px,4vw,40px);color:var(--ink);overflow-x:clip;font-size:clamp(15px,1.1vw + 12px,17px)}
.land *{box-sizing:border-box}.land h1,.land h2,.land h3,.land p{margin:0}
.lwrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.lbtn{border:0;border-radius:999px;padding:.7em 1.25em;font:700 1em system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .2s}
.lbtn:active{transform:scale(.97)}
.lbtn.gold{background:linear-gradient(180deg,#ffdc6a,#f5b82e);color:var(--ink);box-shadow:0 6px 18px rgba(245,184,46,.45)}.lbtn.gold:hover{box-shadow:0 8px 26px rgba(245,184,46,.7);transform:translateY(-1px)}
.lbtn.ghost{background:#fff;color:var(--ink);border:1.5px solid #cfdde2}.lbtn.glass{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(6px)}
.lbtn.dark{background:var(--ink);color:#fff}.lbtn.link{background:none;color:inherit;text-decoration:underline;padding:.5em;font-weight:600}.lbtn.big{padding:.95em 1.6em;font-size:1.1em}

.ltop{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .25s,box-shadow .25s,padding .25s;padding-top:env(safe-area-inset-top)}
.ltop .lwrap{display:flex;align-items:center;justify-content:space-between;gap:8px;height:clamp(84px,16vw,112px);transition:height .35s cubic-bezier(.2,.7,.2,1)}.ltop.solid .lwrap{height:clamp(54px,8vw,64px)}
.ltop .wordmark{height:clamp(46px,11vw,76px);width:auto;transition:height .35s cubic-bezier(.2,.7,.2,1),padding .25s,background .25s;background:#fff;border-radius:9px;padding:4px 9px;box-sizing:content-box}
.ltop.solid .wordmark{height:clamp(24px,5vw,32px)}
.ltop .lnav{display:flex;gap:8px;align-items:center}.ltop .lbtn{font-size:clamp(13px,3.6vw,15px)}
.ltop.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 #dfe9ec}.ltop.solid .wordmark{background:transparent;padding:4px 0}
.ltop:not(.solid) .wordmark{box-shadow:0 8px 24px rgba(0,0,0,.28)}
.ltop:not(.solid) .lbtn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}

/* hero with real-looking glass panes */
.lhero{position:relative;color:#fff;background:radial-gradient(120% 90% at 78% 8%,#25939a 0%,#14425f 38%,#0b1f36 100%);padding:calc(clamp(84px,16vw,112px) + 20px + env(safe-area-inset-top)) 0 clamp(32px,6vw,70px);overflow:hidden;min-height:min(100dvh,980px);display:flex;align-items:center}
.lhero .lwrap{display:grid;gap:clamp(22px,4vw,56px);align-items:center;position:relative;z-index:2}
@media(min-width:900px){.lhero .lwrap{grid-template-columns:1.05fr .95fr}}
.lpane{position:absolute;z-index:1;border-radius:6px;border:1px solid rgba(255,255,255,.38);background:linear-gradient(115deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 28%,rgba(255,255,255,.02) 55%,rgba(255,255,255,.22) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 6px 0 14px -8px rgba(160,240,235,.55),0 30px 60px rgba(0,0,0,.35);backdrop-filter:blur(2px);overflow:hidden;animation:paneFloat 11s ease-in-out infinite}
.lpane:after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shine 7s ease-in-out infinite}
.lpane.p1{width:min(46vw,420px);aspect-ratio:3/4;right:-6%;top:6%;transform:rotate(9deg)}.lpane.p2{width:min(34vw,300px);aspect-ratio:4/5;left:-8%;bottom:-6%;transform:rotate(-12deg);animation-delay:-4s}.lpane.p2:after{animation-delay:-3s}
.lpane.p3{width:min(22vw,190px);aspect-ratio:1;right:34%;bottom:8%;transform:rotate(-4deg);animation-delay:-7s;opacity:.8}
@keyframes paneFloat{50%{translate:0 -14px}}@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.lbadge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,210,74,.14);border:1px solid rgba(255,210,74,.65);color:var(--gold);border-radius:999px;padding:.4em 1em;font-weight:700;font-size:.9em}
.lbadge i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.lhero h1{font-size:clamp(2.2rem,7vw + .6rem,4.4rem);line-height:1.03;font-weight:800;margin:.35em 0 .3em;letter-spacing:-.02em}
.lhero h1 em{font-style:normal;background:linear-gradient(90deg,#ffe58a,#ffb92e);-webkit-background-clip:text;background-clip:text;color:transparent}
.lsub{max-width:34em;line-height:1.55;opacity:.92;font-size:1.08em}
.lcta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.4em 0 1em}
@media(max-width:520px){.lcta .lbtn.big{width:100%}.lcta .lbtn.glass{flex:1}}
.ltrust{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:0;font-size:.88em;opacity:.88}
.lstage{position:relative;display:grid;place-items:center;min-height:0;padding:10px 0}
.ldev{position:relative;width:min(300px,68vw,calc(54dvh*.5));aspect-ratio:560/1120;border-radius:34px;padding:8px;background:linear-gradient(145deg,#2b3a4d,#0a131f);box-shadow:0 40px 70px -10px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.18);transform:perspective(1200px) rotateY(-8deg) rotateX(3deg);transition:transform .5s}
@media(hover:hover){.lstage:hover .ldev{transform:perspective(1200px) rotateY(0) rotateX(0)}}
@media(max-width:899px){.ldev{transform:none}}
.ldev:before{content:"";position:absolute;top:13px;left:50%;width:30%;height:5px;border-radius:9px;background:#0a131f;transform:translateX(-50%);z-index:3}
.lscr{position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#fff}
.lscr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1.2s}
.lscr img.on{opacity:1;transform:none}
.lscr:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 35%);pointer-events:none}
.lchip{position:absolute;z-index:4;background:rgba(255,255,255,.95);color:var(--ink);border-radius:14px;padding:.55em .85em;font-weight:700;font-size:.82em;box-shadow:0 14px 30px rgba(0,0,0,.3);display:flex;gap:8px;align-items:center;animation:chip 6s ease-in-out infinite;max-width:46vw}
.lchip b{display:block;font-size:1.05em}.lchip small{display:block;color:#5c7480;font-weight:600}
.lchip.c1{left:max(-4px,calc(50% - 215px));top:12%}.lchip.c2{right:max(-4px,calc(50% - 215px));top:46%;animation-delay:-2s}.lchip.c3{left:max(-4px,calc(50% - 205px));bottom:8%;animation-delay:-4s}
@keyframes chip{50%{translate:0 -9px}}
@media(max-width:380px){.lchip.c3{display:none}}
.lscroll{position:absolute;left:50%;bottom:14px;translate:-50% 0;z-index:3;width:24px;height:38px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:none}
.lscroll:after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:#fff;animation:wheel 1.8s infinite}@keyframes wheel{70%{translate:0 12px;opacity:0}}
@media(min-width:900px) and (min-height:700px){.lscroll{display:block}}

/* proof strip */
.lstrip{background:#fff;border-bottom:1px solid #e3ecef}
.lstrip .lwrap{display:grid;grid-template-columns:repeat(2,1fr);gap:0}@media(min-width:700px){.lstrip .lwrap{grid-template-columns:repeat(4,1fr)}}
.lstat{padding:1.1em .6em;text-align:center}.lstat b{display:block;font-size:clamp(1.5rem,4vw,2.1rem);color:var(--teal);font-weight:800;line-height:1.1}.lstat span{font-size:.85em;color:#5c7480}

/* section basics */
.lsec{padding:clamp(40px,8vw,96px) 0}.lsec.tint{background:linear-gradient(180deg,#f2f8f9,#fff)}
.lsec h2{font-size:clamp(1.6rem,4.2vw + .4rem,2.8rem);line-height:1.1;font-weight:800;letter-spacing:-.015em}
.lhead{text-align:center;max-width:40em;margin:0 auto clamp(22px,4vw,44px)}.lhead p{color:#516b77;margin-top:.7em;line-height:1.55}
.ltag{display:inline-block;background:#e1f2f3;color:var(--teal);font-weight:800;font-size:.72em;border-radius:999px;padding:.4em 1em;margin-bottom:.9em;text-transform:uppercase;letter-spacing:.08em}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}[data-rv].in{opacity:1;transform:none}

/* showcase */
.lshow{display:grid;gap:clamp(18px,4vw,56px);align-items:center}
@media(min-width:900px){.lshow{grid-template-columns:1fr minmax(260px,340px)}}
.ltabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scroll-snap-type:x proximity}.ltabs::-webkit-scrollbar{display:none}
@media(min-width:900px){.ltabs{flex-direction:column;overflow:visible;margin:0;padding:0}}
.ltab{flex:0 0 auto;scroll-snap-align:start;text-align:left;border:1.5px solid #d6e4e8;background:#fff;border-radius:16px;padding:.8em 1.1em;cursor:pointer;position:relative;overflow:hidden;font:inherit;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.ltab b{display:block;font-size:1.02em}.ltab span{display:none;color:#516b77;font-size:.9em;line-height:1.45;margin-top:.35em}
.ltab.on{border-color:var(--teal);box-shadow:0 10px 28px rgba(31,122,128,.18)}.ltab.on span{display:block}
.ltab:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--teal),var(--gold))}.ltab.on:after{animation:prog var(--dur,5s) linear forwards}
.lshow.paused .ltab.on:after{animation-play-state:paused}@keyframes prog{to{width:100%}}
@media(max-width:899px){.ltab.on{width:min(80vw,340px);white-space:normal}.ltab:not(.on){white-space:nowrap}}
.lshowdev{justify-self:center;width:min(300px,64vw)}.lshowdev .ldev{width:100%;transform:none}

/* poster: cutting layout */
.lposters{display:grid;gap:clamp(14px,3vw,26px)}@media(min-width:760px){.lposters{grid-template-columns:1.25fr 1fr}}
.lposter{position:relative;border-radius:24px;overflow:hidden;color:#fff;padding:clamp(18px,3vw,30px);background:linear-gradient(145deg,#0f2d4a,#1c6f78);box-shadow:0 24px 50px -18px rgba(14,38,64,.55)}
.lposter h3{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:800;margin-bottom:.35em}.lposter p{opacity:.88;line-height:1.5;font-size:.95em}
.lposter.alt{background:linear-gradient(145deg,#fff,#eaf5f6);color:var(--ink);border:1px solid #d6e4e8}.lposter.alt p{opacity:1;color:#516b77}
.lsheet{margin-top:1em;width:100%;height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.35))}
.lsheet .pc{fill:rgba(255,255,255,.55);stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.lsheet.in .pc{animation:pop .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i)*.14s)}
.lsheet .lo{fill:url(#hatch);stroke:#7ff0a6;stroke-width:2.5;stroke-dasharray:7 5;opacity:0}.lsheet.in .lo{animation:fade .6s 1.1s forwards}
@keyframes pop{to{opacity:1;transform:none}}@keyframes fade{to{opacity:1}}
.lsheetcap{display:flex;gap:10px;flex-wrap:wrap;margin-top:.9em;font-size:.82em;font-weight:700}.lsheetcap span{background:rgba(255,255,255,.14);border-radius:999px;padding:.3em .8em}.lsheetcap .g{background:rgba(127,240,166,.22);color:#b9ffd0}
.lbell{display:grid;place-items:center;height:7.5em;margin:.4em 0 .8em}.lbell i{font-style:normal;font-size:3.6em;display:block;animation:ring 2.6s ease-in-out infinite;transform-origin:50% 8%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.2))}
.lbell:before,.lbell:after{content:"";position:absolute;width:5.5em;height:5.5em;border:2px solid rgba(31,122,128,.35);border-radius:50%;animation:wave 2.6s infinite}.lbell:after{animation-delay:1.3s}.lbell{position:relative}
@keyframes ring{0%,40%,100%{rotate:0deg}5%{rotate:16deg}10%{rotate:-14deg}15%{rotate:11deg}20%{rotate:-9deg}25%{rotate:6deg}30%{rotate:-3deg}}@keyframes wave{from{transform:scale(.5);opacity:.9}to{transform:scale(1.35);opacity:0}}
.lorder{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #d6e4e8;border-radius:14px;padding:.7em .9em;font-size:.88em;box-shadow:0 8px 20px rgba(20,48,79,.1)}.lorder b{display:block}.lorder small{color:#5c7480}.lorder .pill{margin-left:auto;background:#ffe9b0;color:#7a5400;font-weight:800;border-radius:999px;padding:.25em .7em;font-size:.82em}

/* calculator */
.lcalcwrap{display:grid;gap:clamp(16px,3vw,32px);align-items:stretch}@media(min-width:860px){.lcalcwrap{grid-template-columns:1.1fr .9fr}}
.lcalc{background:#fff;border:1px solid #d6e4e8;border-radius:24px;padding:clamp(16px,3vw,28px);display:grid;gap:1.1em;box-shadow:0 14px 36px rgba(20,48,79,.08)}
.lcalc label{display:grid;grid-template-columns:1fr auto;gap:.5em .6em;font-weight:700;font-size:.95em;align-items:baseline}.lcalc label b{color:var(--teal);font-size:1.1em}.lcalc input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--teal);height:28px}
.lres{border-radius:24px;padding:clamp(18px,3vw,30px);text-align:center;color:#fff;background:radial-gradient(100% 120% at 80% 0,#2aa3a8,#14425f 70%);display:grid;place-content:center;gap:.4em;box-shadow:0 20px 44px -14px rgba(14,38,64,.6)}
.lres small{opacity:.9;font-size:.95em}.lres .big{font-size:clamp(2.2rem,7vw,3.4rem);font-weight:800;color:var(--gold);line-height:1.05}.lres .x{display:inline-block;margin:.3em auto 0;background:rgba(255,210,74,.18);border:1px solid rgba(255,210,74,.6);color:var(--gold);border-radius:999px;padding:.3em .9em;font-weight:800}
.lfine{font-size:.78em;color:#6b8089;text-align:center;margin-top:1.4em;max-width:44em;margin-inline:auto}

/* pricing */
.lplans{display:grid;gap:clamp(18px,3vw,26px);max-width:760px;margin:0 auto}@media(min-width:640px){.lplans{grid-template-columns:1fr 1fr}}
.lplan{position:relative;background:#fff;border:2px solid #d6e4e8;border-radius:24px;padding:clamp(20px,3vw,30px) clamp(16px,2.5vw,24px);text-align:center;display:grid;gap:.8em;align-content:start}
.lplan.best{border-color:var(--ink);background:linear-gradient(180deg,#f3f8ff,#fff);box-shadow:0 22px 44px -16px rgba(20,48,79,.4)}@media(min-width:640px){.lplan.best{transform:translateY(-8px)}}
.lsavetag{position:absolute;top:-14px;left:50%;translate:-50% 0;background:#1b873f;color:#fff;font-weight:800;font-size:.8em;border-radius:999px;padding:.35em 1.1em;white-space:nowrap}
.lp{font-size:clamp(2rem,6vw,2.6rem);font-weight:800}.lp small{font-size:.42em;font-weight:600;color:#6b8089}.lp s{font-size:.5em;color:#c0392b;margin-right:.3em}
.lplan ul{list-style:none;padding:0;margin:0;display:grid;gap:.45em;color:#35505c;text-align:left;width:max-content;max-width:100%;margin-inline:auto}.lplan li:before{content:"✓ ";color:#1b873f;font-weight:800}
.lplan .lbtn{width:100%}.lnote{text-align:center;color:#516b77;margin-top:1.4em;font-size:.92em}

/* final cta + footer */
.lfinal{position:relative;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(120% 140% at 20% 0,#2aa3a8,#14425f 55%,#0b1f36);padding:clamp(44px,9vw,100px) 0}
.lfinal h2{max-width:20em;margin:0 auto .6em}.lfinal .lbtn.link{color:#d9e8ee}
.lfoot{text-align:center;padding:22px var(--pad) calc(30px + env(safe-area-inset-bottom));font-size:.85em;color:#6b8089;display:grid;gap:8px;justify-items:center}.lfoot a{color:var(--teal)}
.lsticky{position:fixed;left:0;right:0;bottom:0;z-index:29;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(14,38,64,.15);display:flex;gap:10px;align-items:center;justify-content:space-between;translate:0 110%;transition:translate .35s}
.lsticky.show{translate:0 0}.lsticky span{font-weight:800;font-size:.95em;line-height:1.2}.lsticky span small{display:block;font-weight:600;color:#5c7480}
@media(min-width:760px){.lsticky{display:none}}
@media(max-height:520px) and (orientation:landscape){.lhero{min-height:0}.ldev{width:min(200px,30vw)}.lchip{display:none}}
@media(min-width:1500px){.land{font-size:18px}.lwrap{max-width:1320px}}
@media(prefers-reduced-motion:reduce){.land *{animation:none!important;transition:none!important}[data-rv]{opacity:1;transform:none}.lscr img{transition:none}.lsheet .pc,.lsheet .lo{opacity:1;transform:none}}

/* referral */
.banner.ref{display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,#7a2bd6,#e0457b 60%,#f59e0b);color:#fff;border:0;padding:9px 12px;text-align:left}
.banner.ref>div{flex:1;font-size:14.5px;line-height:1.25}.banner.ref small{display:block;opacity:.9;font-size:12px}
.banner.ref button{background:#fff;color:#7a2bd6;border:0;border-radius:999px;padding:9px 18px;font:800 14px system-ui;cursor:pointer;animation:subpulse 2.4s infinite}
.banner.ref a{color:#fff;opacity:.8;text-decoration:none;padding:4px 6px}
.refcard{padding:0;overflow:hidden}.refcard #refbox{padding:0 0 14px}
.refhero{position:relative;background:linear-gradient(135deg,#5b21b6,#db2777 60%,#f59e0b);color:#fff;text-align:center;padding:22px 16px 18px}
.refhero small{letter-spacing:2px;font-weight:700;opacity:.9;font-size:12px}
.refhero h2{margin:6px 0 4px;color:#fff;font-size:21px;line-height:1.25}.refhero h2 b{display:inline-block;background:#ffd24a;color:#4a1d00;border-radius:10px;padding:1px 10px;margin:2px 0}
.refhero p{margin:6px 0 0;opacity:.95;font-size:14px}
.refgift{font-size:44px;animation:refbob 2.4s ease-in-out infinite}@keyframes refbob{50%{transform:translateY(-6px) rotate(-6deg)}}
.refsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 12px 4px}
.refsteps div{text-align:center;font-size:12.5px;line-height:1.3;color:var(--text,#222)}
.refsteps i{display:flex;width:28px;height:28px;margin:0 auto 5px;border-radius:50%;background:#7a2bd6;color:#fff;font-style:normal;font-weight:800;align-items:center;justify-content:center}
.refcard .reflink{display:flex;gap:8px;align-items:center;margin:10px 12px;background:#f4f1fb;border:1.5px dashed #7a2bd6;border-radius:12px;padding:8px 8px 8px 12px}
.refcard .reflink span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#4c1d95;font-size:13.5px}
.refcard .btnrow{padding:0 12px}.refcard .btn.wa{display:flex;justify-content:center;width:100%;background:#25d366;color:#053b1a;font-weight:800;border:0;text-decoration:none}
.refstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px;}
.refstats div{background:#f6f7f9;border-radius:12px;padding:10px 4px;text-align:center}.refstats b{display:block;font-size:22px}.refstats span{font-size:12px;opacity:.75}
.refstats .hl{background:linear-gradient(135deg,#fff3c4,#ffd24a);color:#4a1d00}
.reflist{margin:0 12px}.reflist .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 0;border-top:1px solid #eee}
.reflist small{display:block;opacity:.65}.reflist .pill{font-size:12px;border-radius:999px;padding:4px 10px;white-space:nowrap;background:#eef0f3}.reflist .pill.ok{background:#d9f7e4;color:#0b6b32;font-weight:700}.reflist .pill.wait{background:#fff0cf;color:#7a4a00}
.refcard .hint{margin:8px 12px 0}.refcard .hint.center{text-align:center}
.subref{margin-top:12px;background:linear-gradient(100deg,#f3e8ff,#ffe4ef);border-radius:12px;padding:10px 12px;font-size:13.5px;text-align:center}.subref a{color:#7a2bd6;font-weight:800}
.invby{display:inline-block;margin:0 0 8px;background:#ffd24a;color:#4a1d00;border-radius:999px;padding:4px 14px;font-weight:800;font-size:14px}
.linvby{display:inline-block;margin-left:8px;background:#ffd24a;color:#4a1d00;border-radius:999px;padding:4px 12px;font-weight:800;font-size:13px;vertical-align:middle}.linvby[hidden],.invby[hidden]{display:none}
.lref{background:linear-gradient(135deg,#2e1065,#9d174d 60%,#b45309);padding:clamp(28px,6vw,60px) 0}
.lrefbox{max-width:900px;margin:0 auto;text-align:center;color:#fff;display:grid;gap:18px;justify-items:center}
.lrefbox h2{color:#fff;font-size:clamp(24px,5vw,40px);margin:4px 0}.lrefbox h2 b{background:#ffd24a;color:#4a1d00;border-radius:12px;padding:0 12px;display:inline-block}
.lrefbox p{max-width:620px;opacity:.95;margin:0 auto}.lrefbox .ltag{background:rgba(255,255,255,.18);color:#fff}
.lrefgift{font-size:clamp(52px,10vw,84px);animation:refbob 2.6s ease-in-out infinite}
.lrefsteps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;width:100%}
.lrefsteps li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:12px;font-weight:600;backdrop-filter:blur(4px)}
.lrefsteps i{display:flex;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;background:#ffd24a;color:#4a1d00;font-style:normal;font-weight:800;align-items:center;justify-content:center}

.lguides{font-size:13px;opacity:.85}.lguides a{color:inherit}

.banner.ref.paid{background:linear-gradient(100deg,#0f766e,#7a2bd6 55%,#e0457b)}
.banner.ref.paid>div{font-size:15px}
.paythanks{text-align:center;padding:6px 4px 2px}.paythanks .ptb{font-size:54px;line-height:1;animation:subpulse 2s infinite}.paythanks h2{margin:6px 0 4px}
.paythanks .ptgift{margin:14px 0;background:linear-gradient(100deg,#f3e8ff,#ffe4ef);border-radius:14px;padding:12px}.paythanks .ptgift b{display:block;font-size:30px;color:#7a2bd6}.paythanks .ptgift span{font-size:13.5px}
.paythanks .btn{display:block;margin-top:8px;text-align:center}