/* landing.css — the public site's ONE stylesheet.
 *
 * Ye poori CSS pehle index.php ke andar <style> me padi thi, isliye andar ke
 * page (about/contact/privacy/terms/refund) ko sirf marketing.css ka chhota
 * hissa milta tha aur wo 'flat' dikhte the. Ab ek hi file, sab jagah ek jaisa.
 *
 * Load order: marketing.css pehle, ye baad me — jahan dono me ek hi cheez ho,
 * wahan landing wala roop jeete.
 */

/* ============================================================
   TIJORI v4 — "Quiet trust" landing
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* ===== TRUSTWORTHY CREAM palette — applied 2026-07-09 (cracked from
     trustworthy.com's live CSS; was the green "Sage" scheme). Canvas cream
     #F7F6EF · warm ink #1F1F1D · greige lines · muted-teal semantics ·
     their pastel ramps for tints · CTA blue #3F60D6. ===== */
  --bg:        #F7F6EF;   /* warm cream canvas — the "lightweight" base */
  --bg-soft:   #FAFAF7;   /* warm off-white soft sections (their #FAFAF7) */
  --bg-card:   #FFFFFF;
  --ink:       #1F1F1D;   /* deep forest charcoal (NOT black) */
  --ink-soft:  #5F615D;
  --ink-mute:  #6E706B;   /* WCAG AA ~4.8:1 on white/sage (buzurg aankhon ke liye safe) */
  --ink-faint: #CFCFC6;
  --line:      #E3E2DB;
  --line-soft: #EBEAE2;
  --green:     #2F6F6C;   /* Tijori emerald primary (was deep forest #2F6F6C) */
  --green-d:   #1F4A48;
  --green-l:   #6FB9B4;
  --green-btn: #2F6F6C;   /* CTA = emerald, white text 4.6:1 (was terracotta #2F6F6C) */
  --green-br:  #A9CFCB;
  --green-bg:  #E8F5EF;
  --green-tint:#FAFAF7;
  --tw-blue:   #2563EB;   /* CTA = Tijori BRAND blue — same blue as the app
                             (one blue across the whole product; #3F60D6 read
                             too dark/somber on cream — Parth 2026-07-09;
                             #2563EB band is the research-cited trust blue,
                             white text passes WCAG AA 4.56:1) */
  --tw-blue-d: #1D4ED8;   /* hover — same as the app's --c-btn-hover */
  --tw-blue-soft: #B7C7FF; /* light periwinkle = Trustworthy "Families" toggle */
  --cmp-line:     #CBC4B4; /* darker table border, visible on the cream band */
  --cmp-line-soft:#E0DACC; /* subtle row separators */
  --gold:      #4B4BB8;   /* accent = soft lavender (was brown gold #4B4BB8) */
  --gold-l:    #7E65FF;
  --gold-br:   #D6D3EE;
  --gold-bg:   #F1F0FF;
  --dark:      #1F1F1D;   /* forest (was brown-black #1F1F1D) */
  --dark-2:    #1C3329;
  --c-sage:   #2F855A;  --c-sage-bg:  #E8F5EF;   /* module accents unified to green/teal (were earthy browns) */
  --c-honey:  #2F6F6C;  --c-honey-bg: #E8F5EF;
  --c-peach:  #0EA5A5;  --c-peach-bg: #E6F8F7;
  --c-plum:   #2E8B57;  --c-plum-bg:  #E8F5EF;
  --c-coral:  #15803D;  --c-coral-bg: #D6F2DD;
  --r-xs: 8px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16,23,18,.05), 0 2px 8px rgba(16,23,18,.04);
  --sh-2: 0 12px 32px -16px rgba(16,23,18,.18);
  --sh-3: 0 28px 64px -28px rgba(10,19,14,.32);
  --f-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:   'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1120px; --pad: 18px;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--f-body); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
strong { font-weight: 700; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 0 0 6px 0; z-index: 999; font-size: 13px; }
.skip:focus { left: 0; }
.eyebrow { display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: var(--bg-soft); border: 1px solid var(--line); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 16px; }
.s-head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.s-head h2 { font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 1.16; letter-spacing: -0.01em; color: var(--ink); }
.s-head h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--green); }
.s-head p { margin-top: 12px; font-size: 14.5px; color: var(--ink-mute); line-height: 1.55; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--f-body); font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: var(--r-s); border: 1px solid transparent; cursor: pointer; min-height: 40px; transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; }
.btn:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 2px; }
.btn-lg { padding: 11px 22px; font-size: 15px; min-height: 44px; border-radius: var(--r-s); }
.btn-primary { background: var(--tw-blue); color: #fff; box-shadow: 0 3px 11px -6px rgba(37,99,235,.25); }
.btn-primary:hover { background: var(--tw-blue-d); transform: translateY(-2px); box-shadow: 0 9px 20px -10px rgba(37,99,235,.35); }
.btn-ghost { background: var(--bg-card); color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: rgba(21,37,30,.06); transform: translateY(-2px); }
.btn-on-dark { background: #fff; color: var(--ink); }
.btn-on-dark:hover { background: var(--gold-bg); transform: translateY(-2px); }
.nav { position: sticky; top: 0; z-index: 60; background: rgba(252,251,244,.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav-in { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; }
.brand { display: inline-flex; align-items: baseline; font-family: 'Inter Tight', var(--f-body); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0; color: var(--ink); text-decoration: none; }
.brand-dot { color: #E7B53F; }
.nav-links { display: none; gap: 28px; font-size: 15px; font-weight: 600; color: var(--ink); }
.nav-links a { transition: color .18s; }
.nav-links a:hover { color: var(--ink-mute); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; }
.auth-lang { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.auth-lang-opt { border: none; background: transparent; cursor: pointer; font-family: var(--f-body); font-size: 12px; font-weight: 600; color: var(--ink-mute); padding: 5px 11px; border-radius: var(--r-pill); line-height: 1; transition: background .18s ease, color .18s ease; }
.auth-lang-opt:hover:not(.is-active) { color: var(--ink); }
.auth-lang-opt.is-active { background: var(--tw-blue-soft); color: var(--ink); }
.auth-lang-opt:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 1px; }
/* nav auth = segmented two-tone pill (Sign in | Sign up) */
.nav-auth { display: inline-flex; align-items: center; background: var(--bg-card); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.nav-auth a { font-family: var(--f-display); font-weight: 500; font-size: 13.5px; line-height: 1; text-decoration: none; border-radius: var(--r-pill); padding: 8px 16px; transition: background .18s ease, color .18s ease; }
.nav-auth .na-in { color: var(--ink); }
.nav-auth .na-in:hover { color: var(--tw-blue); }
.nav-auth .na-up { background: var(--tw-blue); color: #fff; }
.nav-auth .na-up:hover { background: var(--tw-blue-d); }
.nav-auth a:focus-visible { outline: 2px solid var(--tw-blue); outline-offset: 2px; }
.hero { position: relative; padding: 32px 0 40px; overflow: hidden; text-align: center; background: radial-gradient(ellipse 120% 80% at 50% -20%, var(--green-tint) 0%, transparent 60%), var(--bg); }
.hero::before { content: ''; position: absolute; top: -200px; right: -140px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(92,169,138,.08) 0%, transparent 62%); z-index: 0; pointer-events: none; }
.hero::after { content: ''; position: absolute; bottom: -220px; left: -160px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(239,183,62,.05) 0%, transparent 62%); z-index: 0; pointer-events: none; }
.hero-in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 7px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: var(--green-d); box-shadow: var(--sh-1); margin-bottom: 16px; }
.flag { width: 16px; height: 11px; border-radius: 2px; overflow: hidden; background: linear-gradient(180deg,#FF9933 33.3%,#fff 33.3%,#fff 66.6%,#138808 66.6%); position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.06); flex-shrink: 0; }
.flag::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.5px; height: 2.5px; border-radius: 50%; background: #000080; transform: translate(-50%,-50%); }
.hero h1 { font-family: var(--f-serif); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; text-wrap: balance; max-width: 16ch; }
.hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--green); }
.hero-lead { font-size: 15.5px; color: var(--ink-soft); max-width: 48ch; line-height: 1.55; margin-bottom: 18px; }
.hero-lead strong { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }
.hero-pills { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--ink-mute); }
.hero-pills span { display: inline-flex; align-items: center; gap: 6px; }
.hero-pills svg { color: var(--green); flex-shrink: 0; }
.hero-visual { position: relative; width: 100%; max-width: 360px; margin: 26px auto 0; }
.app-glow { position: absolute; inset: -8% -6% -10% -6%; background: radial-gradient(ellipse at 60% 30%, rgba(92,169,138,.22) 0%, transparent 60%), radial-gradient(ellipse at 20% 90%, rgba(239,183,62,.10) 0%, transparent 60%); filter: blur(8px); z-index: 0; pointer-events: none; }
.app-card { position: relative; z-index: 1; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 16px; box-shadow: var(--sh-3); text-align: left; display: grid; gap: 11px; }
.app-top { display: flex; align-items: center; justify-content: space-between; }
.app-greet b { font-family: var(--f-display); font-weight: 800; font-size: 16px; display: block; color: var(--ink); letter-spacing: -.02em; }
.app-greet span { font-size: 12px; color: var(--green); font-weight: 600; }
.app-bell { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--green-bg); color: var(--green-d); flex-shrink: 0; }
.app-alert { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--r-m); background: linear-gradient(135deg, var(--gold-bg), #fff); border: 1px solid #F1F0FF; }
.app-alert-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c-honey-bg); color: var(--c-honey); flex-shrink: 0; }
.app-alert-tx { flex: 1; min-width: 0; }
.app-alert-tx b { font-size: 13.5px; font-weight: 700; display: block; color: var(--ink); }
.app-alert-tx span { font-size: 12px; color: var(--ink-mute); }
.app-alert-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); background: #fff; border: 1px solid #F1F0FF; padding: 3px 8px; border-radius: var(--r-pill); flex-shrink: 0; }
.app-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-mod { display: flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: var(--r-s); background: var(--bg-soft); border: 1px solid var(--line-soft); }
.app-mod b { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); flex: 1; }
.app-mod small { font-size: 12px; font-weight: 800; color: var(--ink-mute); font-family: var(--f-display); }
.m-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.m-ic.c1 { background: var(--green-bg);   color: var(--green-d); }
.m-ic.c2 { background: var(--c-peach-bg); color: var(--c-peach); }
.m-ic.c3 { background: var(--c-honey-bg); color: var(--c-honey); }
.m-ic.c4 { background: var(--c-sage-bg);  color: var(--c-sage); }
.app-vault { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-m); background: #fff; color: var(--ink); border: 1px solid var(--line); }
.app-vault-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #E8F5EF; color: #2F6F6C; flex-shrink: 0; } /* mint tile + teal glyph — solid dark chip read heavy in the hero mock (Parth 2026-07-09) */
.app-vault-tx { flex: 1; min-width: 0; }
.app-vault-tx b { font-size: 13px; font-weight: 700; display: block; }
.app-vault-tx span { font-size: 11.5px; color: var(--ink-mute); }
.app-vault-ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #D6F2DD; color: #1F4A48; font-size: 12px; font-weight: 900; flex-shrink: 0; } /* soft mint ✓ (was a solid dark-teal disc) */
.section { padding: 42px 0; border-top: 1px solid var(--line); }
.features { background: var(--bg-soft); }
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feat { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.feat::after { content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; opacity: .5; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.feat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.feat:hover::after { opacity: .85; transform: scale(1.15); }
.feat-ic { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.feat-ic.c1 { background: var(--green-bg);   color: var(--green-d); }
.feat-ic.c2 { background: var(--c-honey-bg); color: var(--c-honey); }
.feat-ic.c3 { background: var(--c-peach-bg); color: var(--c-peach); }
.feat-ic.c4 { background: var(--c-sage-bg);  color: var(--c-sage); }
.feat-ic.c5 { background: var(--c-plum-bg);  color: var(--c-plum); }
.feat-ic.c6 { background: var(--c-coral-bg); color: var(--c-coral); }
.feat.t1::after { background: var(--green-bg); }
.feat.t2::after { background: var(--c-honey-bg); }
.feat.t3::after { background: var(--c-peach-bg); }
.feat.t4::after { background: var(--c-sage-bg); }
.feat.t5::after { background: var(--c-plum-bg); }
.feat.t6::after { background: var(--c-coral-bg); }
.feat h3 { font-family: var(--f-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.015em; margin-bottom: 6px; }
.feat p { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.docs { background: var(--bg); }
.pill-cloud { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; max-width: 860px; margin: 0 auto; }
.dpill { font-size: 14px; font-weight: 600; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-soft); line-height: 1.2; transition: transform .18s ease, box-shadow .2s ease, filter .18s ease; }
.dpill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(16,23,18,.30); filter: brightness(0.96); }
/* uniform clean WHITE pills (per-category tints looked messy — white where needed) */
.dpill.p-sage  { background: #A9CFCB; color: #1F1F1D; border-color: #A9CFCB; }   /* teal/mint */
.dpill.p-honey { background: #E7C97A; color: #1F1F1D; border-color: #E7C97A; }   /* gold */
.dpill.p-coral { background: #F2A9A5; color: #1F1F1D; border-color: #F2A9A5; }   /* coral */
.dpill.p-plum  { background: #D6D3EE; color: #1F1F1D; border-color: #D6D3EE; }   /* lavender */
.dpill.p-peach { background: #E6A36F; color: #1F1F1D; border-color: #E6A36F; }   /* orange */
.cmp { background: #F7F6EF; }   /* cream band (Trustworthy cream): stands apart from the sage sections above/below */
.cmp-wrap { max-width: 940px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cmp-line); border-radius: var(--r-l); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.cmp-table th, .cmp-table td { padding: 13px 12px; text-align: center; border-bottom: 1px solid var(--cmp-line-soft); vertical-align: middle; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table thead th { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; color: var(--ink); letter-spacing: -0.01em; border-bottom: 1.5px solid var(--cmp-line); }
.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; color: var(--ink-soft); font-weight: 500; width: 48%; line-height: 1.4; }
.cmp-table .cmp-tj { background: var(--bg-card); }
.cmp-table thead .cmp-tj { color: var(--green-d); }
.cmp-table tbody tr:last-child .cmp-tj { border-radius: 0 0 var(--r-m) var(--r-m); }
.cmp-y { color: var(--green); display: inline-block; vertical-align: middle; }
.cmp-n { color: var(--ink-faint); display: inline-block; vertical-align: middle; }
.cmp-m { font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.cmp-foot { max-width: 620px; margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--ink-mute); line-height: 1.55; }
.connect { background: var(--bg-soft); }
.connect-grid { display: grid; gap: 18px; align-items: center; }
.constel { position: relative; }
.constel-svg { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.connect-text { text-align: center; }
.connect-text .eyebrow { background: var(--green-bg); color: var(--green-d); border-color: #D6F2DD; }
.vault { background: var(--bg-soft); color: var(--ink); position: relative; overflow: hidden; }
.vault::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(ellipse, rgba(148,108,34,.05) 0%, transparent 70%); pointer-events: none; }
.vault-in { position: relative; z-index: 1; }
.vault-text { text-align: center; max-width: 600px; margin: 0 auto 32px; }
.vault .eyebrow { color: var(--ink-mute); background: var(--bg); border-color: var(--line); }
.vault h2 { font-family: var(--f-serif); font-weight: 600; font-size: 24px; line-height: 1.16; letter-spacing: -0.01em; margin-bottom: 14px; }
.vault h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--green); }
.vault p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 10px; }
.vault p strong { color: var(--ink); font-weight: 700; }
.handover { max-width: 460px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; box-shadow: var(--sh-2); }
.handover-top { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.handover-top .ic { width: 36px; height: 36px; border-radius: 9px; background: #E8F5EF; color: #2F6F6C; display: grid; place-items: center; flex-shrink: 0; } /* flat mint pastel tile + dark-teal glyph (Trustworthy style) — the old dark green→teal GRADIENT chip read heavy/muddy on cream (Parth 2026-07-09) */
.handover-top b { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; display: block; color: var(--ink); }
.handover-top span { font-size: 11.5px; color: var(--ink-mute); }
.handover-row { display: flex; gap: 11px; padding: 9px 0; }
.handover-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-top: 6px; flex-shrink: 0; }
.handover-row b { font-size: 13px; font-weight: 700; display: block; color: var(--ink); }
.handover-row span { font-size: 12px; color: var(--ink-mute); }
.sec-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.sec-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; }
.sec-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--green-bg); color: var(--green-d); display: grid; place-items: center; flex-shrink: 0; }
.sec-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.015em; margin-bottom: 5px; }
.sec-card p { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
.how { background: var(--bg-soft); }
.how-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.step { text-align: center; max-width: 320px; margin: 0 auto; }
.step-n { width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; background: #E8F5EF; color: #2F6F6C; font-family: var(--f-display); font-weight: 800; font-size: 18px; display: grid; place-items: center; } /* flat mint circle + dark-teal numeral — gradient chips retired with the cream reskin */
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.price-card { position: relative; max-width: 420px; margin: 0 auto; background: var(--bg-card); border-radius: var(--r-xl); padding: 32px 26px; text-align: center; box-shadow: var(--sh-3); border: 1px solid var(--line); }
.price-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-xl); padding: 1.5px; background: var(--ink); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* solid INK ring (Trustworthy price-card) — was a green gradient ring */
.price-amt { font-family: var(--f-display); font-weight: 700; font-size: 44px; letter-spacing: -0.025em; color: var(--ink); line-height: 1; }
.price-per { font-size: 17px; font-weight: 700; color: var(--ink-mute); }
.price-sub { font-size: 13.5px; color: var(--ink-mute); margin-top: 6px; }
.price-sub strong { color: var(--green-d); font-weight: 700; }
.price-feats { list-style: none; text-align: left; margin: 22px 0; display: grid; gap: 10px; }
.price-feats li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.price-feats li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--green) url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 4.5'/></svg>") center/11px no-repeat; }
.price-cta { width: 100%; }
.price-foot { font-size: 12.5px; color: var(--ink-mute); margin-top: 14px; line-height: 1.5; }
.faq-list { max-width: 720px; margin: 0 auto; }
.faq { border-bottom: 1px solid var(--line); }
.faq:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--f-body); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }
.faq-ic { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; transition: all .22s ease; color: var(--ink-soft); }
.faq[open] .faq-ic { background: var(--green); color: #fff; border-color: var(--green); transform: rotate(45deg); }
.faq-a { padding: 0 0 20px; font-size: 14px; color: var(--ink-soft); line-height: 1.65; max-width: 64ch; }
.pf-grid { display: grid; gap: 36px; }
.pf-faq .faq-list { max-width: none; margin: 0; }
.final { text-align: center; background: var(--bg-soft); color: var(--ink); padding: 48px 18px; position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 22% 0%, rgba(148,108,34,.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(176,128,31,.03) 0%, transparent 50%); pointer-events: none; }
.final > * { position: relative; z-index: 1; }
.final h2 { font-family: var(--f-serif); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; line-height: 1.14; max-width: 18ch; margin: 0 auto 14px; }
.final h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--green); }
.final p { font-size: 14.5px; color: var(--ink-soft); max-width: 44ch; margin: 0 auto 24px; }
.footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 40px 0 26px; font-size: 13.5px; color: var(--ink-soft); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { color: var(--ink-mute); max-width: 32ch; margin-top: 10px; line-height: 1.55; font-size: 13px; }
.footer h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { transition: color .18s; }
.footer a:hover { color: var(--green); }
.footer-bottom { padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-mute); }
.footer-bottom .foot-shilpi { display: inline-flex; align-items: center; white-space: nowrap; color: inherit; text-decoration: none; }
.footer-bottom .foot-shilpi img { height: 14px; width: auto; display: block; opacity: .75; }
.footer-bottom .foot-shilpi:hover img { opacity: 1; }
.footer-bottom .foot-shilpi .fs-ico { height: 15px; margin-right: 4px; }
.to-top { position: fixed; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 80; width: 48px; height: 48px; border-radius: 50%; background: var(--tw-blue); color: #fff; border: 1px solid var(--tw-blue); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px -6px rgba(37,99,235,.45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .25s ease, visibility .3s, background .2s ease; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.to-top:hover { background: var(--tw-blue-d); transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--tw-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: translateY(0); }
}
@media (min-width: 560px) {
  :root { --pad: 22px; }
  .hero h1 { font-size: 36px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-brand { grid-column: 1; }
}
@media (min-width: 768px) {
  :root { --pad: 26px; }
  body { font-size: 16.5px; }
  .section { padding: 56px 0; }
  .hero { padding: 52px 0 60px; }
  .hero h1 { font-size: 40px; max-width: 18ch; }
  .hero-lead { font-size: 16.5px; max-width: 52ch; }
  .hero-visual { max-width: 400px; margin-top: 32px; }
  .s-head h2 { font-size: 28px; }
  .vault h2 { font-size: 28px; }
  .final h2 { font-size: 32px; }
  .final { padding: 60px 24px; }
  .price-amt { font-size: 50px; }
  .nav-links { display: inline-flex; }
  .how-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1; }
}
@media (min-width: 1024px) {
  :root { --pad: 32px; }
  .section { padding: 68px 0; }
  .hero { padding: 64px 0 68px; text-align: left; }
  .hero-in { max-width: var(--maxw); display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero-copy { align-items: flex-start; }
  .hero h1 { font-size: 46px; max-width: 15ch; }
  .hero-lead { font-size: 17px; max-width: 46ch; }
  .hero-cta, .hero-pills { justify-content: flex-start; }
  .hero-visual { margin: 0; max-width: 100%; justify-self: end; width: 400px; }
  .s-head h2 { font-size: 34px; }
  .s-head p { font-size: 16px; }
  .vault h2 { font-size: 34px; }
  .final h2 { font-size: 40px; }
  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .sec-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .feat { padding: 26px 24px; }
  .feat-ic { width: 44px; height: 44px; }
  .feat h3 { font-size: 18px; }
  .feat p { font-size: 14.5px; }
  .vault-in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .vault-text { text-align: left; margin: 0; }
  .handover { margin: 0; }
  .pf-grid { grid-template-columns: minmax(360px, 400px) 1fr; gap: 56px; align-items: stretch; }
  .pf-grid .s-head { text-align: left; margin: 0 0 20px; max-width: none; }
  .price-card { margin: 0; }
  .pf-faq { display: flex; flex-direction: column; }
  .pf-faq .faq-list { flex: 1; display: flex; flex-direction: column; }
  .pf-faq .faq { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .connect-grid { grid-template-columns: 1fr .9fr; gap: 40px; }
  /* Diagram 460px ka tha aur saath ka text sirf ~200px — dayein taraf bada
     khaalipan dikhta tha. Thoda chhota karne se dono taraf barabar lagti hai. */
  .constel { min-height: 400px; }
  .connect-text { text-align: left; }
}
@media (min-width: 1200px) {
  .hero h1 { font-size: 54px; }
  .hero-visual { width: 420px; }
  .s-head h2 { font-size: 38px; }
  .vault h2 { font-size: 38px; }
  .final h2 { font-size: 44px; }
}
@media (max-width: 559.98px) {
  :root { --pad: 22px; }
  .nav-in      { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .brand       { font-size: 26px; }
  .nav-cta     { gap: 10px; flex-shrink: 0; align-items: center; }
  .nav-cta .btn-primary { padding: 8px 13px; font-size: 12.5px; min-height: 36px; border-radius: var(--r-s); }
  .nav-auth a { padding: 7px 12px; font-size: 12.5px; }
  .auth-lang     { padding: 2px; }
  .auth-lang-opt { padding: 5px 8px; font-size: 11.5px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; gap: 9px; margin-left: auto; margin-right: auto; }
  .hero-cta .btn { width: 100%; min-height: 46px; padding: 12px 18px; font-size: 14.5px; border-radius: var(--r-s); }
}
#main { display: flex; flex-direction: column; }
.hero        { order: 1; }   /* 1. Promise (5-sec clarity) */
.lp-test     { order: 2; }   /* 2. Hook: self-persuasion test */
.problem     { order: 3; }   /* 3. Agitate (loss aversion) */
.sketch      { order: 4; }   /* 4. Solution reveal */
   /* 5. Quick value strip */
.vault       { order: 6; }   /* 6. Emotional USP (handover) */
.features    { order: 7; }   /* 7. Capability proof */
.connect     { order: 8; }   /* 8. Wow visual (connected system) */
.docs        { order: 9; }   /* 9. Self-relevance (your documents) */
.cmp         { order: 10; }  /* 10. Objection handling */
.whofor      { order: 11; }  /* 11. Self-identification */
.how         { order: 12; }  /* 12. Ease (3 steps) */
#security    { order: 13; }  /* 13. Risk removal before price */
.pricing-faq { order: 14; }  /* 14. Offer + doubts */
.final       { order: 15; }  /* 15. Peak-end emotional close */
.mod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mod { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mod:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: transparent; }
.mod-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px; }
.mod-ic svg { width: 18px; height: 18px; }
.mod-ic.k1 { background: var(--green-bg);   color: var(--green-d); }
.mod-ic.k2 { background: var(--c-peach-bg); color: var(--c-peach); }
.mod-ic.k3 { background: var(--c-sage-bg);  color: var(--c-sage); }
.mod-ic.k4 { background: var(--c-honey-bg); color: var(--c-honey); }
.mod-ic.k5 { background: var(--c-plum-bg);  color: var(--c-plum); }
.mod h3 { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; margin-bottom: 3px; color: var(--ink); }
.mod p { font-size: 12px; color: var(--ink-mute); line-height: 1.4; }
@media (min-width: 768px)  { .mod-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .mod { padding: 16px; } }
@media (min-width: 1024px) { .mod-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.trust-panel { max-width: 720px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); overflow: hidden; }
.trust-row { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px; border-top: 1px solid var(--line-soft); }
.trust-row:first-child { border-top: none; }
.trust-row .t-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--green-bg); color: var(--green-d); display: grid; place-items: center; flex-shrink: 0; }
.trust-row .t-tx { flex: 1; min-width: 0; }
.trust-row .t-tx b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 2px; }
.trust-row .t-tx span { display: block; font-size: 13px; color: var(--ink-mute); line-height: 1.45; }
@media (min-width: 768px) {
  .trust-panel { display: grid; grid-template-columns: 1fr 1fr; max-width: 820px; }
  .trust-row { border-top: none; }
  .trust-row:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .trust-row:nth-child(odd) { border-right: 1px solid var(--line-soft); }
}
.constel-svg { overflow: visible; }
.cn-float { transform-box: fill-box; transform-origin: center; animation: cn-floaty 11s ease-in-out infinite; }
@keyframes cn-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cn-tile { filter: drop-shadow(0 6px 13px rgba(62,75,34,.16)); }
.cn-tile-ai { filter: drop-shadow(0 6px 15px rgba(176,128,31,.28)); }
.cn-label { font-family: var(--f-body); font-size: 15px; font-weight: 600; fill: #1F4A48; letter-spacing: .01em; }
.cn-label-ai { fill: #4B4BB8; }
.cn-glow { transform-box: fill-box; transform-origin: center; animation: cn-glow 7s ease-in-out infinite; }
@keyframes cn-glow { 0%,100% { transform: scale(1); opacity: .12; } 50% { transform: scale(1.14); opacity: .04; } }
.cn-glow-ai { animation: cn-glowAi 5s ease-in-out infinite; }
@keyframes cn-glowAi { 0%,100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.22); opacity: .12; } }
.cn-ring { transform-box: fill-box; transform-origin: center; }
.cn-r1 { animation: cn-spin 95s linear infinite; }
.cn-r2 { animation: cn-spin 140s linear infinite reverse; }
@keyframes cn-spin { to { transform: rotate(360deg); } }
.cn-core { transform-box: fill-box; transform-origin: center; }
.cn-sonar { transform-box: fill-box; transform-origin: center; opacity: 0; }
.cn-s1 { animation: cn-sonar 6.6s ease-out infinite; }
.cn-s2 { animation: cn-sonar 6.6s ease-out infinite 2.2s; }
.cn-s3 { animation: cn-sonar 6.6s ease-out infinite 4.4s; }
@keyframes cn-sonar { 0% { transform: scale(.66); opacity: .3; } 100% { transform: scale(1.85); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cn-float, .cn-ring, .cn-core, .cn-sonar, .cn-glow, .cn-glow-ai { animation: none; }
  .cn-sonar { opacity: 0; }
}

/* ===== Rosier-style sandy wave footer with plants ===== */
.footer { padding-bottom: 0; }
.sand-wave { position: relative; line-height: 0; margin-top: 26px; }
.sand-wave svg { width: 100%; height: 96px; display: block; }
@media (min-width: 768px) { .sand-wave svg { height: 120px; } }

.to-top { bottom: calc(22px + env(safe-area-inset-bottom)); }


/* ===== Hand-drawn values strip (Rosier-style) ===== */





@media (min-width: 768px) {    }
/* ===== Big sketch illustration section ===== */
.sketch { background: var(--bg); text-align: center; padding-top: 8px; border-top: none; }
.sketch svg { width: 100%; max-width: 420px; height: auto; margin: -14px auto 2px; }
.sketch .btn { margin-top: 2px; }
.ink { stroke: #4B4BB8; }
.ink2 { stroke: #2F6F6C; }


/* ===== 10-second self-test (psychological hook) ===== */
.lp-test { background: var(--bg-soft); }
.test-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 860px; margin: 0 auto; }
@media (min-width: 768px) { .test-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.test-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; position: relative; }
.test-n { width: 32px; height: 32px; border-radius: 50%; background: #7E65FF; color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-bottom: 12px; }
.test-card p { font-family: var(--f-serif); font-size: 16.5px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.test-punch { text-align: center; max-width: 560px; margin: 22px auto 0; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.test-punch strong { color: #2F6F6C; }


/* ===== 3-pillar features ===== */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } }
.cat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; }
.cat-h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 800; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--green-d); }
.cat ul { list-style: none; display: grid; gap: 14px; margin-top: 16px; }
.cat li { display: flex; gap: 11px; align-items: flex-start; }
.cat li .ci { width: 32px; height: 32px; border-radius: 9px; background: var(--green-bg); color: var(--green-d); display: grid; place-items: center; flex-shrink: 0; }
.cat li b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.cat li span { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; display: block; }
.feat-note { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ink-soft); max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.55; }
.feat-note strong { color: var(--green-d); }


.sec-top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.sec-top h3 { margin: 0; }
.sec-card p { margin-bottom: 0; }
.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sec-chip { font-size: 11px; font-weight: 700; color: var(--green-d); background: var(--green-tint); border: 1px solid #E8F5EF; padding: 3px 10px; border-radius: 999px; }


/* ===== problem cards: compact + stat emphasis ===== */
.feat { padding: 20px; }
.feat-top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; position: relative; z-index: 1; }
.feat-top .feat-ic { margin-bottom: 0; width: 38px; height: 38px; border-radius: 10px; }
.feat-top h3 { margin-bottom: 0; }
.feat .stat { display: block; font-family: var(--f-serif); font-weight: 600; font-size: 1.5em; line-height: 1.1; color: #2F6F6C; letter-spacing: -0.01em; margin-bottom: 3px; }


/* ============================================================
   HEADING HIERARCHY — primary sections bade, supporting chhote
   Primary  : Hero, Problem, Solution, Vault, Pricing, Final
   Secondary: Test, Features, Connect, Docs, Compare, Who, How, Security, FAQ
   ============================================================ */

/* Eyebrow: Rosier-style — chip hatao, simple gold small-caps */
.eyebrow { background: transparent; border: none; padding: 0; color: #4B4BB8; letter-spacing: .16em; font-size: 11.5px; margin-bottom: 12px; }
.connect-text .eyebrow { background: transparent; border: none; color: #4B4BB8; }
.vault .eyebrow { background: transparent; border: none; color: #4B4BB8; }

/* Secondary sections: heading ek level neeche */
.lp-test .s-head h2, .features .s-head h2, .docs .s-head h2, .cmp .s-head h2,
.whofor .s-head h2, .how .s-head h2, #security .s-head h2,
.connect-text h2, .pf-faq .s-head h2 {
  font-size: 20px;
}
.lp-test .s-head, .features .s-head, .docs .s-head, .cmp .s-head,
.whofor .s-head, .how .s-head, #security .s-head { margin-bottom: 22px; }

@media (min-width: 768px) {
  .lp-test .s-head h2, .features .s-head h2, .docs .s-head h2, .cmp .s-head h2,
  .whofor .s-head h2, .how .s-head h2, #security .s-head h2,
  .connect-text h2, .pf-faq .s-head h2 { font-size: 23px; }
}
@media (min-width: 1024px) {
  .lp-test .s-head h2, .features .s-head h2, .docs .s-head h2, .cmp .s-head h2,
  .whofor .s-head h2, .how .s-head h2, #security .s-head h2,
  .connect-text h2, .pf-faq .s-head h2 { font-size: 26px; }
}


/* ===== Social icons (footer) ===== */
.socials { display: flex; gap: 10px; margin-top: 16px; }
.soc { width: 40px; height: 40px; border-radius: 50%; background: #2F6F6C; color: #fff; display: grid; place-items: center; transition: background .2s ease, transform .18s ease; }
.soc:hover { background: #7E65FF; transform: translateY(-2px); }
.soc:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 2px; }





.final-fam { width: 190px; max-width: 60vw; height: auto; display: block; margin: 0 auto 18px; }
@media (min-width: 768px) { .final-fam { width: 230px; } }


.final p { margin-bottom: 0; }


/* Footer plants — halki sway + sparkle twinkle (2026-06-12) */
@media (prefers-reduced-motion: no-preference) {
  .lp-sway { animation: lpSway 2.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
  .lp-sway2 { animation-duration: 3.2s; animation-delay: -1.3s; }
  .lp-twinkle { animation: lpTwinkle 3.2s ease-in-out infinite; }
}
@keyframes lpSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes lpTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.lp-sway3 { animation-duration: 3s; animation-delay: -.8s; }
.lp-sway4 { animation-duration: 2.3s; animation-delay: -1.9s; }
/* Footer — dark headings, saaf links (Rosier-style contrast) */
.footer h3 { color: #1F1F1D; }
.footer ul a { color: #5F615D; }
.footer ul a:hover { color: #2F6F6C; }
/* Typography balance (SEO scale: H1 > H2 34px > H3, body 16px) + sections kam bade */
.s-head p { font-size: 16px; }
@media (min-width: 900px) {
  .section { padding: 52px 0; }
  .section .s-head h2 { font-size: 34px; }
  /* security-h2 par koi puraana rule cascade mein jeet raha tha jo devtools
     match-list mein bhi nahi dikha — ek targeted important, sirf isi heading par. */
  #security-h2, #connect-h2 { font-size: 34px !important; }
}
/* Readability + SEO type bump (2026-06-12 audit): asli content-text 13.5px+,
   phone-mockup illustration ke andar ke texts jaan-bujh ke chhote hain. */
.eyebrow { font-size: 13px; }
.hero-eyebrow { font-size: 13px; }
.hero-pills { font-size: 13px; }
.cmp-table { font-size: 14.5px; }
.cmp-table thead th { font-size: 13.5px; }
.cmp-m { font-size: 13px; }
.cmp-foot { font-size: 14.5px; }
.cat li b { font-size: 14.5px; }
.cat li span { font-size: 13.5px; }
.trust-row .t-tx span { font-size: 14px; }
.sec-card p { font-size: 15px; }
.sec-chip { font-size: 12px; }
.price-sub { font-size: 14.5px; }
.price-foot { font-size: 13.5px; }
.price-feats li { font-size: 15px; }
.faq summary { font-size: 15.5px; }
.faq-a { font-size: 15px; }
.step p { font-size: 15px; }
.feat-note { font-size: 15px; }
.test-punch { font-size: 15.5px; }
.footer { font-size: 14px; }
.footer-brand p { font-size: 14px; }
.footer h3 { font-size: 12px; }
/* ---- naya: beech ke CTA ---- */
.midcta{text-align:center;margin-top:28px;}
.midcta .sub{display:block;font-size:13px;color:var(--ink-mute);margin-top:10px;}

/* Section CSS ke `order` se sajte hain. Har naye section ko number dena
   zaroori hai — bina number wala 0 ban kar hero se bhi upar chala jaata hai. */
.pricing-faq { order: 15; }
.final       { order: 16; }

/* ============================================================
   "The problem" ke teen card — sab ek jaise.

   Pehle icon heading ke bagal me beech me chipka tha, aur headingon ki
   lambai alag hone se teeno icon teen alag oonchai par baith jaate the.
   Ab icon apni line par, upar — teeno card ek hi jagah se shuru hote hain.
   ============================================================ */
.problem .feat-top{ display:block; margin-bottom:12px; }
.problem .feat-top .feat-ic{ width:40px; height:40px; border-radius:11px; margin:0 0 14px; }
.problem .feat-top h3{ font-size:17px; line-height:1.35; }

/* Bada number ab teeno card par — ek si taal: number, heading, matlab. */
.problem .stat{ display:block; font-family:var(--f-serif); font-weight:600;
  font-size:30px; line-height:1.05; color:#1F4A48; letter-spacing:-0.015em;
  margin:0 0 8px; }

/* Kinare se kata hua gol dhabba — kuch kehta nahi tha, hata diya. */
.problem .feat::after{ display:none; }
.problem .feat:hover{ transform:none; box-shadow:var(--sh-1); border-color:var(--line); }

/* ============================================================
   Har section ek hi safed dabbe me band tha — 15 baar wahi card.
   Neeche unme se do ke dabbe hataye gaye hain. Card ab sirf wahan
   jahan cheez sach me alag object hai (daam ka box, handover ka kagaz,
   comparison table, aur problem ke teen aankde).
   ============================================================ */

/* Security ke chaar vaade — ab bina dabbe ke, sirf halki lakeeron par */
.trust-panel{ background:transparent; border:0; box-shadow:none; border-radius:0; }
.trust-row{ border-top:1px solid var(--line); padding:18px 4px; }
@media (min-width:720px){
  .trust-row:nth-child(1), .trust-row:nth-child(2){ border-top:1px solid var(--line); }
  .trust-row:nth-child(odd){ padding-right:26px; }
  .trust-row:nth-child(even){ padding-left:26px; border-left:1px solid var(--line); }
}

/* Daam: 5 mukhya baatein, baaki teen ek line me */
/* 'Aur bhi' wali line pehle tick-list aur button ke BEECH khadi thi —
   CTA ke raaste me speed-breaker. Ab wo button ke neeche, sabse chhoti
   aur sabse shaant line hai. */
.price-more{ margin:8px 0 0; font-size:12px; color:var(--ink-mute);
  line-height:1.5; text-align:center; }

/* ============================================================
   Hero: app ka ASLI screenshot (pehle yahan haath se banaya ek
   'dashboard jaisa' card tha — wo product hone ka natak karta tha).
   Thoda dayein bahar nikla hua, taaki lage ki screen aage badh rahi hai.
   ============================================================ */
.hero-visual{ padding:0; background:none; box-shadow:none; border:0; }
@media (min-width:900px){
  /* Purane chhote card ke liye yahan 400-420px ki width fix thi.
     Screenshot ko poora khaana chahiye. */
  .hero-visual{ width:100%; max-width:none; justify-self:stretch; }
}
.hero-shot img{ display:block; width:100%; height:auto; border-radius:16px;
  box-shadow:0 30px 70px -32px rgba(16,23,18,.45), 0 2px 6px rgba(16,23,18,.06); }
@media (min-width:900px){
  /* Pehle screenshot ko bahar nikaal kar bada kiya tha, par wo kinare se
     BEECH ME KAT raha tha — toota hua lagta tha. Ab tasveer me sidebar hai
     hi nahi (sirf andar ka panel), aur uska khaana bada kar diya gaya hai,
     taaki poori tasveer aaye aur kuch bhi na kate. */
  .hero-in{ grid-template-columns:.78fr 1.22fr; gap:36px; }
  .hero-shot{ width:100%; max-width:none; }
}

/* ============================================================
   HERO KA SCREENSHOT — dusra daur (Parth: 'dikha nahi pa rahe ache se').

   Pehle poora dashboard 1340px ka tha aur sirf ~620px me dabta tha (46%),
   isliye andar ka koi akshar padha hi nahi jaata tha. Research bhi yahi
   kehti hai: poora dashboard mat dikhao, EK kaam zoom karke dikhao —
   sidebar/menu sirf 'chrome' hai, wo kuch kehta nahi.

   Ab tasveer me sidebar hai hi nahi (navy topbar hai, to app ke apne rang
   bane rehte hain), aur uska khaana bada kar diya gaya hai. Nateeja: wahi
   content lagbhag DOGUNA bada dikhta hai.
   ============================================================ */
/* ============================================================
   HERO KA DHANCHA — heading upar, app neeche (poori chaudai).

   Pehle heading aur screenshot bagal-bagal the. Screenshot ko padhne laayak
   banane ke liye uska khaana badhaya, to hero ka baayan kinara header aur
   baaki page se MEL KHANA BAND ho gaya (page 1120px par ticka hai, hero
   1480px par chala gaya tha) — wo toota hua lagta hai.

   Isliye sabse seedha raasta: heading beech me, uske neeche app ki POORI
   tasveer — sidebar, wordmark, navy topbar sab — page ki apni chaudai
   me. Kinare wahi rehte hain (kuch katta nahi) aur tasveer ~1080px ki ho
   jaati hai, yaani app ke apne naap ka 82%: sab kuch padha jaata hai.
   ============================================================ */
@media (min-width:900px){
  .hero-in{ max-width:var(--maxw); display:block; text-align:center; }
  .hero-copy{ align-items:center; max-width:780px; margin:0 auto; }
  .hero h1{ max-width:22ch; margin-left:auto; margin-right:auto; }
  .hero-lead{ max-width:60ch; margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-visual{ width:100%; max-width:none; margin:38px auto 0; justify-self:auto; }
  .hero-shot{ width:100%; max-width:none; }
}

/* Screenshot cream background par cream tha — tairta hua lagta tha.
   Ek patli lakeer + gehri chhaya usse zameen deti hai. */
.hero-shot img{
  display:block; width:100%; height:auto;
  border-radius:14px;
  border:1px solid rgba(16,23,18,.07);
  box-shadow:0 1px 2px rgba(16,23,18,.05),
             0 18px 34px -18px rgba(16,23,18,.28),
             0 44px 90px -46px rgba(16,23,18,.42);
}

/* ============================================================
   HANDOVER = CHHAPA HUA BOOKLET (Parth ne 4 options me se 'A' chuna).

   App sach me yahi panna print karta hai (Vault → Print). Khada A4 panna,
   halka tedha, letterhead jaisa sirnama; peechhe ek aur panna. Page par
   baaki sab chaudi cheezein hain — isliye khada panna apne aap alag dikhta hai.

   ⚠ Peechhe wala panna WRAPPER (.hbook::before) par hai, panne ke andar
   nahi: tedhe (transform) panne ke andar z-index:-1 lagane se wo saamne ke
   panne ki safed zameen ko hi dhak deta tha aur panna grey dikhta tha.
   ============================================================ */
.hbook{ position:relative; display:flex; justify-content:center;
  max-width:440px; margin:0 auto; padding:10px 0 24px; }
.hbook::before{
  content:''; position:absolute; left:50%; top:10px;
  width:min(400px,100%); aspect-ratio:1/1.3;
  transform:translateX(-50%) rotate(2deg) translate(12px,8px);
  background:#EFEBE0; border-radius:2px;
  box-shadow:0 14px 30px -18px rgba(20,20,10,.25);
}
.hbook-page{
  position:relative; z-index:1;
  width:100%; max-width:400px; min-height:0; aspect-ratio:1/1.3;
  display:flex; flex-direction:column;
  background:#FFFEFB; border-radius:2px;
  padding:32px 32px 22px;
  transform:rotate(-1.6deg);
  box-shadow:
    0 1px 1px rgba(20,20,10,.05),
    0 2px 4px rgba(20,20,10,.05),
    0 22px 44px -18px rgba(20,20,10,.28),
    0 50px 80px -50px rgba(20,20,10,.35);
}
.hbook-head{ border-bottom:2px solid var(--ink); padding-bottom:11px; margin-bottom:13px; }
.hbook-brand{ font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:-.01em; color:var(--ink); }
.hbook-brand i{ color:#E7B53F; font-style:normal; }
.hbook-h1{ font-family:var(--f-serif); font-weight:600; font-size:22px; line-height:1.15; margin-top:9px; color:var(--ink); }
.hbook-meta{ font-size:10.5px; color:var(--ink-mute); margin-top:4px; }
/* '.vault p' (class+tag) sirf-class wale niyam ko hara raha tha — isliye do class */
.hbook .hbook-disc{ margin:0 0 14px; max-width:none; font-size:9.5px; line-height:1.45; color:var(--ink-soft);
  background:#F4F1E8; padding:7px 9px; border-radius:3px; }
.hbook-h2{ font-family:var(--f-display); font-weight:700; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-d); margin:0 0 6px; line-height:1.4; }
.hbook-row{ padding:7px 0; border-top:1px solid #ECE9E0; }
.hbook-row:first-of-type{ border-top:0; }
.hbook-row b{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.hbook-row span{ display:block; font-size:11px; color:var(--ink-soft); line-height:1.45; }
.hbook-foot{ margin-top:auto; padding-top:8px; border-top:1px solid #ECE9E0;
  font-size:9px; color:var(--ink-mute); line-height:1.4; }
.hbook-print{
  position:absolute; right:0; bottom:6px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45);
}

/* Phone par panna chhota, par akshar padhne laayak; tedhapan kam. */
@media (max-width:520px){
  .hbook{ padding:6px 8px 26px; }
  .hbook-page{ padding:24px 22px 40px; transform:rotate(-1deg); aspect-ratio:auto; }
  .hbook::before{ aspect-ratio:auto; top:6px; bottom:26px; height:auto;
    transform:translateX(-50%) rotate(1.4deg) translate(8px,6px); }
  .hbook-h1{ font-size:20px; }
  .hbook-print{ right:auto; left:4px; }  /* dayein kone me site ka 'upar jao' button aata hai */
}