/* Theme: midnight navy, warm gold, soft glass. Large type, generous tap targets, calm motion. */
:root {
  --ink: #0b1b33; --ink-2: #47566e; --ink-3: #7c889b; --line: #e3e8f0; --bg: #f6f8fb; --card: #fff;
  --navy: #0a2540; --navy-2: #103a66; --navy-3: #1b5a99; --brand: #124a82; --brand-soft: #e9f1fb;
  --gold: #ffb020; --gold-2: #ff8f1f; --gold-soft: #fff5e0; --gold-ink: #7a4a00;
  --wa: #12925a; --wa-deep: #0c7446; --ok: #0d7a52; --ok-soft: #e3f6ec; --danger: #b3261e; --danger-soft: #fdecea;
  --r: 18px; --r-sm: 12px;
  --shadow-1: 0 1px 2px rgba(11,27,51,.05), 0 4px 14px rgba(11,27,51,.06);
  --shadow-2: 0 2px 6px rgba(11,27,51,.06), 0 18px 44px rgba(11,27,51,.12);
  --font: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
[lang="hi"] body, body [lang="hi"] { line-height: 1.8; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
h1 { font-size: clamp(2rem, 5.2vw, 3.35rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; }
[lang="hi"] h1 { line-height: 1.32; letter-spacing: 0; }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
[lang="hi"] h2 { line-height: 1.45; letter-spacing: 0; }
h3 { font-size: 1.08rem; line-height: 1.4; font-weight: 700; }
ul, ol { list-style: none; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 10px 16px; border-radius: 10px; z-index: 99; }
.skip:focus { left: 8px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow-wrap { width: min(740px, 100% - 32px); }
.lead { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; }
.fine { color: var(--ink-3); font-size: .86rem; }
.link { font-weight: 700; white-space: nowrap; }
.kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 8px; }
.empty { display: grid; gap: 14px; justify-items: center; color: var(--ink-2); background: var(--card); border: 1.5px dashed #cfd8e6; border-radius: var(--r); padding: 36px 20px; text-align: center; }
.empty > .ico { width: 40px; height: 40px; color: var(--navy-3); background: var(--brand-soft); border-radius: 14px; padding: 9px; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(227,232,240,.8); transition: box-shadow .2s; }
.top.stuck { box-shadow: 0 6px 24px rgba(11,27,51,.08); }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; flex: none; position: relative; background: linear-gradient(135deg, var(--navy) 0 52%, transparent 52%), linear-gradient(135deg, var(--gold), var(--gold-2)); box-shadow: 0 4px 12px rgba(255,143,31,.35); }
.brand-lg { font-size: 1.7rem; } .brand-lg .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
.nav { display: flex; gap: 4px; margin-left: 14px; }
.nav a { padding: 9px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: .94rem; transition: background .15s, color .15s; }
.nav a:hover, .nav a.on { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.top-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--ink); background: #fff; transition: border-color .15s; }
.lang:hover { border-color: var(--navy-3); text-decoration: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 14px; font: 700 1rem/1.2 var(--font); cursor: pointer; text-align: center; transition: transform .12s, box-shadow .2s, background .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); } .btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; box-shadow: 0 8px 20px rgba(10,37,64,.25); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(10,37,64,.32); }
.btn-accent { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; box-shadow: 0 10px 24px rgba(255,143,31,.35); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-wa { background: linear-gradient(135deg, #17a868, var(--wa)); color: #fff; box-shadow: 0 8px 20px rgba(18,146,90,.28); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .92rem; border-radius: 999px; box-shadow: none; }
.btn-lg { min-height: 58px; font-size: 1.08rem; padding: 0 30px; border-radius: 16px; }
.btn-block { width: 100%; }

/* Hero */
.hero { position: relative; color: #fff; padding: 56px 0 0; isolation: isolate;
  background: radial-gradient(900px 520px at 88% -8%, rgba(255,176,32,.22), transparent 62%), radial-gradient(800px 600px at -10% 20%, rgba(27,90,153,.55), transparent 60%), linear-gradient(165deg, #071a30, var(--navy) 45%, var(--navy-2)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000 0, transparent 78%); -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 78%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #ffe2a8; font-weight: 700; font-size: .86rem; margin-bottom: 18px; }
.hero h1 { max-width: 18ch; background: linear-gradient(180deg, #fff 40%, #cfe0f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { color: #c9d9ec; margin-top: 16px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.choice { position: relative; display: grid; gap: 4px; background: #fff; color: var(--ink); border-radius: var(--r); padding: 20px 20px 18px; box-shadow: var(--shadow-2); border: 2px solid transparent; transition: transform .18s, border-color .18s, box-shadow .18s; overflow: hidden; }
.choice::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--brand-soft); opacity: .7; transition: transform .25s; }
.choice-alt::after { background: var(--gold-soft); }
.choice:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--gold); } .choice:hover::after { transform: scale(1.25); }
.choice-ico { width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 8px 18px rgba(10,37,64,.25); }
.choice-alt .choice-ico { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; box-shadow: 0 8px 18px rgba(255,143,31,.35); }
.choice-ico .ico { width: 24px; height: 24px; }
.choice strong { font-size: 1.16rem; line-height: 1.35; font-weight: 800; position: relative; z-index: 1; }
.choice > span:not(.choice-ico) { color: var(--ink-2); font-size: .93rem; line-height: 1.5; position: relative; z-index: 1; }
.choice-go { position: absolute; right: 16px; top: 18px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--navy); transition: transform .18s, background .18s; z-index: 1; }
.choice:hover .choice-go { transform: translateX(4px); background: var(--gold); }

/* Hero illustration: an example match */
.hero-art { position: relative; display: grid; gap: 12px; padding: 22px; border-radius: 26px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: rotate(1.2deg); }
.art-tag { position: absolute; top: -12px; right: 18px; background: var(--gold); color: #2a1700; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.art-card { background: #fff; color: var(--ink); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.art-card small { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-3); }
.art-want small { color: var(--gold-ink); }
.art-card strong { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; } .art-card span { color: var(--ink-2); font-size: .88rem; }
.art-want { animation: float 6s ease-in-out infinite; } .art-have { animation: float 6s ease-in-out -3s infinite; }
.art-link { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.art-link span { height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 6px, transparent 6px 12px); }
.art-link b { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; padding: 7px 14px; border-radius: 999px; font-size: .86rem; box-shadow: 0 0 0 6px rgba(255,176,32,.18); }
.art-why { display: grid; gap: 6px; margin-top: 4px; }
.art-why li { color: #dbe7f5; font-size: .88rem; padding-left: 24px; position: relative; }
.art-why li::before { content: "✓"; position: absolute; left: 0; width: 17px; height: 17px; border-radius: 50%; background: rgba(23,168,104,.9); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; top: .28em; }
@keyframes float { 50% { transform: translateY(-6px); } }

.hero-search { position: relative; background: #fff; color: var(--ink); border-radius: 22px; padding: 22px 24px 24px; margin-top: 44px; margin-bottom: -46px; box-shadow: var(--shadow-2); border: 1px solid var(--line); z-index: 2; }
.hero-search h2 { font-size: 1.12rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.hero-search h2 .ico { color: var(--gold-2); }

/* Search + fields */
.search-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; }
.search-row .btn { flex: none; }
.field { display: grid; gap: 6px; min-width: 0; flex: 1 1 180px; }
.field.grow { flex: 2 1 280px; } .field.narrow { flex: 0 1 170px; max-width: 220px; }
.field > span, .ask > span, .sub { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
.field small { color: var(--ok); font-weight: 700; min-height: 1.2em; font-size: .85rem; }
input[type=text], input[type=tel], input[type=number], input[type=date], select, textarea { width: 100%; min-height: 50px; padding: 11px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: 500 1rem/1.4 var(--font); color: var(--ink); background: #fbfcfe; appearance: none; transition: border-color .15s, box-shadow .15s, background .15s; }
textarea { min-height: 88px; resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2347566e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; padding-right: 40px; }
input:hover, select:hover, textarea:hover { border-color: #c6d2e3; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-3); background: #fff; box-shadow: 0 0 0 4px rgba(27,90,153,.14); }
::placeholder { color: #9aa6b8; }
.seg { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 4px; border: 1px solid var(--line); }
.seg label { cursor: pointer; } .seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 8px 24px; border-radius: 999px; font-weight: 700; color: var(--ink-2); font-size: .94rem; transition: all .15s; }
.seg input:checked + span { background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(10,37,64,.25); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Place picker */
.picker { position: relative; }
.picker-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); max-height: 320px; overflow: auto; padding: 6px; }
.picker-list li { padding: 10px 12px; cursor: pointer; display: grid; gap: 1px; border-radius: 10px; }
.picker-list li.on, .picker-list li:hover { background: var(--brand-soft); }
.picker-list span { color: var(--ink-3); font-size: .84rem; }
.picker-list em { font-style: normal; font-weight: 700; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-3); background: var(--brand-soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; } .picked:not(:empty) { margin-bottom: 10px; }
.picked li { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border-radius: 999px; padding: 6px 6px 6px 14px; font-weight: 600; font-size: .9rem; }
.picked button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }

/* Sections */
.band { padding: 72px 0; background: #fff; } .band-plain { background: var(--bg); }
.band-types { padding-top: 104px; }
.band h2 { margin-bottom: 26px; }
.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.band-head h2 { margin-bottom: 6px; } .band-head p:not(.kicker) { color: var(--ink-2); }
.types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.type { display: grid; justify-items: center; gap: 12px; padding: 22px 12px; border-radius: var(--r); background: var(--bg); border: 1.5px solid transparent; color: var(--ink); font-weight: 700; text-align: center; transition: all .18s; }
.type span { width: 58px; height: 58px; border-radius: 18px; background: #fff; display: grid; place-items: center; color: var(--navy-2); box-shadow: var(--shadow-1); transition: all .18s; }
.type .ico { width: 28px; height: 28px; }
.type:hover { text-decoration: none; background: #fff; border-color: var(--gold); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.type:hover span { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; }
.steps, .trio, .grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps { counter-reset: step; position: relative; }
.steps li { position: relative; background: var(--bg); border-radius: var(--r); padding: 26px 24px; border: 1px solid var(--line); counter-increment: step; }
.steps li::after { content: "0" counter(step); position: absolute; right: 20px; top: 14px; font-size: 2.6rem; font-weight: 800; color: rgba(16,58,102,.08); line-height: 1; }
.steps p, .trio p { color: var(--ink-2); margin-top: 8px; font-size: .96rem; }
.step-n { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; margin-bottom: 16px; box-shadow: 0 8px 18px rgba(10,37,64,.22); }
.step-n .ico { width: 24px; height: 24px; }
.band-dark { background: radial-gradient(700px 400px at 100% 0, rgba(255,176,32,.14), transparent 60%), linear-gradient(165deg, #071a30, var(--navy)); color: #fff; }
.band-dark .trio > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 26px 24px; }
.band-dark .trio p { color: #c2d2e6; }
.trio-ico { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; margin-bottom: 16px; }
.trio-ico .ico { width: 24px; height: 24px; }
.band-cta { padding: 0 0 72px; background: var(--bg); }
.band-dark + .band-cta { padding-top: 72px; }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding: 40px; border-radius: 28px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(500px 300px at 100% 0, rgba(255,176,32,.3), transparent 60%), linear-gradient(135deg, var(--navy-2), #071a30); box-shadow: var(--shadow-2); }
.cta p { color: #c9d9ec; margin-top: 8px; max-width: 52ch; } .cta h2 { margin: 0; }
.cta-act { display: flex; gap: 12px; flex-wrap: wrap; }

/* Cards */
.card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; color: var(--ink); min-width: 0; box-shadow: var(--shadow-1); transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #cdd9ea; }
.card-top { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; }
.card-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--navy-2); display: grid; place-items: center; flex: none; }
.card-want .card-ico { background: var(--gold-soft); color: var(--gold-ink); }
.card-place { color: var(--ink-2); font-size: .93rem; }
.card-price { margin-top: auto; padding-top: 12px; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-price small { font-size: .85rem; font-weight: 500; color: var(--ink-3); margin-left: -4px; letter-spacing: 0; }
.price-lg { font-size: 2rem; margin: 12px 0 4px; }
.card-cta { margin-top: auto; padding-top: 12px; font-weight: 700; color: var(--brand); }
.card-want { border-top: 4px solid var(--gold); }
.tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .76rem; font-weight: 800; }
.tag-ok { background: var(--ok-soft); color: var(--ok); } .tag-warm { background: var(--gold-soft); color: var(--gold-ink); } .tag-soft { background: var(--bg); color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.facts dt { font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.facts dd { font-weight: 700; font-size: .96rem; }
.facts-lg { gap: 16px 34px; margin: 20px 0; padding: 20px 0; border-block: 1px solid var(--line); } .facts-lg dd { font-size: 1.1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .9rem; font-weight: 600; }
.checks li { padding-left: 28px; position: relative; margin-top: 8px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: .2em; width: 19px; height: 19px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: .72rem; display: grid; place-items: center; }

/* Pages */
.page-head { background: radial-gradient(600px 300px at 100% 0, rgba(255,176,32,.12), transparent 60%), #fff; border-bottom: 1px solid var(--line); padding: 34px 0; }
.page-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
.page-head .lead { margin-top: 10px; }
.results { padding: 30px 0 64px; }
.results-count { margin-bottom: 18px; color: var(--ink-2); }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; padding: 30px; border-radius: 24px; color: #fff;
  background: radial-gradient(400px 260px at 100% 0, rgba(255,176,32,.28), transparent 60%), linear-gradient(135deg, var(--navy-2), #071a30); box-shadow: var(--shadow-2); }
.nudge p { color: #c9d9ec; margin-top: 6px; max-width: 56ch; } .nudge h1 { font-size: 1.6rem; } .nudge h2 { margin: 0; }
.nudge .btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; box-shadow: 0 10px 24px rgba(255,143,31,.35); }
.nudge-solo { margin-top: 0; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; padding: 30px 0 64px; align-items: start; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-1); }
.sheet h1 { margin-top: 12px; font-size: clamp(1.6rem, 4vw, 2.1rem); } .sheet h2 { font-size: 1.06rem; margin-top: 24px; letter-spacing: 0; }
.act { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: grid; gap: 12px; position: sticky; top: 88px; box-shadow: var(--shadow-1); }
.center { text-align: center; display: grid; gap: 16px; justify-items: center; }

/* Guided form */
.flow { display: grid; gap: 16px; padding: 24px 0 96px; counter-reset: q; }
.flow fieldset:not([hidden]) { counter-increment: q; }
.q::before { content: counter(q); }
.progress { position: sticky; top: 66px; z-index: 6; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .3s; }
.flow fieldset { border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 22px; display: grid; gap: 14px; min-width: 0; box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.flow fieldset:focus-within { border-color: #bfd0e6; box-shadow: var(--shadow-2); }
.flow legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; }
.flow legend + * { clear: both; }
.q { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--navy); color: #fff; font-size: .88rem; font-weight: 800; }
.flow fieldset.done .q { background: linear-gradient(135deg, #17a868, var(--wa)); }
.flow fieldset.done .q::before { content: "✓"; }
.hint { color: var(--ink-3); font-size: .88rem; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; }
.opt span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; border: 1.5px solid var(--line); border-radius: 14px; font-weight: 700; color: var(--ink-2); background: #fbfcfe; transition: all .14s; }
.opt:hover span { border-color: #b9c8dc; background: #fff; }
.opt input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(10,37,64,.22); }
.opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.opts-tiles .opt { flex: 1 1 150px; } .opts-tiles .opt span { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 16px 10px; min-height: 96px; height: 100%; }
.opts-tiles .ico { width: 28px; height: 28px; }
.opts-mini .opt span { min-height: 38px; padding: 4px 14px; font-size: .9rem; border-radius: 10px; }
.ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--bg); }
[data-details-body] { display: grid; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { background: var(--danger-soft); color: var(--danger); border-radius: var(--r-sm); padding: 14px 16px; font-size: .95rem; }
.alert ul { list-style: disc; padding-left: 20px; margin-top: 6px; }
.flow-end { display: grid; gap: 10px; }

/* Verification */
.verify { padding: 40px 0 76px; }
.code { display: grid; gap: 2px; } .code span { color: var(--ink-3); font-size: .85rem; }
.code strong { font: 800 1.5rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; background: var(--bg); border: 1.5px dashed #c6d2e3; border-radius: 12px; padding: 8px 18px; }
.qr svg { width: 172px; height: 172px; display: block; margin: 0 auto 6px; border-radius: 14px; border: 1px solid var(--line); padding: 6px; }
.wait { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wa); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.tick { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #17a868, var(--wa)); color: #fff; font-size: 2.1rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 10px var(--ok-soft); }
.summary { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; font-weight: 700; }

/* Legal */
.legal { padding: 34px 0 72px; } .legal .sheet { display: grid; gap: 14px; } .legal h2 { margin-top: 12px; } .legal p, .legal li { color: var(--ink-2); }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }

/* Language gate */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; position: relative; isolation: isolate;
  background: radial-gradient(800px 500px at 85% -5%, rgba(255,176,32,.28), transparent 60%), radial-gradient(700px 600px at 0 100%, rgba(27,90,153,.6), transparent 60%), linear-gradient(165deg, #071a30, var(--navy) 50%, var(--navy-2)); }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: radial-gradient(rgba(255,255,255,.25) 1px, transparent 1.4px); background-size: 26px 26px; }
.gate-card { width: min(540px, 100%); background: rgba(255,255,255,.97); border-radius: 28px; padding: 38px 30px; text-align: center; box-shadow: 0 40px 100px rgba(0,0,0,.4); display: grid; gap: 16px; justify-items: center; animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.gate-card h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; }
.gate-tag { color: var(--ink-2); font-weight: 500; }
.gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.gate-choice { display: grid; gap: 4px; justify-items: center; padding: 26px 12px 22px; border: 2px solid var(--line); border-radius: 22px; color: var(--ink); background: #fff; transition: all .18s; }
.gate-choice:hover { text-decoration: none; border-color: var(--gold); box-shadow: var(--shadow-2); transform: translateY(-4px); }
.gate-glyph { width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; font-size: 1.9rem; font-weight: 800; display: grid; place-items: center; margin-bottom: 8px; box-shadow: 0 10px 22px rgba(10,37,64,.28); }
.gate-choice:first-child .gate-glyph { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; box-shadow: 0 10px 22px rgba(255,143,31,.38); }
.gate-choice strong { font-size: 1.3rem; font-weight: 800; } .gate-choice small { color: var(--ink-3); }
.gate-note { color: var(--ink-3); font-size: .86rem; }

/* Footer + mobile dock */
.foot { background: #071a30; color: #b9c9dc; padding: 48px 0 22px; }
.foot .brand { color: #fff; } .foot p { margin-top: 10px; max-width: 44ch; font-size: .94rem; }
.foot-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.foot nav { display: grid; gap: 9px; align-content: start; } .foot nav strong { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.foot a { color: #dbe6f3; }
.foot-base { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; }
.dock { display: none; }

/* Reveal on scroll */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .hero-art { transform: none; max-width: 460px; }
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .steps, .trio, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: minmax(0, 1fr); } .act { position: static; }
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } body.gate, body.no-dock { padding-bottom: 0; }
  .dock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; font-weight: 700; font-size: .9rem; text-align: center; padding: 4px 8px; line-height: 1.25; }
  .dock a.alt { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; }
  .no-dock .dock { display: none; } .no-dock .flow { padding-bottom: 40px; }
  .foot-in { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; }
  .cta { padding: 30px 24px; }
}
@media (max-width: 600px) {
  .choices, .steps, .trio, .grid { grid-template-columns: minmax(0, 1fr); }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .types .type:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero { padding-top: 34px; } .hero-search { padding: 18px 16px 20px; margin-top: 32px; border-radius: 20px; }
  .hero-art { padding: 18px; }
  .search-row .btn { width: 100%; } .field.narrow { max-width: none; flex: 1 1 140px; }
  .band { padding: 52px 0; } .band-types { padding-top: 88px; } .sheet, .flow fieldset { padding: 18px 16px; }
  .top-in { gap: 10px; min-height: 60px; } .brand { font-size: 1.12rem; } .progress { top: 60px; }
  .opts-wide .opt, .opts-tiles .opt { flex: 1 1 calc(50% - 10px); } .opts-wide .opt span { justify-content: center; text-align: center; height: 100%; }
  .gate-card { padding: 30px 18px; } .cta-act .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } }

/* My account */
.acct-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; color: var(--navy); background: var(--brand-soft); }
.acct-link:hover { text-decoration: none; background: #dbe8f8; }
.acct { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; padding: 28px 0 72px; align-items: start; }
.acct-side { position: sticky; top: 88px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 16px; box-shadow: var(--shadow-1); display: grid; gap: 16px; }
.acct-me { display: grid; justify-items: center; gap: 2px; text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.acct-avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--navy)); box-shadow: 0 0 0 5px var(--brand-soft); margin-bottom: 8px; }
.acct-me small { color: var(--ink-3); }
.acct-nav { display: grid; gap: 4px; }
.acct-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--ink-2); font-weight: 600; }
.acct-nav a:hover { background: var(--bg); text-decoration: none; } .acct-nav a.on { background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(10,37,64,.2); }
.acct-cta { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); } .acct-cta .btn { min-height: 44px; font-size: .92rem; }
.acct-out { width: 100%; background: none; border: 0; color: var(--ink-3); font: 600 .9rem var(--font); padding: 8px; cursor: pointer; } .acct-out:hover { color: var(--danger); }
.acct-main { display: grid; gap: 16px; min-width: 0; }
.acct-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); } .acct-head .lead { margin-top: 6px; font-size: 1rem; }
.acct-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; } .acct-sec h2 { font-size: 1.15rem; }
.flash { padding: 12px 16px; border-radius: 12px; font-weight: 600; } .flash-ok { background: var(--ok-soft); color: var(--ok); } .flash-bad { background: var(--danger-soft); color: var(--danger); }
.status { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); border-left: 6px solid var(--ink-3); box-shadow: var(--shadow-1); }
.status small { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .status strong { display: block; font-size: 1.35rem; } .status p { color: var(--ink-2); }
.status-working, .status-working_free { border-left-color: #17a868; } .status-working strong, .status-working_free strong { color: var(--ok); }
.status-payment_due { border-left-color: var(--gold-2); background: var(--gold-soft); } .status-payment_due strong { color: var(--gold-ink); }
.status-restricted { border-left-color: var(--danger); } .status-restricted strong { color: var(--danger); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpis a { display: grid; gap: 2px; padding: 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-1); transition: transform .15s, box-shadow .15s; }
.kpis a:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); }
.kpis span { color: var(--ink-2); font-weight: 600; font-size: .9rem; } .kpis strong { font-size: 2rem; line-height: 1.2; font-weight: 800; } .kpis small { color: var(--ink-3); }
.lead-card, .panel-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 10px; box-shadow: var(--shadow-1); min-width: 0; }
.lead-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-card h3 { font-size: 1.05rem; } .score { font-weight: 800; color: var(--navy-3); font-size: .92rem; }
.why { display: grid; gap: 4px; font-size: .92rem; color: var(--ink-2); } .why li { padding-left: 22px; position: relative; }
.why li::before { position: absolute; left: 0; font-weight: 800; } .why-ok::before { content: "✓"; color: var(--ok); } .why-warn::before { content: "△"; color: var(--gold-2); } .why-miss::before { content: "✗"; color: var(--danger); }
.lead-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .lead-act .btn { min-height: 42px; padding: 0 16px; font-size: .92rem; border-radius: 12px; box-shadow: none; }
.lead-act .inline { display: flex; gap: 8px; flex-wrap: wrap; } .lead-act select { min-height: 42px; width: auto; }
.btn-line { background: #fff; color: var(--navy); border: 1.5px solid #c9d5e6; } .btn-line:hover { border-color: var(--navy); }
.btn-quiet { background: none; color: var(--ink-3); } .btn-quiet:hover { color: var(--danger); transform: none; }
.state { font-weight: 600; color: var(--ink-2); background: var(--bg); border-radius: 10px; padding: 8px 12px; } .state-ok { background: var(--ok-soft); color: var(--ok); } .state-off { color: var(--ink-3); }
.callout { background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px; font-weight: 600; }
.price-row strong { font-size: 1.25rem; font-weight: 800; } .price-row small { color: var(--ink-3); }
.edit summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 4px 0; } .edit form { padding-top: 12px; }
.panel-card h2 { font-size: 1.08rem; } .panel-card p { color: var(--ink-2); } .panel-card .big { font-size: 2.2rem; font-weight: 800; color: var(--ink); line-height: 1.2; } .panel-card .big small { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.packs form { display: grid; gap: 4px; justify-items: start; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); } .packs strong { font-size: 1.05rem; } .packs span { font-weight: 800; font-size: 1.2rem; }
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--bg); } .line:last-child { border: 0; } .line small { color: var(--ink-3); }
.st-active, .st-paid, .st-matched, .st-matching, .st-partially_matched, .st-fulfilled { background: var(--ok-soft); color: var(--ok); }
.st-pending_payment, .st-pending_review, .st-draft, .st-paused, .st-created, .st-pending, .st-visit_stage, .st-negotiating { background: var(--gold-soft); color: var(--gold-ink); }
.st-expired, .st-withdrawn, .st-rejected, .st-failed, .st-rented, .st-sold, .st-refunded, .st-partially_refunded { background: var(--bg); color: var(--ink-2); }
.login { max-width: 460px; margin-inline: auto; } .login .choice-ico { margin: 0; } .login-form { display: grid; gap: 14px; width: 100%; text-align: left; }
.otp { font: 800 1.6rem/1.2 ui-monospace, "SF Mono", Menlo, monospace !important; letter-spacing: .4em; text-align: center; }
@media (max-width: 860px) {
  .acct { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .acct-side { position: static; padding: 14px; gap: 12px; } .acct-me { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 12px; padding-bottom: 12px; }
  .acct-avatar { grid-row: span 2; width: 46px; height: 46px; font-size: 1.2rem; margin: 0; }
  .acct-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .acct-nav::-webkit-scrollbar { display: none; }
  .acct-nav a { padding: 9px 14px; background: var(--bg); border-radius: 999px; font-size: .9rem; }
  .acct-cta { grid-template-columns: 1fr 1fr; } .acct-cta form { grid-column: 1 / -1; }
  .acct-link span { display: none; } .acct-link { padding: 9px; }
}
@media (max-width: 600px) { .kpis { grid-template-columns: minmax(0, 1fr); } .kpis a { grid-template-columns: 1fr auto; align-items: center; } .kpis strong { grid-row: span 2; grid-column: 2; } .lead-act .btn { flex: 1 1 auto; } }

/* ═══ v3 — a livelier, lighter-weight interface ═══════════════════════════════════════════ */
:root { --display: "Sora", "Noto Sans Devanagari", system-ui, sans-serif; --cyan: #22d3ee; --blue: #3b82f6; --mint: #34d399; --ink-bg: #060d1a; }
h1, h2, h3, .brand, .gate-choice strong { font-family: var(--display); }
h1 { font-weight: 600; letter-spacing: -.035em; } h2 { font-weight: 600; letter-spacing: -.025em; } h3 { font-weight: 600; }
[lang="hi"] h1, [lang="hi"] h2 { letter-spacing: 0; }
.brand { font-weight: 700; } .btn { font-weight: 600; } .kicker { font-weight: 600; letter-spacing: .14em; color: var(--blue); }
.card-price, .price-lg, .kpis strong, .choice strong, .q, .tag, .facts dd, .flow legend, .opt span { font-weight: 600; }
.nav a { font-weight: 500; } .lang, .acct-link { font-weight: 600; }
.kicker::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 2px; }

/* Hero */
.hx { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 64px 0 34px; background: var(--ink-bg); }
.hx::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); }
.hx-aurora { position: absolute; inset: 0; z-index: -2; filter: blur(70px); }
.hx-aurora i { position: absolute; border-radius: 50%; opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.hx-aurora i:nth-child(1) { width: 520px; height: 520px; left: -8%; top: -22%; background: #1d4ed8; }
.hx-aurora i:nth-child(2) { width: 460px; height: 460px; right: -6%; top: -10%; background: #0891b2; animation-delay: -6s; }
.hx-aurora i:nth-child(3) { width: 380px; height: 380px; left: 38%; bottom: -38%; background: #f59e0b; opacity: .32; animation-delay: -11s; }
@keyframes drift { to { transform: translate3d(60px, 40px, 0) scale(1.15); } }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.hx .eyebrow { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #cfe6ff; font-weight: 500; backdrop-filter: blur(8px); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(52,211,153,.7); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.hx h1 { font-size: clamp(2.1rem, 5.4vw, 3.7rem); line-height: 1.08; color: #fff; max-width: 15ch; }
[lang="hi"] .hx h1 { line-height: 1.35; max-width: 18ch; font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.hx h1 em { font-style: normal; display: block; background: linear-gradient(100deg, var(--cyan), #93c5fd 45%, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .lead { color: #b4c4d9; margin-top: 18px; font-size: 1.08rem; }
.ask-box { margin-top: 30px; padding: 14px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); position: relative; }
.ask-box::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, var(--cyan), transparent 30%, transparent 70%, #fcd34d); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .8; }
.ask-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 6px 10px; flex-wrap: wrap; }
.ask-label { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.ask-mode { display: inline-flex; background: rgba(0,0,0,.3); border-radius: 999px; padding: 3px; }
.ask-mode label { cursor: pointer; } .ask-mode input { position: absolute; opacity: 0; }
.ask-mode span { display: block; padding: 6px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: #b4c4d9; transition: all .15s; }
.ask-mode input:checked + span { background: #fff; color: var(--navy); } .ask-mode input:focus-visible + span { outline: 2px solid var(--cyan); }
.ask-row { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 6px 6px 6px 18px; }
.ask-row input { flex: 1; min-width: 0; border: 0 !important; background: none !important; box-shadow: none !important; padding: 12px 0; font-size: 1.05rem; min-height: 52px; }
.ask-go { flex: none; width: 52px; height: 52px; border: 0; border-radius: 13px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--blue), #0891b2); display: grid; place-items: center; transition: transform .15s, box-shadow .2s; box-shadow: 0 8px 20px rgba(59,130,246,.45); }
.ask-go:hover { transform: translateX(3px); } .ask-go .ico { width: 22px; height: 22px; }
.ask-note { color: #93a5bd; font-size: .84rem; padding: 10px 6px 2px; }
.hx-alt { margin-top: 16px; color: #93a5bd; font-size: .95rem; } .hx-alt a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }

/* Example conversation */
.phone { position: relative; border-radius: 30px; padding: 12px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 40px 100px rgba(0,0,0,.5); backdrop-filter: blur(12px); animation: float 7s ease-in-out infinite; }
.phone .art-tag { right: 22px; }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; color: #fff; }
.phone-bar strong { display: block; font-size: .95rem; font-weight: 600; } .phone-bar small { color: #9fd9b9; font-size: .75rem; }
.phone-dot { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--navy) 0 52%, transparent 52%), linear-gradient(135deg, var(--gold), var(--gold-2)); flex: none; }
.phone-body { background: #0b1626; border-radius: 22px; padding: 16px 14px; min-height: 400px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.5; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .4s, transform .4s; }
.msg.on { opacity: 1; transform: none; } .msg.gone { display: none; }
.msg-out { align-self: flex-end; background: linear-gradient(135deg, #0f766e, #0e7490); color: #fff; border-bottom-right-radius: 5px; }
.msg-in { align-self: flex-start; background: #17263b; color: #dbe6f3; border-bottom-left-radius: 5px; }
.msg-typing { align-self: flex-start; background: #17263b; display: flex; gap: 5px; padding: 14px; }
.msg-typing i { width: 7px; height: 7px; border-radius: 50%; background: #7f93ad; animation: blink 1.2s infinite; } .msg-typing i:nth-child(2) { animation-delay: .2s; } .msg-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-chips span { background: rgba(34,211,238,.14); color: #a5f3fc; border: 1px solid rgba(34,211,238,.3); border-radius: 999px; padding: 3px 10px; font-size: .78rem; font-weight: 500; }
.msg-match { max-width: 96%; width: 96%; background: linear-gradient(160deg, #13233a, #0f1d31); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 9px; }
.match-head { display: flex; justify-content: space-between; align-items: center; } .match-head span { display: inline-flex; align-items: center; gap: 6px; color: #fcd34d; font-weight: 600; } .match-head b { color: #fff; font-family: var(--display); font-weight: 600; }
.match-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; } .match-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--mint)); transition: width 1.2s .3s ease-out; }
.msg-match.on .match-bar i { width: 92%; }
.msg-match ul { display: grid; gap: 3px; font-size: .84rem; } .msg-match li { padding-left: 20px; position: relative; } .msg-match li::before { position: absolute; left: 0; font-weight: 700; }
.msg-match .ok::before { content: "✓"; color: var(--mint); } .msg-match .warn::before { content: "△"; color: #fcd34d; }
.match-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .match-btns span { text-align: center; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.07); font-weight: 600; font-size: .84rem; }
.match-btns .yes { background: linear-gradient(135deg, #17a868, var(--wa)); color: #fff; }
.msg-note { align-self: center; max-width: 100%; text-align: center; background: none; color: #8ea3bd; font-size: .78rem; display: flex; gap: 6px; align-items: center; padding: 2px; }

/* Reach strip */
.reach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid rgba(255,255,255,.1); }
.reach li { padding: 22px 18px 6px; border-left: 1px solid rgba(255,255,255,.08); } .reach li:first-child { border-left: 0; padding-left: 0; }
.reach strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #9fb6d3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reach span { color: #8ea3bd; font-size: .88rem; }

/* Sections */
.sec { padding: 84px 0; background: #fff; position: relative; } .sec h2 { margin-bottom: 30px; max-width: 22ch; }
.sec-types { background: linear-gradient(180deg, #f3f7fd, #fff); }
.sec-soft { background: radial-gradient(700px 300px at 0 0, rgba(34,211,238,.1), transparent 60%), radial-gradient(700px 300px at 100% 100%, rgba(245,158,11,.1), transparent 60%), var(--bg); }
.sec-ink { background: var(--ink-bg); color: #fff; overflow: hidden; } .sec-ink h2 { color: #fff; } .sec-ink .kicker { color: var(--cyan); }
.sec-ink::before { content: ""; position: absolute; width: 700px; height: 700px; right: -200px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(29,78,216,.35), transparent 65%); pointer-events: none; }
.sec-cta { padding: 0 0 84px; }

/* Type cards */
.tcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tcard { position: relative; overflow: hidden; display: grid; gap: 36px; padding: 20px; border-radius: 22px; color: var(--ink); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .2s, box-shadow .2s, border-color .2s; }
.tcard:hover { text-decoration: none; transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-2); border-color: transparent; }
.tcard-art { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: #fff; position: relative; z-index: 1; }
.tcard-art .ico { width: 30px; height: 30px; }
.tcard-0 .tcard-art { background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .tcard-1 .tcard-art { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.tcard-2 .tcard-art { background: linear-gradient(135deg, #14b8a6, #0f766e); } .tcard-3 .tcard-art { background: linear-gradient(135deg, #22d3ee, #0891b2); } .tcard-4 .tcard-art { background: linear-gradient(135deg, #64748b, #0f172a); }
.tcard::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: currentColor; opacity: .04; transition: transform .3s; } .tcard:hover::after { transform: scale(1.6); }
.tcard strong { font-family: var(--display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; position: relative; z-index: 1; }
.tcard > i { position: absolute; right: 16px; top: 18px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: all .2s; } .tcard:hover > i { background: var(--navy); color: #fff; transform: rotate(-45deg); }

/* Journey */
.journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: j; position: relative; }
.journey::before { content: ""; position: absolute; left: 8%; right: 8%; top: 31px; height: 2px; background: repeating-linear-gradient(90deg, #c5d3e6 0 8px, transparent 8px 16px); }
.journey li { position: relative; counter-increment: j; } .journey h3 { margin-top: 18px; font-size: 1.15rem; } .journey p { color: var(--ink-2); margin-top: 6px; }
.journey-ico { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--ink-bg)); box-shadow: 0 0 0 8px #fff, 0 14px 30px rgba(10,37,64,.25); }
.journey-ico .ico { width: 28px; height: 28px; }
.journey-ico::after { content: counter(j); position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #2a1700; font: 700 .8rem var(--display); display: grid; place-items: center; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; position: relative; }
.b { position: relative; overflow: hidden; border-radius: 24px; padding: 26px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; align-content: start; }
.b h3 { color: #fff; font-size: 1.18rem; } .b p { color: #a9bad0; font-size: .95rem; }
.b-match { grid-column: span 4; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: linear-gradient(135deg, rgba(29,78,216,.35), rgba(8,145,178,.18)); }
.b-wa { grid-column: span 2; background: linear-gradient(160deg, rgba(18,146,90,.3), rgba(255,255,255,.04)); }
.b-pin, .b-fresh, .b-free { grid-column: span 2; }
.b-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; margin-bottom: 6px; }
.b-score { position: relative; width: 150px; height: 150px; display: grid; place-items: center; text-align: center; }
.b-score svg { position: absolute; inset: 0; transform: rotate(-90deg); } .b-score circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring-bg { stroke: rgba(255,255,255,.12); } .ring { stroke: url(#none); stroke: var(--cyan); stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s ease-out .2s; }
.in .ring { stroke-dashoffset: 25; }
.b-score strong { font-family: var(--display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: #fff; } .b-score strong small { font-size: 1.1rem; } .b-score span { position: absolute; bottom: 30px; font-size: .7rem; color: #a9bad0; letter-spacing: .08em; text-transform: uppercase; }
.b-pinrow { display: flex; gap: 10px; margin-top: 10px; } .b-pinrow span { width: 44px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; color: #fcd34d; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); animation: pinpop 3s infinite; }
.b-pinrow span:nth-child(2) { animation-delay: .25s; } .b-pinrow span:nth-child(3) { animation-delay: .5s; } .b-pinrow span:nth-child(4) { animation-delay: .75s; }
@keyframes pinpop { 0%, 60%, 100% { transform: none; border-color: rgba(255,255,255,.12); } 30% { transform: translateY(-5px); border-color: #fcd34d; } }
.b-wave { position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 40px; opacity: .8; } .b-wave path { fill: none; stroke: var(--mint); stroke-width: 2; stroke-dasharray: 420; stroke-dashoffset: 420; animation: beat 3.2s linear infinite; } .b-fresh { padding-bottom: 60px; }
@keyframes beat { to { stroke-dashoffset: 0; } }
[data-glow] { --mx: 50%; --my: 50%; } [data-glow]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(34,211,238,.18), transparent 70%); } [data-glow]:hover::before { opacity: 1; }

/* Browse + misc */
.browse { border-radius: 28px; padding: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); position: relative; overflow: hidden; }
.browse::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--cyan), var(--blue), var(--gold)); }
.browse-head { margin-bottom: 16px; } .browse-head h2 { margin: 0 0 4px; font-size: 1.4rem; } .browse-head p { color: var(--ink-2); }
.understood { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #ecfeff, #eff6ff); border: 1px solid #bae6fd; color: #0c4a6e; }
.understood .ico { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; } .understood p { font-size: .92rem; color: #0369a1; }
.top { background: rgba(255,255,255,.82); }
.cta { background: radial-gradient(500px 300px at 100% 0, rgba(34,211,238,.25), transparent 60%), radial-gradient(400px 260px at 0 100%, rgba(245,158,11,.22), transparent 60%), linear-gradient(135deg, #0b1b33, var(--ink-bg)); }
.gate { background: var(--ink-bg); } .gate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 420px at 15% 10%, rgba(29,78,216,.55), transparent 65%), radial-gradient(520px 400px at 90% 20%, rgba(8,145,178,.5), transparent 65%), radial-gradient(480px 380px at 50% 110%, rgba(245,158,11,.3), transparent 65%); }
.gate-card { backdrop-filter: blur(6px); } .gate-card h1 { font-weight: 500; }

@media (max-width: 980px) {
  .hx-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } .phone { max-width: 400px; margin-inline: auto; width: 100%; animation: none; } .phone-body { min-height: 380px; }
  .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .b-match, .b-wa, .b-pin, .b-fresh, .b-free { grid-column: span 1; } .b-match { grid-column: span 2; }
}
@media (max-width: 600px) {
  .hx { padding-top: 36px; } .sec { padding: 56px 0; } .sec-cta { padding-bottom: 56px; }
  .reach { grid-template-columns: 1fr 1fr; margin-top: 36px; } .reach li { padding: 16px 12px 4px; } .reach li:nth-child(3) { border-left: 0; padding-left: 0; } .reach li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
  .tcards { grid-template-columns: 1fr 1fr; } .tcard { gap: 22px; padding: 16px; } .tcards .tcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .journey { grid-template-columns: 1fr; gap: 26px; } .journey::before { left: 31px; right: auto; top: 8%; bottom: 8%; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #c5d3e6 0 8px, transparent 8px 16px); }
  .journey li { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; } .journey h3 { margin-top: 4px; } .journey p { grid-column: 2; } .journey-ico { grid-row: span 2; }
  .bento { grid-template-columns: 1fr; } .b-match { grid-column: auto; grid-template-columns: 1fr; } .b-score { margin-inline: auto; }
  .browse { padding: 20px 16px; } .ask-row { padding-left: 14px; } .ask-row input { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .msg { opacity: 1; transform: none; } .msg-typing { display: none; } .msg-match .match-bar i { width: 92%; } .ring { stroke-dashoffset: 25; } }

/* ═══ v3 — every other page in the same language ══════════════════════════════════════════ */
.btn-primary { background: linear-gradient(135deg, #1e40af, #0b1b33); box-shadow: 0 10px 24px rgba(30,64,175,.28); }
.btn-primary:hover { box-shadow: 0 14px 30px rgba(30,64,175,.38); }
.brand-logo { height: 34px; width: auto; display: block; }
.creative { max-width: 100%; height: auto; display: block; }

/* Page hero: the dark aurora band on inner pages */
.page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-bg); color: #fff; border: 0; padding: 50px 0 86px; }
.page-head::before { content: ""; position: absolute; inset: -40% -10%; z-index: -2; filter: blur(60px); background: radial-gradient(420px 320px at 12% 30%, rgba(29,78,216,.75), transparent 70%), radial-gradient(380px 300px at 85% 20%, rgba(8,145,178,.65), transparent 70%), radial-gradient(340px 260px at 60% 110%, rgba(245,158,11,.35), transparent 70%); animation: drift 20s ease-in-out infinite alternate; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); }
.page-head h1 { color: #fff; font-size: clamp(1.8rem, 4.6vw, 2.8rem); max-width: 22ch; } .page-head .lead { color: #b4c4d9; } .page-head .kicker { color: var(--cyan); }
.page-head + section, .page-head + .wrap { position: relative; z-index: 2; margin-top: -52px; }
.page-head .search { background: #fff; color: var(--ink); border-radius: 24px; padding: 20px 22px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); margin-top: 6px; }
.page-head:has(.search) { padding-bottom: 60px; } .page-head:has(.search) + section { margin-top: 0; }
.results { padding-top: 34px; }

/* Pages that open with a card instead of a hero get the dark band behind them */
main:has(> .detail), main:has(> .acct) { background: linear-gradient(180deg, var(--ink-bg) 0, #0b1b33 210px, var(--bg) 210px); }
main:has(> .acct) { background: linear-gradient(180deg, var(--ink-bg) 0, #0b1b33 170px, var(--bg) 170px); }
.acct-head h1 { color: #fff; } .acct-head .lead { color: #b4c4d9; } .acct-head { min-height: 96px; align-content: center; display: grid; }
.acct-banner { width: 100%; border-radius: 22px; box-shadow: var(--shadow-2); object-fit: cover; }
.acct-side { border: 0; box-shadow: var(--shadow-2); } .acct-avatar { background: linear-gradient(135deg, var(--blue), #0b1b33); box-shadow: 0 0 0 5px #e0ecff; }
.acct-nav a.on { background: linear-gradient(135deg, #1e40af, #0b1b33); }
.status { border: 0; box-shadow: var(--shadow-2); } .kpis a, .lead-card, .panel-card { border-radius: 22px; }
.kpis strong { font-family: var(--display); background: linear-gradient(135deg, #1e40af, #0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead-card { position: relative; overflow: hidden; } .lead-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--cyan), var(--blue)); opacity: .9; }
.score { font-family: var(--display); color: #1e40af; background: #eaf1ff; border-radius: 999px; padding: 3px 12px; font-weight: 600; }
.callout { background: linear-gradient(135deg, #1e40af, #0b1b33); }
.sheet { border: 0; box-shadow: var(--shadow-2); border-radius: 26px; } .act { border: 0; box-shadow: var(--shadow-2); border-radius: 24px; }
.sheet-media { width: calc(100% + 56px); max-width: none; margin: -28px -28px 20px; border-radius: 26px 26px 0 0; aspect-ratio: 16 / 7; object-fit: cover; }
.card { border-radius: 22px; overflow: hidden; } .card-media { width: calc(100% + 40px); max-width: none; margin: -20px -20px 6px; aspect-ratio: 4 / 3; object-fit: cover; }
.card-price, .price-lg { font-family: var(--display); }
.nudge { background: radial-gradient(420px 260px at 100% 0, rgba(34,211,238,.25), transparent 60%), radial-gradient(360px 240px at 0 100%, rgba(245,158,11,.2), transparent 60%), linear-gradient(135deg, #0b1b33, var(--ink-bg)); border-radius: 26px; }

/* Guided forms */
.form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.flow { padding-top: 0; } .flow fieldset { border: 0; border-radius: 24px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.flow fieldset::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--cyan), var(--blue)); opacity: 0; transition: opacity .2s; }
.flow fieldset:focus-within::before, .flow fieldset.done::before { opacity: 1; } .flow fieldset.done::before { background: linear-gradient(180deg, var(--mint), var(--wa)); }
.progress { background: rgba(255,255,255,.7); box-shadow: var(--shadow-1); height: 8px; } .progress i { background: linear-gradient(90deg, var(--cyan), var(--blue) 60%, var(--gold)); }
.q { background: linear-gradient(135deg, var(--blue), #1e3a8a); box-shadow: 0 6px 14px rgba(59,130,246,.35); font-family: var(--display); }
.opt span { border-radius: 14px; } .opt input:checked + span { background: linear-gradient(135deg, #1e40af, #0b1b33); border-color: transparent; box-shadow: 0 10px 22px rgba(30,64,175,.3); }
.opts-tiles .opt span { border-radius: 18px; } .opts-tiles .opt input:checked + span .ico { color: var(--cyan); }
.picked li { background: linear-gradient(135deg, #1e40af, #0b1b33); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(59,130,246,.16); }
.helper { position: sticky; top: 88px; background: #fff; border-radius: 26px; padding: 22px; box-shadow: var(--shadow-2); display: grid; gap: 14px; }
.helper h2 { font-size: 1.1rem; margin: 0; } .helper ul { display: grid; gap: 10px; } .helper li { padding-left: 26px; position: relative; color: var(--ink-2); font-size: .94rem; }
.helper li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 18px; height: 18px; border-radius: 50%; background: #e0ecff; color: #1e40af; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.helper-note { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--line); } .helper-note .ico { color: var(--ok); margin-top: 2px; }
.helper-art { position: relative; height: 150px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; color: #fff; background: radial-gradient(160px 120px at 20% 20%, rgba(34,211,238,.55), transparent 70%), radial-gradient(180px 140px at 90% 90%, rgba(245,158,11,.45), transparent 70%), linear-gradient(135deg, #1e40af, var(--ink-bg)); }
.helper-art > .ico { width: 52px; height: 52px; position: relative; z-index: 1; } .helper-art i { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; animation: ripple 4s linear infinite; }
.helper-art i:nth-child(2) { animation-delay: 0s; } .helper-art i:nth-child(3) { animation-delay: 1.3s; } .helper-art i:nth-child(4) { animation-delay: 2.6s; }
@keyframes ripple { from { width: 60px; height: 60px; opacity: .9; } to { width: 300px; height: 300px; opacity: 0; } }
.understood { box-shadow: var(--shadow-1); }

/* Verify, pay and sign-in: one card on the aurora */
body.stage main { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-bg); min-height: calc(100vh - 66px); display: grid; align-items: center; }
body.stage main::before { content: ""; position: absolute; inset: -20%; z-index: -1; filter: blur(70px); background: radial-gradient(480px 380px at 18% 20%, rgba(29,78,216,.7), transparent 70%), radial-gradient(440px 360px at 85% 25%, rgba(8,145,178,.6), transparent 70%), radial-gradient(420px 320px at 50% 105%, rgba(245,158,11,.32), transparent 70%); animation: drift 20s ease-in-out infinite alternate; }
.stage .sheet { position: relative; padding: 34px 28px; } .stage .sheet::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--cyan), var(--blue), var(--gold)); }
.stage .sheet h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0; } .stage-art { width: 180px; height: auto; }
.stage .choice-ico { background: linear-gradient(135deg, var(--blue), #0b1b33); }
.code strong { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #f0f6ff; border-color: #bfd4f5; color: #1e3a8a; }

/* Legal, footer, home art slots */
.legal .sheet h2 { font-size: 1.12rem; color: #1e3a8a; }
.foot { background: var(--ink-bg); position: relative; overflow: hidden; } .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent); opacity: .6; }
.tcard-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .tcard:has(.tcard-photo) { color: #fff; min-height: 190px; align-content: end; }
.tcard:has(.tcard-photo)::after { inset: 0; width: auto; height: auto; border-radius: 0; opacity: 1; background: linear-gradient(180deg, transparent 30%, rgba(6,13,26,.85)); transform: none !important; } .tcard:has(.tcard-photo) .tcard-art { display: none; } .tcard:has(.tcard-photo) strong { z-index: 2; }
.journey-art { width: 100%; max-width: 260px; margin-bottom: 14px; border-radius: 18px; } .journey li:has(.journey-art) .journey-ico { display: none; } .journey:has(.journey-art)::before { display: none; }
.cta-art { position: absolute; right: 0; bottom: 0; height: 115%; width: auto; opacity: .95; pointer-events: none; } .cta:has(.cta-art) > div { max-width: 55%; position: relative; z-index: 1; }
.empty .creative { width: 220px; }

@media (max-width: 980px) { .form-wrap { grid-template-columns: minmax(0, 1fr); } .helper { position: static; order: -1; grid-template-columns: 110px 1fr; align-items: center; padding: 16px; } .helper-art { height: 110px; } .helper ul, .helper-note { grid-column: 1 / -1; } .helper .creative { width: 110px; } }
@media (max-width: 860px) { main:has(> .acct) { background: linear-gradient(180deg, var(--ink-bg) 0, #0b1b33 120px, var(--bg) 120px); } .acct-head { min-height: 0; } .acct-head h1, .acct-head .lead { color: var(--ink); } .acct-head .lead { color: var(--ink-2); } .cta:has(.cta-art) > div { max-width: none; } .cta-art { display: none; } }
@media (max-width: 600px) { .page-head { padding: 34px 0 76px; } .sheet-media { width: calc(100% + 36px); margin: -18px -16px 16px; } .stage .sheet { padding: 28px 18px; } }

/* ═══ v4 — light business theme: no dark surfaces ═════════════════════════════════════════ */
:root { --ink-bg: #eef4fd; --sky: #f3f8ff; --sky-line: #d9e5f6; --prime: #1d4ed8; --prime-2: #2563eb; }
.btn-primary, .acct-nav a.on, .opt input:checked + span, .picked li, .callout { background: linear-gradient(135deg, var(--prime-2), var(--prime)); }
.btn-primary { box-shadow: 0 10px 22px rgba(37,99,235,.24); } .btn-primary:hover { box-shadow: 0 14px 28px rgba(37,99,235,.32); }
.btn-ghost { background: #fff; color: var(--prime); border-color: #c7d7f0; } .btn-ghost:hover { background: #f3f8ff; }
.acct-avatar, .stage .choice-ico, .choice-ico, .journey-ico, .q { background: linear-gradient(135deg, #3b82f6, var(--prime)); }
.journey-ico { box-shadow: 0 0 0 8px #fff, 0 12px 26px rgba(37,99,235,.22); }
.tcard-4 .tcard-art { background: linear-gradient(135deg, #818cf8, #4f46e5); background: linear-gradient(135deg, #38bdf8, #0284c7); } .tcard:hover > i { background: var(--prime); }

/* Light aurora surfaces */
.hx, .page-head, body.stage main, .gate { background: linear-gradient(180deg, #eaf2ff 0, #f6faff 100%); color: var(--ink); }
.hx::after, .page-head::after { opacity: 1; background-image: linear-gradient(rgba(30,64,175,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(30,64,175,.055) 1px, transparent 1px); }
.hx-aurora i { opacity: .75; } .hx-aurora i:nth-child(1) { background: #bfdbfe; } .hx-aurora i:nth-child(2) { background: #a5f3fc; } .hx-aurora i:nth-child(3) { background: #fde68a; opacity: .6; }
.page-head::before, body.stage main::before { background: radial-gradient(420px 320px at 12% 30%, #bfdbfe, transparent 70%), radial-gradient(380px 300px at 85% 20%, #a5f3fc, transparent 70%), radial-gradient(340px 260px at 60% 110%, #fde68a, transparent 70%); opacity: .8; }
.gate::after { background: radial-gradient(600px 420px at 15% 10%, #bfdbfe, transparent 65%), radial-gradient(520px 400px at 90% 20%, #a5f3fc, transparent 65%), radial-gradient(480px 380px at 50% 110%, #fde68a, transparent 65%); opacity: .8; }
.gate::before { background-image: radial-gradient(rgba(30,64,175,.16) 1px, transparent 1.4px); }
.gate-card { box-shadow: 0 30px 70px rgba(30,64,175,.16); } .gate-glyph { background: linear-gradient(135deg, #3b82f6, var(--prime)); box-shadow: 0 10px 22px rgba(37,99,235,.28); }
.page-head h1, .hx h1, .acct-head h1 { color: var(--ink); } .page-head .lead, .hx .lead, .acct-head .lead { color: var(--ink-2); } .page-head .kicker { color: var(--prime-2); }
.page-head .search { box-shadow: 0 24px 60px rgba(30,64,175,.14); border: 1px solid var(--sky-line); }
main:has(> .detail) { background: linear-gradient(180deg, #e6efff 0, #f1f7ff 210px, var(--bg) 210px); }
main:has(> .acct) { background: linear-gradient(180deg, #e6efff 0, #f1f7ff 170px, var(--bg) 170px); }
.stage .sheet, .sheet, .act, .acct-side, .status, .helper { box-shadow: 0 18px 44px rgba(30,64,175,.1); }

/* Home hero */
.hx .eyebrow, .eyebrow { background: #fff; border: 1px solid var(--sky-line); color: var(--prime); backdrop-filter: none; box-shadow: var(--shadow-1); }
.hx h1 em { background: linear-gradient(100deg, var(--prime), #0891b2 55%, #d97706); -webkit-background-clip: text; background-clip: text; }
.ask-box { background: rgba(255,255,255,.78); border: 1px solid var(--sky-line); box-shadow: 0 24px 60px rgba(30,64,175,.14); }
.ask-box::before { background: linear-gradient(120deg, #38bdf8, transparent 30%, transparent 70%, #fbbf24); }
.ask-label { color: var(--prime); } .ask-mode { background: #e6eefb; } .ask-mode span { color: var(--ink-2); }
.ask-mode input:checked + span { background: #fff; color: var(--prime); box-shadow: 0 2px 8px rgba(30,64,175,.16); } .ask-mode input:focus-visible + span { outline-color: var(--prime-2); }
.ask-row { border: 1.5px solid var(--sky-line); } .ask-go { box-shadow: 0 8px 18px rgba(59,130,246,.32); }
.ask-note { color: var(--ink-3); } .hx-alt { color: var(--ink-2); } .hx-alt a { color: var(--prime); text-decoration-color: rgba(29,78,216,.35); }
.phone { background: #fff; border: 1px solid var(--sky-line); box-shadow: 0 30px 70px rgba(30,64,175,.18); backdrop-filter: none; }
.phone-bar { color: var(--ink); } .phone-bar small { color: var(--ok); } .phone-body { background: #f1f5f0; background: linear-gradient(180deg, #f3f7fc, #eef3f9); }
.msg-out { background: #d9fdd3; color: #0b3d2a; } .msg-in, .msg-typing { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11,27,51,.08); } .msg-typing i { background: #94a3b8; }
.msg-chips span { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.msg-match { background: #fff; border: 1px solid var(--sky-line); } .match-head span { color: #b45309; } .match-head b { color: var(--prime); }
.match-bar { background: #e5edf7; } .match-bar i { background: linear-gradient(90deg, #38bdf8, #10b981); } .match-btns span { background: #eef3f9; color: var(--ink-2); } .match-btns .yes { color: #fff; }
.msg-match .ok::before { color: var(--ok); } .msg-match .warn::before { color: #d97706; } .msg-note { color: var(--ink-3); background: none; box-shadow: none; }
.reach { border-top-color: rgba(30,64,175,.14); } .reach li { border-left-color: rgba(30,64,175,.12); }
.reach strong { background: linear-gradient(135deg, var(--prime), #0891b2); -webkit-background-clip: text; background-clip: text; } .reach span { color: var(--ink-2); }

/* Home sections */
.sec-ink { background: linear-gradient(180deg, #f1f6fe, #f8fbff); color: var(--ink); } .sec-ink h2 { color: var(--ink); } .sec-ink .kicker { color: var(--prime-2); }
.sec-ink::before { background: radial-gradient(circle, rgba(147,197,253,.5), transparent 65%); }
.b { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } .b h3 { color: var(--ink); } .b p { color: var(--ink-2); }
.b-match { background: linear-gradient(135deg, #e3edff, #e4fafe); border-color: #cfe0fb; } .b-wa { background: linear-gradient(160deg, #e3f6ec, #fff); border-color: #c8ecd8; }
.b-ico { background: #e0ecff; color: var(--prime); } .b-wa .b-ico { background: #cdeedd; color: var(--wa-deep); }
.ring-bg { stroke: #d5e3f7; } .ring { stroke: var(--prime-2); } .b-score strong { color: var(--prime); } .b-score span { color: var(--ink-3); }
.b-pinrow span { color: #b45309; background: #fff7e6; border-color: #fde2a8; }
@keyframes pinpop { 0%, 60%, 100% { transform: none; border-color: #fde2a8; } 30% { transform: translateY(-5px); border-color: #f59e0b; } }
.b-wave path { stroke: #10b981; } [data-glow]::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(59,130,246,.12), transparent 70%); }
.cta, .nudge { color: var(--ink); border: 1px solid #cfe0fb; background: radial-gradient(500px 300px at 100% 0, rgba(165,243,252,.7), transparent 60%), radial-gradient(400px 260px at 0 100%, rgba(253,230,138,.6), transparent 60%), linear-gradient(135deg, #e3edff, #f3f8ff); }
.cta h2, .nudge h1, .nudge h2 { color: var(--ink); } .cta p, .nudge p { color: var(--ink-2); }
.helper-art { color: var(--prime); background: radial-gradient(160px 120px at 20% 20%, #a5f3fc, transparent 70%), radial-gradient(180px 140px at 90% 90%, #fde68a, transparent 70%), linear-gradient(135deg, #dbeafe, #eff6ff); } .helper-art i { border-color: rgba(29,78,216,.25); }
.tcard:has(.tcard-photo)::after { background: linear-gradient(180deg, transparent 35%, rgba(11,27,51,.7)); }

/* Footer */
.foot { background: #f1f6fd; color: var(--ink-2); border-top: 1px solid var(--sky-line); } .foot::before { opacity: .9; }
.foot .brand, .foot nav strong { color: var(--ink); } .foot a { color: var(--ink-2); } .foot a:hover { color: var(--prime); } .foot-base { border-top-color: var(--sky-line); }

@media (max-width: 860px) { main:has(> .acct) { background: linear-gradient(180deg, #e6efff 0, #f1f7ff 120px, var(--bg) 120px); } }
@media (max-width: 600px) { .reach li:nth-child(n+3) { border-top-color: rgba(30,64,175,.12); } .hx h1 { font-size: clamp(1.85rem, 8.4vw, 2.3rem); } .phone-body { min-height: 340px; } .cta, .nudge { padding: 24px 18px; } .cta-act .btn, .nudge .btn { width: 100%; } }
:root { --navy: #1d4ed8; --navy-2: #3b82f6; --navy-3: #2563eb; --brand: #1d4ed8; }
.seg input:checked + span { box-shadow: 0 4px 12px rgba(37,99,235,.28); } .dock { background: rgba(255,255,255,.94); border-top: 1px solid var(--sky-line); }
.geo-note { display: flex; gap: 8px; align-items: flex-start; text-align: left; background: #f3f8ff; border: 1px solid var(--sky-line); border-radius: 12px; padding: 10px 12px; color: var(--ink-2); } .geo-note .ico { flex: none; width: 18px; height: 18px; color: var(--prime); margin-top: 2px; }

.callline { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 22px; align-items: end; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #e3edff, #f3f8ff); border: 1px solid #cfe0fb; }
.callline small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .callline a, .callline strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--prime); letter-spacing: .02em; }
.callline p { grid-column: 1 / -1; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 600px) { .callline { grid-template-columns: 1fr 1fr; } }

/* Photos on the form and on a property page */
.photos { display: grid; gap: 12px; } .photos.busy { opacity: .6; pointer-events: none; }
.photos-pick { position: relative; display: block; cursor: pointer; } .photos-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photos-pick span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 92px; border: 2px dashed #b9cdee; border-radius: 18px; background: #f3f8ff; color: var(--prime); font-weight: 600; transition: all .15s; }
.photos-pick:hover span, .photos-pick input:focus-visible + span { border-color: var(--prime-2); background: #e8f1ff; } .photos-pick .ico { width: 24px; height: 24px; }
.photos-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.photos-list li { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #e8eef7; } .photos-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos-list button { position: absolute; right: 5px; top: 5px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(11,27,51,.72); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.photos-count { font-size: .9rem; font-weight: 600; color: var(--gold-ink); } .photos-count.ok { color: var(--ok); }
.photos-kept { background: var(--ok-soft); color: var(--ok); border-radius: 12px; padding: 10px 14px; font-weight: 600; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.check-inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: var(--ink-2); font-size: .9rem; } .muted { color: var(--ink-3); font-size: .84rem; font-weight: 500; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(70%, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: -28px -28px 20px; border-radius: 26px 26px 0 0; scrollbar-width: thin; }
.gallery a { scroll-snap-align: start; display: block; aspect-ratio: 4 / 3; background: #e8eef7; } .gallery a:first-child { grid-column: span 1; } .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery a:only-child { aspect-ratio: 16 / 9; } img.card-media { display: block; }
.other-way { margin-top: 6px; text-align: center; } .other-way summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; padding: 8px; } .other-way[open] { display: grid; gap: 12px; justify-items: center; }
.linkbtn { background: none; border: 0; cursor: pointer; font: inherit; color: var(--prime); text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
@media (min-width: 861px) { .gallery { grid-auto-columns: minmax(46%, 1fr); } }
@media (max-width: 600px) { .gallery { margin: -18px -16px 16px; grid-auto-columns: 86%; } }
@media (max-width: 700px) { .top-wa { padding: 0; width: 40px; min-width: 40px; justify-content: center; } .top-wa span { display: none; } }