/* REALM Smart Contact - brand: forest green + orange (from REALM Group Global), Archivo type (self-hosted, OFL). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/archivo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/archivo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* REALM Smart Contact - public pages. Mobile first. */
:root {
  --brand: #f58214; --brand-d: #a84f00; --accent: #1f5e37; --tint: #eef3eb;
  --forest: #0b2e1a; --forest2: #164a2b; --sun: #fbac3e;
  --ink: #0b2e1a; --ink2: #4a5d50; --line: #d9e2d5; --bg: #f7faf5; --card: #fff;
  --field: #fff; --r: 18px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --grad: linear-gradient(90deg, #2e9e3e, #fbac3e 45%, #f58214);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: inherit; }
img { max-width: 100%; }
.muted { color: var(--ink2); }
.small { font-size: .875rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ---------- profile card ---------- */
.card { max-width: 480px; margin: 0 auto; background: var(--card); min-height: 100vh; min-height: 100dvh; box-shadow: var(--shadow); }
.hero { position: relative; text-align: center; padding: 22px 20px 20px; background: var(--tint); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); }
.brand-logo { display: block; height: 88px; width: auto; max-width: 240px; margin: 0 auto 14px; object-fit: contain; }
.avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); background: #fff; display: block; margin: 0 auto; }
.avatar-i { display: grid; place-items: center; font-size: 44px; font-weight: 700; color: #fff; background: var(--brand); letter-spacing: 1px; }
.hero h1 { margin: 14px 0 2px; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.01em; }
.hero .title { margin: 0; font-weight: 600; color: var(--brand); }
.hero .company { margin: 2px 0 0; color: var(--ink2); }
.hero .loc { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: .9rem; color: var(--ink2); }
.hero .loc svg { width: 16px; height: 16px; }

.primary { padding: 18px 18px 6px; }
.save { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: 14px; background: var(--brand); color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); transition: transform .12s ease, filter .12s ease; }
.save:hover { filter: brightness(1.05); }
.save:active { transform: scale(.98); }

.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 14px 4px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; min-height: 76px; border: 0; background: none; font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); text-decoration: none; text-align: center; cursor: pointer; border-radius: 12px; line-height: 1.15; }
.act .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tint); color: var(--brand); transition: transform .12s ease, background .12s ease; }
.act:hover .ico { transform: translateY(-2px); background: color-mix(in srgb, var(--brand) 14%, #fff); }
.act:active .ico { transform: scale(.94); }

.about { margin: 10px 18px 0; padding: 14px 16px; border-radius: 14px; background: var(--bg); }
.about p { margin: 0 0 8px; color: var(--ink2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chips li { padding: 4px 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; }

.details ul { list-style: none; margin: 12px 0 0; padding: 0 18px; }
.details li { display: grid; grid-template-columns: 28px 64px 1fr; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 48px; }
.details li:last-child { border-bottom: 0; }
.details .ico { color: var(--brand); display: grid; }
.details .ico svg { width: 20px; height: 20px; }
.details .lbl { font-size: .8rem; color: var(--ink2); }
.details a, .details span:last-child { overflow-wrap: anywhere; font-weight: 600; text-decoration: none; }
.details a:hover { text-decoration: underline; }
.details a.js-mail { font-size: .92rem; }

.socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px 18px 0; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); }
.socials a:hover { color: var(--brand); border-color: var(--brand); }

.exchange { margin: 22px 14px 0; padding: 18px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); }
.exchange h2 { margin: 0; font-size: 1.2rem; }
.exchange > p { margin: 4px 0 12px; font-size: .92rem; }
.lead label { display: block; margin: 0 0 10px; font-size: .85rem; font-weight: 600; color: var(--ink2); }
.lead input, .lead textarea { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; font-size: 16px; color: var(--ink); border: 1px solid var(--fline, #cfd4da); border-radius: 10px; background: var(--field); }
.lead input:focus, .lead textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.lead .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: .78rem; margin: 2px 0 10px; }
.send { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.send:disabled { opacity: .6; }
.form-msg { margin: 10px 0 0; font-weight: 600; min-height: 1.5em; }
.form-msg.ok { color: #1b7a34; }
.form-msg.err { color: #b42318; }

.foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 26px 16px calc(26px + env(safe-area-inset-bottom)); font-size: .85rem; color: var(--ink2); }
.foot a { color: var(--ink2); }
.foot img { height: 22px; width: auto; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; font-size: .9rem; z-index: 10; box-shadow: var(--shadow); }

/* ---------- pills ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 99px; border: 2px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.pill.ghost { background: #fff; color: var(--brand); }
.pill.big { min-height: 56px; font-size: 1.05rem; padding: 12px 24px; }
.pill svg { width: 20px; height: 20px; }

/* ---------- home / docs ---------- */
.home, .doc { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.home-hero, .doc-hero { text-align: center; padding: 36px 0 18px; }
.home-hero img { height: auto; width: 280px; }
.home-hero h1, .doc-hero h1 { margin: 14px 0 6px; font-size: 1.9rem; }
.home-hero p { color: var(--ink2); margin: 0 auto; max-width: 520px; }
.cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px !important; }
.dir { display: grid; gap: 14px; grid-template-columns: 1fr; padding-bottom: 8px; }
.grp { background: #fff; border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow); border-top: 4px solid var(--brand); }
.grp h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.05rem; }
.grp h2 img { height: 36px; width: auto; }
.grp ul { list-style: none; margin: 0; padding: 0; }
.grp li a { display: flex; flex-direction: column; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.grp li:last-child a { border-bottom: 0; }
.grp li span { font-size: .85rem; color: var(--ink2); }
.grp li a:hover strong { color: var(--brand); }
.doc section { background: #fff; border-radius: var(--r); padding: 18px 18px 8px; margin-bottom: 14px; box-shadow: var(--shadow); }
.doc h2 { margin: 0 0 8px; font-size: 1.15rem; }
.doc ol, .doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.center { text-align: center; padding-top: 18vh; }
@media (min-width: 760px) { .dir { grid-template-columns: 1fr 1fr; } .card { min-height: auto; margin: 28px auto; border-radius: 24px; overflow: hidden; } }

/* ---------- My Card (PWA) ---------- */
.page-me { background: #fff; }
.me { max-width: 480px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; min-height: 100vh; min-height: 100dvh; }
.me-loading { padding-top: 30vh; color: var(--ink2); }
.me-signin { padding-top: 12vh; }
.me-signin img { width: 260px; height: auto; }
.me-signin h1 { margin: 18px 0 6px; }
.me-top { position: relative; display: flex; justify-content: center; align-items: center; min-height: 64px; }
.me-top .me-off { position: absolute; right: 0; top: 0; }
.me-logo { height: 64px; width: auto; max-width: 220px; object-fit: contain; }
.me-off { font-size: .78rem; font-weight: 700; background: #fff3cd; color: #7a5a00; padding: 4px 10px; border-radius: 99px; }
.me-qr { margin: 6px auto 0; width: min(86vw, 360px); aspect-ratio: 1; background: #fff; border-radius: 20px; padding: 6px; box-shadow: 0 0 0 2px #111 inset; }
.me-qr svg { width: 100%; height: 100%; display: block; }
.me-name { font-size: 1.45rem; font-weight: 800; margin: 14px 0 0; }
.me-title { margin: 2px 0 0; color: var(--ink2); }
.me-hint { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 4px; padding: 6px 12px; border-radius: 99px; background: #fff8e1; color: #6b4e00; font-size: .88rem; font-weight: 600; }
.me-hint svg { width: 18px; height: 18px; }
.me-actions { display: grid; gap: 10px; margin-top: 14px; }
.me-more { margin-top: 16px; display: grid; gap: 10px; }
.me-help { text-align: left; background: var(--bg); border-radius: 14px; padding: 10px 14px; }
.me-help summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.me-help ul { padding-left: 1.1em; margin: 6px 0; font-size: .92rem; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.statgrid div { background: var(--bg); border-radius: 12px; padding: 10px 4px; }
.statgrid b { display: block; font-size: 1.3rem; }
.statgrid span { font-size: .78rem; color: var(--ink2); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Connect (social follow buttons) ---------- */
.connect { margin: 14px 14px 0; }
.connect h2 { font-size: 1.05rem; margin: 6px 4px 10px; }
.connect ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.cbtn { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.cbtn:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.06); transform: translateY(-1px); }
.cbtn:active { transform: scale(.98); }
.cbtn .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--brand); flex: none; }
.cbtn .ico svg { width: 20px; height: 20px; }
.cbtn .ct { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cbtn .ct strong { font-size: .92rem; }
.cbtn .ct span { font-size: .8rem; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-facebook .ico { background: #e8f0fe; color: #1877f2; } .c-instagram .ico { background: #fde8f1; color: #d62976; }
.c-linkedin .ico { background: #e7f1fa; color: #0a66c2; } .c-youtube .ico { background: #fdeaea; color: #e00; }
.c-tiktok .ico, .c-x .ico, .c-threads .ico, .c-github .ico { background: #eee; color: #111; }
.c-whatsapp .ico { background: #e7f8ee; color: #128c4b; } .c-telegram .ico { background: #e6f4fb; color: #229ed9; }

/* ---------- My Card: share + edit ---------- */
.me-share { margin-top: 18px; text-align: left; }
.me-share h2, .edit-form h2 { font-size: 1.1rem; margin: 0 0 8px; }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.share-btn { display: grid; place-items: center; min-height: 44px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--brand); color: var(--brand); }
.me-share .pill { width: 100%; }
.me-edit { margin-top: 12px; text-align: left; }
.edit-form { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.edit-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--ink2); }
.edit-form input, .edit-form textarea { padding: 11px 12px; font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #cfd4da; border-radius: 10px; background: #fff; width: 100%; }
.edit-form h3 { margin: 8px 0 0; font-size: 1rem; }
.edit-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.edit-prev { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tint); color: var(--ink2); font-size: .8rem; }
.edit-prev img { width: 100%; height: 100%; object-fit: cover; }
.linkish { border: 0; background: none; color: var(--ink2); text-decoration: underline; font: inherit; cursor: pointer; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.edit-photo label { position: relative; overflow: hidden; }
.soc-list { display: grid; gap: 8px; }
.soc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.soc-row .soc-tag { grid-column: 1 / -1; font-size: .78rem; font-weight: 700; color: var(--brand); }
.soc-row input[type=url] { grid-column: 1 / -1; }
.soc-row input[type=text] { grid-column: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border: 1px solid #cdd2d8; background: #fff; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.btn.small { min-height: 40px; font-size: .85rem; }
.btn.warn { color: #b42318; }
.soc-add { margin-top: 8px; width: 100%; }
.me-foot { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; } .me-foot .linkish { font-size: inherit; color: inherit; }

/* ================= 0.3.0 design system: themes, layouts, dark mode, motion ================= */
.card.t-realm { --brand: #f58214; --accent: #1f5e37; --tint: #fff4e8; }
.card.t-forestx { --brand: #164a2b; --accent: #f58214; --tint: #eef3eb; }
.card.t-navy { --brand: #1F3A68; --accent: #2E9E3E; --tint: #EEF2F8; }
.card.t-forest { --brand: #1F7A4D; --accent: #C9A227; --tint: #EEF7F1; }
.card.t-ocean { --brand: #0B6E99; --accent: #18A0A0; --tint: #EAF5FA; }
.card.t-sunset { --brand: #D9480F; --accent: #C2255C; --tint: #FFF0E8; }
.card.t-plum { --brand: #6B2E8F; --accent: #D6336C; --tint: #F5EEF9; }
.card.t-gold { --brand: #A6781A; --accent: #3B3B3B; --tint: #FBF5E8; }
.card.t-slate { --brand: #334155; --accent: #0EA5E9; --tint: #EFF2F6; }
.card.t-blush { --brand: #C2477A; --accent: #7C5CBF; --tint: #FCEFF5; }
.card.t-mono { --brand: #111111; --accent: #555555; --tint: #F2F2F2; }
.card.t-aussie { --brand: #00843D; --accent: #E0A800; --tint: #EEF8F1; }
.card { --grad: linear-gradient(90deg, var(--accent), var(--brand)); }
.card.b-global:not([class*=" t-"]), .card.t-realm, .card.t-forestx { --grad: linear-gradient(90deg, #2e9e3e, #fbac3e 45%, #f58214); }

/* dark mode: always, or following the phone */
.card.m-dark { --ink: #eef0f3; --ink2: #a9b0ba; --line: #2c323a; --bg: #12161b; --card: #1a1f26; --field: #12161b; --fline: #3a424c; --tint: color-mix(in srgb, var(--brand) 22%, #1a1f26); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .card.m-auto { --ink: #eef0f3; --ink2: #a9b0ba; --line: #2c323a; --bg: #12161b; --card: #1a1f26; --field: #12161b; --fline: #3a424c; --tint: color-mix(in srgb, var(--brand) 22%, #1a1f26); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color: var(--ink); }
  body:has(.card.m-auto) { background: #0b0e12; }
}
body:has(.card.m-dark) { background: #0b0e12; }
.card.m-dark .act .ico, .card.m-dark .cbtn .ico { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.card.m-dark .hero .title { color: color-mix(in srgb, var(--brand) 55%, #fff); }
.card.m-dark .brand-logo { background: #fff; border-radius: 14px; padding: 8px 12px; }
.card.m-dark .send { background: var(--brand); }
.card.m-dark .avatar { border-color: var(--card); }
@media (prefers-color-scheme: dark) {
  .card.m-auto .act .ico, .card.m-auto .cbtn .ico, .card.m-auto .hero .title { color: color-mix(in srgb, var(--brand) 55%, #fff); }
  .card.m-auto .brand-logo { background: #fff; border-radius: 14px; padding: 8px 12px; }
  .card.m-auto .send { background: var(--brand); }
  .card.m-auto .avatar { border-color: var(--card); }
}

/* hero name block */
.hero .who { position: relative; }

/* layout: bold cover */
.l-cover .hero { padding: 0 20px 20px; background: var(--card); }
.l-cover .cover { display: block; width: calc(100% + 40px); margin: 0 -20px; height: 200px; object-fit: cover; }
.l-cover .cover-g { background: linear-gradient(135deg, var(--brand), var(--accent)); }
.l-cover .brand-logo { position: absolute; top: 210px; left: 16px; height: 58px; width: auto; max-width: calc(50% - 84px); margin: 0; object-fit: contain; object-position: left center; box-sizing: border-box; }
.l-cover .avatar { margin-top: -64px; position: relative; }
.l-cover .hero h1 { font-size: 1.85rem; }

/* layout: minimal */
.l-minimal .hero { background: var(--card); text-align: left; display: grid; grid-template-columns: 84px 1fr; column-gap: 16px; align-items: center; padding: 24px 22px 18px; }
.l-minimal .hero::after { height: 1px; background: var(--line); left: 22px; right: 22px; }
.l-minimal .brand-logo { grid-column: 1 / -1; height: 44px; margin: 0 0 18px; max-width: 180px; }
.l-minimal .avatar { width: 84px; height: 84px; border-width: 0; box-shadow: none; margin: 0; }
.l-minimal .avatar-i { font-size: 30px; }
.l-minimal .hero h1 { margin: 0; font-size: 1.45rem; }
.l-minimal .hero .loc { margin-top: 4px; }
.l-minimal .acts { grid-template-columns: 1fr 1fr; }
.l-minimal .act { flex-direction: row; justify-content: flex-start; min-height: 52px; padding: 6px 10px; border: 1px solid var(--line); font-size: .9rem; }
.l-minimal .act .ico { width: 36px; height: 36px; border-radius: 10px; }
.l-minimal .save { border-radius: 10px; }

/* layout: link hub */
.l-links .hero { background: linear-gradient(160deg, var(--tint), var(--card)); }
.l-links .acts { grid-template-columns: 1fr; gap: 8px; padding: 12px 18px 4px; }
.l-links .act { flex-direction: row; justify-content: center; min-height: 54px; border-radius: 99px; border: 2px solid var(--brand); font-size: 1rem; color: var(--ink); }
.l-links .act .ico { width: 28px; height: 28px; background: none; }
.l-links .connect ul { grid-template-columns: 1fr; }
.l-links .cbtn { border-radius: 99px; justify-content: center; border-width: 2px; }
.l-links .cbtn .ct { flex-direction: row; gap: 6px; align-items: baseline; }

/* section header with Follow all */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 4px 10px; }
.sec-head h2 { margin: 0 !important; }
.follow-all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 0; background: var(--brand); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.follow-all svg { width: 18px; height: 18px; }
.cbtn { position: relative; }
.cbtn .done-mark { display: none; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; place-items: center; }
.cbtn .done-mark svg { width: 13px; height: 13px; stroke-width: 3; }
.cbtn.done .done-mark { display: grid; }
.cbtn.done { border-color: var(--accent); }

/* Follow-all dialog */
.fa-dlg, .g-dlg { border: 0; border-radius: 22px; padding: 0; width: min(92vw, 400px); background: var(--card, #fff); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.fa-dlg::backdrop, .g-dlg::backdrop { background: rgba(10,12,16,.55); }
.fa-box { padding: 22px; text-align: center; display: grid; gap: 10px; }
.fa-box h2 { margin: 0; font-size: 1.4rem; }
.fa-step { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.fa-row { display: flex; justify-content: space-between; }
.g-dlg { width: min(96vw, 720px); }
.g-dlg form { display: grid; gap: 10px; padding: 10px; justify-items: center; }
.g-dlg img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 14px; }

/* extra buttons */
.xbtns ul { list-style: none; margin: 14px 14px 0; padding: 0; display: grid; gap: 8px; }
.xbtn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; background: var(--tint); color: var(--ink); text-decoration: none; font-weight: 700; transition: transform .12s ease, filter .12s ease; }
.xbtn:hover { filter: brightness(.97); transform: translateY(-1px); }
.xbtn .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand); color: #fff; flex: none; }
.xbtn .ico svg, .xbtn .go svg { width: 20px; height: 20px; }
.xbtn .xt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.xbtn .go { color: var(--brand); display: grid; }

/* video */
.video, .gallery { margin: 18px 14px 0; }
.video h2, .gallery h2 { font-size: 1.05rem; margin: 0 4px 10px; }
.video p { margin: 6px 4px 0; }
.vfacade { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--brand), var(--accent)); }
.vfacade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vplay { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; }
.vplay svg { width: 44px; height: 44px; }
.vframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; display: block; }

/* gallery */
.gallery ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gthumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--bg); }
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.gthumb:hover img { transform: scale(1.04); }

/* save: check burst */
.save { position: relative; }
.save .saved-mark { display: none; }
.save.saved .saved-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--brand); animation: pop .35s ease; }
.save.saved .saved-mark svg { width: 16px; height: 16px; stroke-width: 3; }
.after-send { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--tint); }
.after-send p { margin: 0 0 8px; font-weight: 600; }
.small-save { min-height: 48px; font-size: 1rem; }

/* motion: card flips in, sections rise in turn (off for reduced motion) */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes flipin { from { opacity: 0; transform: perspective(900px) rotateX(10deg) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .card { animation: flipin .5s cubic-bezier(.2,.8,.2,1) both; }
  .card > section, .card > nav { animation: rise .45s ease both; }
  .card > :nth-child(2) { animation-delay: .08s; } .card > :nth-child(3) { animation-delay: .14s; }
  .card > :nth-child(4) { animation-delay: .2s; } .card > :nth-child(5) { animation-delay: .26s; }
  .card > :nth-child(n+6) { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) { .card, .card > * { animation: none !important; } }

/* ---------- My Card: design editor ---------- */
.sw2.sw-brand { background: linear-gradient(135deg, #E8461E 50%, #2E9E3E 50%); }
.sw2.sw-realm { background: linear-gradient(135deg, #f58214 50%, #1f5e37 50%); }
.sw2.sw-forestx { background: linear-gradient(135deg, #0b2e1a 50%, #f58214 50%); }
.sw2.sw-navy { background: linear-gradient(135deg, #1F3A68 50%, #2E9E3E 50%); }
.sw2.sw-forest { background: linear-gradient(135deg, #1F7A4D 50%, #C9A227 50%); }
.sw2.sw-ocean { background: linear-gradient(135deg, #0B6E99 50%, #18A0A0 50%); }
.sw2.sw-sunset { background: linear-gradient(135deg, #D9480F 50%, #C2255C 50%); }
.sw2.sw-plum { background: linear-gradient(135deg, #6B2E8F 50%, #D6336C 50%); }
.sw2.sw-gold { background: linear-gradient(135deg, #A6781A 50%, #3B3B3B 50%); }
.sw2.sw-slate { background: linear-gradient(135deg, #334155 50%, #0EA5E9 50%); }
.sw2.sw-blush { background: linear-gradient(135deg, #C2477A 50%, #7C5CBF 50%); }
.sw2.sw-mono { background: linear-gradient(135deg, #111111 50%, #555555 50%); }
.sw2.sw-aussie { background: linear-gradient(135deg, #00843D 50%, #E0A800 50%); }
.sw2.sw-brand { background: conic-gradient(var(--brand) 0 50%, var(--accent) 0); }
.design-ed { display: grid; gap: 14px; }
.de-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.de-group legend { font-size: .85rem; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.swatch { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .75rem !important; font-weight: 600; text-align: center; }
.swatch .sw2 { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.swatch:has(input:checked), .laycard:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.swatch:has(input:focus-visible), .laycard:has(input:focus-visible) { outline: 3px solid var(--brand); }
.layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.laycard { position: relative; display: grid; gap: 2px; padding: 10px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; }
.laycard strong { color: var(--ink); font-size: .92rem; }
.lay-ill { display: grid; gap: 4px; height: 70px; padding: 6px; border-radius: 8px; background: var(--bg); margin-bottom: 4px; }
.lay-ill i, .lay-ill b, .lay-ill u { display: block; border-radius: 4px; background: #cfd5dc; }
.lay-classic { grid-template-rows: 26px 1fr 1fr; justify-items: center; } .lay-classic i { width: 26px; border-radius: 50%; background: var(--brand); } .lay-classic b, .lay-classic u { width: 80%; }
.lay-cover { grid-template-rows: 30px 1fr 1fr; } .lay-cover i { background: linear-gradient(135deg, var(--brand), var(--accent)); } .lay-cover b { width: 60%; justify-self: center; }
.lay-minimal { grid-template-columns: 24px 1fr; grid-template-rows: 24px 1fr; } .lay-minimal i { border-radius: 50%; background: var(--brand); } .lay-minimal u { grid-column: 1 / -1; }
.lay-links { grid-template-rows: 1fr 1fr 1fr; } .lay-links i, .lay-links b, .lay-links u { border-radius: 99px; border: 2px solid var(--brand); background: none; }
.cov-prev { display: grid; place-items: center; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: var(--bg); color: var(--ink2); font-size: .85rem; }
.cov-prev img { width: 100%; height: 100%; object-fit: cover; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.de-cover label.pill, .de-gallery label.pill { position: relative; overflow: hidden; }
.de-cover h3, .de-gallery h3, .de-video h3, .de-buttons h3, .de-sections h3, .de-slug h3 { margin: 0 0 6px; font-size: .95rem; }
.de-cover p, .de-gallery p, .de-buttons p, .de-sections p, .de-slug p { margin: 4px 0; }
.g-ed { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-ed li { display: grid; gap: 4px; }
.g-ed img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.de-video, .de-slug { display: grid; gap: 8px; }
.b-list { display: grid; gap: 8px; }
.b-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.b-row select { grid-column: 1; min-height: 40px; border: 1px solid #cfd4da; border-radius: 10px; padding: 6px; font: inherit; background: var(--field); color: var(--ink); }
.b-row input { grid-column: 1 / -1; }
.b-row .btn { grid-row: 1; }
.s-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; }
.s-show { display: flex !important; align-items: center; gap: 8px; color: var(--ink) !important; }
.s-show input { width: 22px !important; height: 22px; flex: none; }
.me-preview { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.mini-h { font-size: .9rem; margin: 12px 0 4px; text-align: left; }
.mini-bars { list-style: none; margin: 0; padding: 0; text-align: left; }
.mini-bars li { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.b-row select { grid-row: 1; }
.edit-form select { min-height: 44px; padding: 8px 10px; font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #cfd4da; border-radius: 10px; background: var(--field); width: 100%; }
.card.m-dark .xbtn .go { color: color-mix(in srgb, var(--brand) 55%, #fff); }

/* ---------- My Card app shell (0.4.0): bottom tabs, leads, tools ---------- */
.page-me .me { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.me-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 480px; margin: 0 auto; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,24,40,.06); }
.me-nav button { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 56px; padding: 6px 2px; border: 0; background: none; border-radius: 14px; font: inherit; font-size: .75rem; font-weight: 700; color: var(--ink2); cursor: pointer; }
.me-nav button svg { width: 24px; height: 24px; }
.me-nav button[aria-selected="true"] { color: var(--brand); background: var(--tint); }
.badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #d92d20; color: #fff; font-size: .7rem; line-height: 20px; }
.me-tab { animation: rise .3s ease both; }
@media (prefers-reduced-motion: reduce) { .me-tab { animation: none; } }
.lead-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; text-align: left; }
.lead-head h2 { margin: 0; font-size: 1.3rem; }
.lead-head .pill { min-height: 42px; padding: 6px 14px; }
#tab-leads > p { text-align: left; }
.lead-add { margin: 10px 0; text-align: left; }
.lead-add h3 { margin: 0; }
.pending-sync { background: #fff8e1; color: #6b4e00; border-radius: 10px; padding: 8px 12px; font-weight: 600; }
.lead-filters { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chipbtn { flex: none; min-height: 36px; padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: .82rem; font-weight: 700; color: var(--ink2); cursor: pointer; }
.chipbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lead-list { display: grid; gap: 10px; text-align: left; }
.lcard { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 14px; padding: 12px; background: #fff; }
.lcard.s-won { border-left-color: #1b7a34; } .lcard.s-lost { border-left-color: #98a2b3; opacity: .85; } .lcard.s-contacted, .lcard.s-meeting { border-left-color: var(--accent); }
.ltop { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ltop > div { display: grid; min-width: 0; }
.ltop strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.lstatus { flex: none; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px; font: inherit; font-size: .82rem; font-weight: 700; background: var(--tint); color: var(--ink); }
.lnote { margin: 8px 0 0; color: var(--ink2); font-size: .92rem; overflow-wrap: anywhere; }
.lcontact { margin: 6px 0 0; overflow-wrap: anywhere; }
.lacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.lacts .share-btn { min-height: 40px; font-size: .8rem; }
.lmore { margin-top: 8px; }
.lmore summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--ink2); min-height: 32px; }
.lmore textarea, .lmore input { width: 100%; padding: 9px 10px; font: inherit; font-size: 16px; border: 1px solid #cfd4da; border-radius: 10px; margin-top: 6px; }
.lmore label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink2); margin-top: 6px; }
.lmore .btn { margin-top: 8px; margin-right: 8px; }
.tool { text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.tool h2 { margin: 0 0 6px; font-size: 1.1rem; }
.tool .row-wrap select { min-height: 44px; border: 1px solid #cfd4da; border-radius: 99px; padding: 6px 12px; font: inherit; background: #fff; }
.sig-prev { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; overflow-x: auto; margin: 8px 0; }
.vb-prev { width: 100%; height: auto; border-radius: 12px; display: block; margin: 8px 0; box-shadow: var(--shadow); }
#tab-tools .me-help, #tab-tools .me-foot { margin-top: 12px; }
.me-nav.five { grid-template-columns: repeat(5, 1fr); }
.card-switch { margin: 0 0 8px; }
.card-switch label { display: inline-flex; align-items: center; gap: 8px; }
.card-switch select, .my-cards input { min-height: 40px; border: 1px solid #cfd4da; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 16px; background: #fff; }
.my-cards input { border-radius: 10px; flex: 1; min-width: 0; }
.tthumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.tslot:empty { display: none; }
.tslot { margin-top: 10px; }
.tslot .edit-form, .team-add .edit-form { padding: 12px; }
.board { margin: 0; padding-left: 1.3em; text-align: left; }
.board li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.board li span { display: block; }
.team-add { display: grid; gap: 12px; text-align: left; }
.bulk ul { padding-left: 1.2em; }
.bad { color: #b42318; }
#tab-team .lead-head span { white-space: nowrap; }

/* ---------- business + waitlist (0.6.0) ---------- */
.biz { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.biz-hero { text-align: center; padding: 48px 0 28px; }
.biz-hero img { width: 220px; height: auto; }
.biz-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; margin: 18px 0 12px; }
.biz-hero h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.biz-hero > p { max-width: 620px; margin: 0 auto; color: var(--ink2); font-size: 1.1rem; }
.biz-hero .cta-row { margin-top: 22px !important; }
.biz-feats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 18px 0 30px; }
.biz-feats article { background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.biz-feats .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--brand); }
.biz-feats h2 { font-size: 1.1rem; margin: 12px 0 4px; }
.biz-feats p { margin: 0; color: var(--ink2); }
.biz-steps { background: #fff; border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); margin-bottom: 30px; }
.biz-steps h2, .plans h2, .biz-faq h2 { margin: 0 0 12px; font-size: 1.5rem; text-align: center; }
.biz-steps ol { list-style: none; counter-reset: s; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; padding: 0; }
.biz-steps li { counter-increment: s; display: grid; gap: 2px; padding-left: 52px; position: relative; min-height: 44px; }
.biz-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; }
.biz-steps li span { color: var(--ink2); }
.plans { margin-bottom: 30px; text-align: center; }
.plan-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; text-align: left; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); border: 2px solid transparent; }
.plan.pop { border-color: var(--brand); }
.pop-tag { position: absolute; top: -12px; left: 20px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.plan h3 { margin: 0; font-size: 1.3rem; }
.plan .price { font-size: 1.4rem; font-weight: 800; margin: 8px 0; }
.plan ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; flex: 1; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: .92rem; }
.plan li svg { width: 18px; height: 18px; color: var(--accent); }
.biz-faq { max-width: 720px; margin: 0 auto 20px; }
.biz-faq details { background: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--shadow); }
.biz-faq summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.join select { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit; font-size: 16px; border: 1px solid #cfd4da; border-radius: 10px; background: #fff; }
.center-row { text-align: center; }
.dir-search { max-width: 460px; margin: 16px auto 0 !important; }
.dir-search input { width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid #cfd4da; border-radius: 99px; font: inherit; font-size: 16px; }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- accessibility: text on / in brand colours meets WCAG AA (4.5:1) ---------- */
.card, .page-me, .b-global { --brand-d: color-mix(in srgb, var(--brand) 70%, #000); }
.save, .pill, .follow-all, .chipbtn.on, .xbtn .ico, .send:not(.card .send), .plan .pop-tag, .biz-steps li::before { background-color: var(--brand-d); }
.pill { border-color: var(--brand-d); }
.pill.ghost { background: #fff; color: var(--brand-d); }
.hero .title, .xbtn .go, .soc-row .soc-tag, .me-nav button[aria-selected="true"], .details .ico, .act .ico, .cbtn .ico { color: var(--brand-d); }
.card.m-dark .save, .card.m-dark .follow-all { background-color: var(--brand); }
.me-help a, .foot a, .consent a { color: var(--ink); }
.plan ul { align-content: start; }
.cf-turnstile { margin: 4px 0 10px; min-height: 65px; }

/* ---------- REALM Smart Contact site chrome (0.7.0) ---------- */
.site-top { background: var(--forest); color: #fff; position: relative; }
.site-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }
.site-in { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.site-logo img { display: block; height: 40px; width: auto; }
.site-top nav { display: flex; gap: 6px; }
.site-top nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; padding: 8px 12px; border-radius: 99px; }
.site-top nav a:hover, .site-top nav a[aria-current] { background: rgba(255,255,255,.12); }
.site-top nav a:last-child { background: var(--brand); color: var(--forest); }
@media (max-width: 420px) { .site-logo img { height: 34px; } .site-top nav a { padding: 8px 10px; font-size: .85rem; } }
.page { background: var(--bg); }
.home-hero h1, .doc-hero h1, .biz-hero h1, .hero h1 { letter-spacing: -.02em; font-weight: 800; }
.biz-hero { background: radial-gradient(1200px 400px at 50% -10%, var(--forest2), var(--forest)); color: #fff; border-radius: 0 0 28px 28px; margin: 0 -16px; padding: 40px 20px 34px; }
.biz-hero > p { color: rgba(255,255,255,.86); }
.biz-hero h1 span { background: linear-gradient(90deg, var(--sun), var(--brand)); -webkit-background-clip: text; background-clip: text; }
.biz-hero .muted { color: rgba(255,255,255,.75) !important; }
.biz-hero .pill.ghost { background: transparent; color: #fff; border-color: #fff; }
.biz-hero .pill:not(.ghost) { background: var(--brand); border-color: var(--brand); color: var(--forest); }
.biz-icon { width: 88px; height: 88px; display: block; margin: 0 auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.35)); }
.foot .made-with { font-weight: 700; color: var(--ink2); }
.me-signin img { width: 260px; }
.biz-hero h1 span { padding-right: .06em; }

/* ---------- 0.8.0: owner bar, save sheet, company socials ---------- */
.owner-bar { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 99px; background: var(--forest, #0b2e1a); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.owner-bar svg { width: 18px; height: 18px; }
.foot .signin-link { color: var(--ink2); font-size: .85rem; }
.save-dlg .fa-box { text-align: center; }
.save-ok { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--accent); color: #fff; animation: pop .35s ease; }
.save-ok svg { width: 30px; height: 30px; stroke-width: 3; }
.save-follow { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; max-height: 46vh; overflow: auto; }
.save-follow .cbtn { min-height: 52px; }
.co-socials { margin-top: 18px; }
.l-cover .cover { max-width: none; }
.save-follow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.save-follow .cbtn, .connect .cbtn { min-width: 0; }
.follow-all { white-space: nowrap; flex: none; }
.sites h2 { font-size: 1.05rem; margin: 0 4px 10px; }
.sites ul { margin-top: 0; }
.xbtn .xt small { display: block; font-weight: 500; font-size: .78rem; color: var(--ink2); }
.xbtns.sites { margin-top: 18px; }
.xbtns.sites ul { margin: 0 14px; }
.xbtns.sites h2 { margin: 0 18px 10px; }
.welcome-note { background: #e7f8ee; color: #135c2e; border-radius: 14px; padding: 12px 14px; font-weight: 600; text-align: left; }
.connect ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.connect li { min-width: 0; }
.l-links .connect ul { grid-template-columns: minmax(0, 1fr); }
.cbtn .ct span { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* ---------- 0.10.0: one designed button per platform ---------- */
.p-facebook { --pc: #1877f2; --pc2: #0b5fcc; }
.p-instagram { --pc: #dd2a7b; --pc2: #8134af; --pbg: linear-gradient(135deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 78%, #4f5bd5 100%); }
.p-linkedin { --pc: #0a66c2; --pc2: #004182; }
.p-youtube { --pc: #ff0000; --pc2: #c00000; }
.p-tiktok { --pc: #111; --pc2: #000; --pbg: linear-gradient(135deg, #111 0%, #111 60%, #25f4ee 60%, #25f4ee 70%, #fe2c55 70%); }
.p-x, .p-threads, .p-github { --pc: #111; --pc2: #000; }
.p-whatsapp { --pc: #25d366; --pc2: #128c7e; }
.p-telegram { --pc: #229ed9; --pc2: #1b7fb0; }
.p-messenger { --pc: #0084ff; --pc2: #a334fa; }
.p-viber { --pc: #7360f2; --pc2: #59267c; }
.p-pinterest { --pc: #e60023; --pc2: #ad081b; }
.p-snapchat { --pc: #fffc00; --pc2: #e6e300; --pink: #111; }
.p-google { --pc: #4285f4; --pc2: #34a853; }
.p-website { --pc: var(--brand-d, #a84f00); --pc2: var(--forest, #0b2e1a); }

.ptiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ptiles li { min-width: 0; }
.ptile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; min-height: 104px; padding: 12px; border: 0; border-radius: 18px; color: #fff; text-align: left; text-decoration: none; cursor: pointer; font: inherit;
  background: var(--pbg, linear-gradient(140deg, var(--pc) 0%, var(--pc2) 100%)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.25); overflow: hidden; transition: transform .14s ease, box-shadow .14s ease; }
.ptile::after { content: ""; position: absolute; right: -24px; top: -24px; width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ptile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--pc) 45%, transparent); }
.ptile:active { transform: scale(.97); }
.ptile .pico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.2); backdrop-filter: blur(2px); }
.ptile .pico svg { width: 22px; height: 22px; stroke-width: 2.2; }
.ptile .pt { display: grid; line-height: 1.15; min-width: 0; position: relative; z-index: 1; }
.ptile .pt strong { font-size: .98rem; font-weight: 800; }
.ptile .pt span { font-size: .78rem; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptile .pcount { position: absolute; top: 10px; right: 10px; z-index: 1; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #fff; color: var(--pc); font-size: .78rem; font-weight: 900; line-height: 24px; text-align: center; }
.ptile .done-mark { display: none; position: absolute; top: 10px; right: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #1b7a34; place-items: center; }
.ptile .done-mark svg { width: 15px; height: 15px; stroke-width: 3; }
.ptile.done .done-mark { display: grid; }
.ptile.done .pcount { display: none; }
.p-snapchat.ptile { color: #111; }
@media (max-width: 360px) { .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.l-links .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.connect .sec-head h2 { font-size: 1.05rem; }

/* platform sheet */
.plat-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; text-align: left; max-height: 52vh; overflow: auto; }
.prow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--card, #fff); }
.prow .pico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--pbg, linear-gradient(140deg, var(--pc), var(--pc2))); flex: none; }
.prow .pico svg { width: 20px; height: 20px; }
.prow-t { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.prow-go { flex: none; padding: 6px 12px; border-radius: 99px; background: var(--pc); color: #fff; font-size: .82rem; font-weight: 800; }
.p-snapchat .prow-go { color: #111; }
.prow.done { border-color: #1b7a34; }
.prow.done .prow-go { background: #1b7a34; }
.prow.done .prow-go::before { content: "✓ "; }
#platAll { background: var(--pbg, linear-gradient(140deg, var(--pc, var(--brand-d)), var(--pc2, var(--brand-d)))); border: 0; color: #fff; }
.fa-go { background: var(--pbg, linear-gradient(140deg, var(--pc, var(--brand-d)), var(--pc2, var(--brand-d)))) !important; }
.save-follow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.save-follow .ptile { min-height: 88px; padding: 10px; }
.save-follow .ptile .pico { width: 32px; height: 32px; }
.insight { text-align: left; margin: 4px 0 8px; }
.ibars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 96px; margin: 6px 0; }
.ibars.hours { grid-template-columns: repeat(24, 1fr); gap: 2px; height: 70px; }
.ib { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; min-width: 0; }
.ib i { display: block; align-self: end; min-height: 3px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--brand) 35%, #fff); }
.ib.top i { background: var(--brand-d, var(--brand)); }
.ib span { font-size: .68rem; color: var(--ink2); text-align: center; white-space: nowrap; overflow: visible; }
.ib.sm span { font-size: .6rem; }
.help details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.help details:last-child { border-bottom: 0; }
.help summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.help details div { padding: 0 0 8px; color: var(--ink2); }
@media (max-width: 420px) { .site-top nav a:first-child { display: none; } }

/* ---------- 0.10.0: card app, swipe for QR ---------- */
.owner-bar { display: flex; gap: 6px; padding: 0; background: none; box-shadow: none; }
.owner-bar a, .owner-bar button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 99px; background: var(--forest, #0b2e1a); color: #fff; font: inherit; font-weight: 800; font-size: .88rem; text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.owner-bar button { background: var(--brand-d, #a84f00); }
.owner-bar svg { width: 18px; height: 18px; }
.qr-fab { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 25; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 20px; border: 0; border-radius: 99px; background: var(--forest, #0b2e1a); color: #fff; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.qr-fab svg { width: 22px; height: 22px; }
.app-mode .foot { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.qr-dlg { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--forest, #0b2e1a); color: #fff; }
.qr-dlg::backdrop { background: var(--forest, #0b2e1a); }
.qr-dlg[open] { display: flex; flex-direction: column; }
.qr-deck { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qr-deck::-webkit-scrollbar { display: none; }
.qr-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; text-align: center; }
.qr-kicker { margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; color: var(--sun, #fbac3e); }
.qr-box { width: min(84vw, 400px, 56vh); aspect-ratio: 1; background: #fff; border-radius: 22px; padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.qr-box svg { display: block; width: 100%; height: 100%; }
.qr-name { margin: 16px 0 2px; font-size: 1.5rem; font-weight: 800; }
.qr-sub { margin: 0; opacity: .85; }
.qr-help { margin: 12px auto 0; max-width: 340px; font-size: .88rem; opacity: .75; }
.qr-dots { display: flex; justify-content: center; gap: 8px; padding: 6px 0; }
.qr-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.qr-dots i.on { width: 22px; border-radius: 99px; background: var(--sun, #fbac3e); }
.qr-dlg form { display: flex; justify-content: center; padding: 6px 0 calc(16px + env(safe-area-inset-bottom)); }
.qr-close { min-height: 48px; padding: 10px 22px; border: 2px solid rgba(255,255,255,.6); border-radius: 99px; background: none; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.p-tiktok { --pbg: radial-gradient(circle at 110% 115%, #fe2c55 0, transparent 46%), radial-gradient(circle at -10% 120%, rgba(37,244,238,.55) 0, transparent 42%), #111; }
.qr-switch { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; }
#qrModeHelp { margin: 6px 0 0; }

/* 0.10.0: "Add this card to your home screen" row + steps dialog */
.install-row{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin:0 0 .75rem;padding:.7rem 1rem;border-radius:14px;border:2px dashed color-mix(in srgb,var(--brand) 45%,transparent);background:color-mix(in srgb,var(--brand) 6%,transparent);color:var(--brand-d,var(--brand));font:inherit;font-weight:700;cursor:pointer}
.install-row[hidden]{display:none}
.install-row svg{width:20px;height:20px;flex:none}
.install-row:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.inst-dlg .inst-ico{display:block;margin:0 auto .5rem;border-radius:16px}
.inst-steps{text-align:left;margin:.5rem 0 1rem;padding-left:1.3rem;line-height:1.5}
.inst-steps li{margin:.35rem 0}
.js-qr .ico{background:color-mix(in srgb,var(--accent,var(--brand)) 14%,transparent)}

/* 0.10.1: neon themes - always a night card so the neon glows; dark text on neon buttons for contrast */
.card.t-neongreen { --brand: #39ff14; --brand-d: #39ff14; --accent: #00e5ff; --glow: rgba(57,255,20,.55); }
.card.t-neonorange { --brand: #ff7a00; --brand-d: #ff9a3c; --accent: #ffd400; --glow: rgba(255,122,0,.55); }
.card.t-neongreen, .card.t-neonorange { --on-brand: #06120a; --ink: #f2f5f2; --ink2: #b4bcb6; --line: #26302a; --bg: #07090a; --card: #0d1110; --field: #07090a; --fline: #34403a; --tint: color-mix(in srgb, var(--brand) 14%, #0d1110); --grad: linear-gradient(90deg, var(--brand), var(--accent)); --shadow: 0 0 0 1px #1c2420, 0 10px 30px rgba(0,0,0,.5); color: var(--ink); }
body:has(.card.t-neongreen), body:has(.card.t-neonorange) { background: #07090a; }
.card.t-neonorange { --on-brand: #160900; }
.card.t-neongreen .save, .card.t-neonorange .save, .card.t-neongreen .follow-all, .card.t-neonorange .follow-all,
.card.t-neongreen .xbtn .ico, .card.t-neonorange .xbtn .ico, .card.t-neongreen .avatar-i, .card.t-neonorange .avatar-i,
.card.t-neongreen .send, .card.t-neonorange .send, .card.t-neongreen .pill:not(.ghost), .card.t-neonorange .pill:not(.ghost), .card.t-neongreen .chipbtn.on, .card.t-neonorange .chipbtn.on { background: var(--brand); color: var(--on-brand); }
.card.t-neongreen .save, .card.t-neonorange .save { box-shadow: 0 0 22px var(--glow), 0 0 2px var(--brand); }
.card.t-neongreen .act .ico, .card.t-neonorange .act .ico, .card.t-neongreen .cbtn .ico, .card.t-neonorange .cbtn .ico { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 60%, transparent), 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent); }
.card.t-neongreen .hero .title, .card.t-neonorange .hero .title { color: var(--brand); text-shadow: 0 0 12px var(--glow); }
.card.t-neongreen .avatar, .card.t-neonorange .avatar { border-color: var(--brand); box-shadow: 0 0 24px var(--glow); }
.card.t-neongreen .install-row, .card.t-neonorange .install-row { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.card.t-neongreen .brand-logo, .card.t-neonorange .brand-logo { background: #fff; border-radius: 12px; padding: 6px 10px; }
.card.t-neongreen a:not(.save):not(.ptile):not(.plink), .card.t-neonorange a:not(.save):not(.ptile):not(.plink) { color: inherit; }
.card.t-neongreen h2, .card.t-neonorange h2 { color: var(--ink); }
.card.t-neongreen :focus-visible, .card.t-neonorange :focus-visible { outline-color: var(--brand); }
.sw2.sw-neongreen { background: linear-gradient(135deg, #0d1110 50%, #39ff14 50%); box-shadow: 0 0 10px rgba(57,255,20,.6); }
.sw2.sw-neonorange { background: linear-gradient(135deg, #0d1110 50%, #ff7a00 50%); box-shadow: 0 0 10px rgba(255,122,0,.6); }
.card.m-dark .install-row { color: var(--ink); }
@media (prefers-color-scheme: dark) { .card.m-auto .install-row { color: var(--ink); } }

/* ================= 0.11.0 public homepage ================= */
.lp { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.lp h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; text-align: center; margin: 0 0 18px; }
.lp-hero { display: grid; gap: 28px; align-items: center; margin: 0 -16px; padding: 40px 20px 48px; color: #fff; background: radial-gradient(900px 420px at 85% 10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%), radial-gradient(1200px 500px at 10% -20%, var(--forest2), var(--forest)); border-radius: 0 0 32px 32px; overflow: hidden; }
.lp-copy { min-width: 0; text-align: center; }
.lp-kicker { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--sun); font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.lp-hero h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; margin: 0 0 14px; }
.lp-hero h1 span { background: linear-gradient(90deg, var(--sun), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; margin-right: -.08em; }
.lp-sub { font-size: 1.1rem; color: rgba(255,255,255,.88); max-width: 540px; margin: 0 auto; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 10px; }
.lp-hero .pill { background: var(--brand); border-color: var(--brand); color: #1a0d00; }
.lp-hero .pill.ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.lp-note { margin: 0; font-size: .9rem; color: rgba(255,255,255,.7); }
@media (min-width: 900px) {
  .lp-hero { grid-template-columns: 1.15fr .85fr; padding: 64px 48px 72px; }
  .lp-copy { text-align: left; }
  .lp-sub { margin: 0; }
  .lp-cta { justify-content: flex-start; }
}

/* phone mock-up (pure CSS) */
.lp-phone { position: relative; justify-self: center; width: 250px; margin-bottom: 14px; }
.ph-frame { width: 250px; padding: 10px; border-radius: 40px; background: #0a0f0c; box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.45); transform: rotate(-3deg); }
.ph-screen { border-radius: 30px; overflow: hidden; background: #fff; color: var(--ink); text-align: center; padding-bottom: 16px; }
.ph-cover { height: 92px; background: linear-gradient(135deg, #2e9e3e, #fbac3e 55%, #f58214); }
.ph-avatar { width: 74px; height: 74px; margin: -38px auto 6px; border-radius: 50%; border: 4px solid #fff; background: var(--forest2); color: #fff; display: grid; place-items: center; }
.ph-avatar svg { width: 34px; height: 34px; }
.ph-name { margin: 0; font-weight: 800; font-size: 1.1rem; }
.ph-title { margin: 0 0 10px; font-size: .78rem; color: var(--brand-d); font-weight: 700; }
.ph-save { margin: 0 14px; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: 10px; background: var(--forest2); color: #fff; font-weight: 700; font-size: .85rem; }
.ph-save svg, .ph-acts svg, .ph-tiles svg { width: 16px; height: 16px; }
.ph-acts { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.ph-acts span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--forest2); }
.ph-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 12px; }
.ph-tiles span { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px; color: #fff; }
.ph-tiles b { font-size: .6rem; }
.ph-tiles .t-fb { background: #0f5fc9; } .ph-tiles .t-ig { background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); } .ph-tiles .t-li { background: #0a66c2; }
.ph-qr { position: absolute; left: -22px; bottom: -14px; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: var(--sun); color: #1a0d00; font-weight: 800; font-size: .8rem; box-shadow: 0 10px 24px rgba(0,0,0,.3); transform: rotate(-4deg); }
.ph-qr svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .ph-frame { animation: lpFloat 6s ease-in-out infinite; }
  @keyframes lpFloat { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
}

.lp-team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 0 8px; }
.lp-team p { margin: 0; color: var(--ink2); max-width: 560px; }
.lp-team a { color: var(--brand-d); font-weight: 700; }
.faces { display: flex; list-style: none; margin: 0; padding: 0; }
.faces li + li { margin-left: -12px; }
.faces img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg, #f7faf5); background: var(--tint); }

.lp-steps { margin: 34px 0; }
.lp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lp-steps li { display: grid; gap: 4px; background: #fff; border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.lp-steps .n { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--forest2); color: #fff; font-weight: 800; margin-bottom: 6px; }
.lp-steps li > span:last-child { color: var(--ink2); }
.lp-feats { margin: 0 0 34px; }
.lp-feats .biz-feats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; }
.lp-feats h3 { font-size: 1.1rem; margin: 12px 0 4px; }
.lp-feats .ico { color: var(--brand-d); }
.lp-band { text-align: center; padding: 36px 20px; margin: 0 0 34px; border-radius: 28px; background: radial-gradient(800px 300px at 50% 0%, var(--forest2), var(--forest)); color: #fff; }
.lp-band p { color: rgba(255,255,255,.86); max-width: 560px; margin: 0 auto; }
.lp-band .pill { background: var(--brand); border-color: var(--brand); color: #1a0d00; }
.lp-band .pill.ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
@media (max-width: 640px) {
  .lp-steps li { grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .lp-steps .n { grid-row: span 2; margin: 0; }
  .lp-feats .biz-feats article { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; }
  .lp-feats .biz-feats .ico { grid-row: span 2; width: 44px; height: 44px; }
  .lp-feats h3 { margin: 0 0 2px; }
  .lp-phone { transform: scale(.92); margin-top: -8px; }
}

/* ================= 0.12.0 sign-in / sign-up ================= */
.auth { max-width: 520px; }
.auth-box { text-align: center; background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 28px 22px; margin: 28px 0; }
.auth-box h1 { margin: 10px 0 6px; font-size: 1.7rem; letter-spacing: -.02em; }
.auth-box .lead { text-align: left; margin-top: 16px; }
.pill.wide { width: 100%; margin-top: 14px; }
.auth-alt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.auth-alt p { margin: 0; }
.auth-alt a { color: var(--brand-d); font-weight: 700; }
.pk-explain { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; background: var(--tint); border-radius: 14px; padding: 12px 14px; margin: 6px 0 4px; }
.pk-explain svg { width: 22px; height: 22px; color: var(--forest2); margin-top: 2px; }
.pk-explain p { margin: 0; font-size: .92rem; }
.center-row { text-align: center; }
.me-signin .pill + .pill { margin-top: 10px; }
.pklist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.pklist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pklist li > div { display: grid; min-width: 0; }