/* Khatm (ختم) — calm sage + deep navy-green ink + watercolour olive, receipt paper for anything printed. Light only. Tokens first; screens use tokens, never raw hex. */
:root {
  --paper: #F5F4EF;      /* page: soft warm white */
  --paper-2: #ECEEE8;    /* sunk areas */
  --sheet: #FFFFFD;      /* thermal paper / cards */
  --surface: #FFFFFF;
  --ink: #12201F;        /* deep green-black text */
  --ink-2: #4A5856;
  --ink-3: #84908D;
  --line: rgba(18, 48, 47, .10);
  --line-2: rgba(18, 48, 47, .19);
  --blue: #12302F;       /* deep navy-green ink — THE brand colour (name kept for compatibility) */
  --blue-2: #1D4541;
  --blue-deep: #0B2321;
  --blue-ink: #1F4C46;   /* brand text on paper */
  --blue-tint: #DFE7E3;  /* sage */
  --sage: #DFE7E3; --sage-2: #D2DDD8;
  --olive: #7A8550; --olive-2: #A3AD72; --olive-tint: #E9ECDD;
  --on-blue: #F5F4EF;
  --ok: #0C8457; --ok-tint: #E2F2EA;
  --warn: #B26A00; --warn-tint: #F8EDD9;
  --bad: #C53A1F; --bad-tint: #F8E3DC;
  --shadow-1: 0 1px 2px rgba(16,17,20,.06), 0 4px 14px rgba(16,17,20,.05);
  --shadow-2: 0 2px 6px rgba(16,17,20,.06), 0 24px 60px -18px rgba(16,17,20,.22);
  --shadow-paper: 0 1px 1px rgba(16,17,20,.05), 0 18px 40px -16px rgba(12,40,36,.35);
  --r: 16px; --r-sm: 10px; --r-lg: 26px;
  --f-dis: 'Rubik', sans-serif;
  --f-ui: 'Rubik', system-ui, sans-serif;
  --f-rcpt: 'Handjet', 'Rubik', monospace;
  --wrap: 1240px;
  color-scheme: light;
}
html[lang="en"] { --f-dis: 'Funnel Display', 'Funnel Sans', sans-serif; --f-ui: 'Funnel Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--f-ui); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
html[lang="en"] body { font-size: 16.5px; line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue); color: var(--on-blue); }

h1, h2, h3, .dis { font-family: var(--f-dis); font-weight: 600; letter-spacing: -.01em; line-height: 1.14; margin: 0; color: var(--ink); }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] .dis { font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.25; }
p { margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.small { font-size: 14px; } .tiny { font-size: 13px; }

/* ---------- layout ---------- */
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.wrap-n { width: min(880px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 120px; position: relative; }
.row { display: flex; align-items: center; gap: 12px; } .between { justify-content: space-between; } .wrap-row { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; } .grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .section { padding-block: 80px; } .wrap, .wrap-n { width: calc(100% - 32px); } }

/* section heading: small index + eyebrow, big Changa title */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--blue-ink); letter-spacing: .01em; }
html[lang="en"] .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.eyebrow .ix { font-family: var(--f-ui); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); letter-spacing: .04em; }
.blue .eyebrow { color: var(--on-blue); opacity: .8; }
.h-xl { font-size: clamp(48px, 7.4vw, 112px); }
.h-l { font-size: clamp(38px, 5vw, 72px); }
.h-m { font-size: clamp(30px, 3.4vw, 48px); }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-2); line-height: 1.7; max-width: 60ch; }
html[lang="en"] .lede { line-height: 1.55; }
.head { display: grid; gap: 18px; margin-bottom: 56px; }
.head.center { text-align: center; justify-items: center; }

/* blue fields: design surfaces, not a theme. .blue re-tokens children. */
.blue:not(.pill) { background: var(--blue); color: var(--on-blue); --ink: #F5F4EF; --ink-2: rgba(245,244,239,.78); --ink-3: rgba(245,244,239,.55); --line: rgba(245,244,239,.14); --line-2: rgba(245,244,239,.28); --blue-ink: #C9D3A0; }
.sage { background: var(--sage); }
.carbon { background: #0E1C1B; color: #F5F4EF; --ink: #F5F4EF; --ink-2: rgba(245,244,239,.72); --ink-3: rgba(245,244,239,.5); --line: rgba(245,244,239,.12); --line-2: rgba(245,244,239,.24); --blue-ink: #C9D3A0; }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .25; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- buttons, pills, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding-inline: 22px; border-radius: 999px; font-weight: 600; font-size: 16px; white-space: nowrap; transition: transform .15s ease, background .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.97); }
.btn-blue { background: var(--blue); color: var(--on-blue); box-shadow: 0 10px 26px -12px rgba(18,48,47,.55); } .btn-blue:hover { background: var(--blue-2); }
.btn-paper { background: var(--on-blue); color: #12302F; box-shadow: 0 12px 34px -12px rgba(0,0,0,.45); } .btn-paper:hover { background: #fff; }
.btn-ink { background: #12201F; color: #F5F4EF; }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--line-2); } .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost { color: var(--ink); } .btn-ghost:hover { background: var(--line); }
.btn-soft { background: var(--blue-tint); color: var(--blue-ink); }
.btn-ok { background: var(--ok); color: #fff; }
.btn-wa { background: #1FA855; color: #fff; }
.btn-lg { height: 58px; padding-inline: 30px; font-size: 17px; } .btn-sm { height: 38px; padding-inline: 16px; font-size: 14px; } .btn-block { width: 100%; }
.btn .ic { flex: none; }
[dir="rtl"] .flip { transform: scaleX(-1); }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--paper-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-tint); color: var(--ok); } .pill.warn { background: var(--warn-tint); color: var(--warn); } .pill.bad { background: var(--bad-tint); color: var(--bad); }
.pill.blue { background: var(--blue-tint); color: var(--blue-ink); } .pill.olive { background: var(--olive-tint); color: #5E6838; } .pill.solid { background: var(--blue); color: var(--on-blue); } .pill.line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill .dot.live { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 16px; border-radius: 999px; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--sheet); transition: all .15s; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip.on { background: var(--blue); color: var(--on-blue); box-shadow: none; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-2); gap: 2px; }
.seg button { height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.seg button.on { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-1); }
.toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background .2s; }
.toggle::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .2s; }
.toggle.on { background: var(--blue); } .toggle.on::after { inset-inline-start: 21px; }
.field { display: grid; gap: 8px; } .field > label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.input { width: 100%; height: 54px; border-radius: 14px; border: 0; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line-2); padding-inline: 16px; font-size: 17px; outline: none; transition: box-shadow .15s; }
.input:focus { box-shadow: inset 0 0 0 2px var(--blue); }
.input.ltr-in { direction: ltr; text-align: start; }
[dir="rtl"] .input.ltr-in { text-align: end; }
.card { background: var(--sheet); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); padding: 24px; }
.hair { height: 1px; background: var(--line); border: 0; margin: 0; }
.sar small { font-size: .72em; font-weight: 500; opacity: .75; margin-inline-start: .15em; }

/* ---------- reveal on scroll ---------- */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
[data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; transition: none; } }

/* ---------- site shell ---------- */
.hdr { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, color .3s; color: var(--ink); }
.hdr .in { height: 76px; display: flex; align-items: center; gap: 28px; }
.hdr nav { display: flex; gap: 6px; margin-inline-start: 18px; }
.hdr nav a { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; opacity: .86; } .hdr nav a:hover { opacity: 1; background: rgba(255,255,255,.5); }
.hdr .end { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; }
.hdr .lang { height: 38px; padding-inline: 14px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .85; }
.hdr.solid { background: rgba(245,244,239,.86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hdr.solid nav a:hover { background: var(--line); }
.hdr .cta-paper { display: none; }
@media (max-width: 980px) { .hdr nav { display: none; } .hdr .in { gap: 12px; } }
@media (max-width: 520px) { .hdr .lang { display: none; } .hdr .btn { height: 40px; padding-inline: 16px; font-size: 14px; } }
.ftr { padding: 80px 0 40px; }
.ftr .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ftr h4 { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ftr a { display: block; padding: 4px 0; color: var(--ink-2); } .ftr a:hover { color: var(--ink); }
.ftr .qx { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.ftr .qx-l { color: var(--ink-3); }
.ftr a.qx-a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; font-weight: 600; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s; }
[dir="rtl"] .ftr a.qx-a { padding: 6px 6px 6px 14px; }
.ftr a.qx-a:hover { background: rgba(245,244,239,.08); box-shadow: inset 0 0 0 1px var(--olive-2); color: var(--ink); }
.ftr a.qx-a img { width: 28px; height: 28px; border-radius: 8px; }
@media (max-width: 800px) { .ftr .cols { grid-template-columns: 1fr 1fr; } }

/* focus shell (join flow) */
.fhdr { height: 76px; display: flex; align-items: center; justify-content: space-between; }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.logo svg { display: block; flex: none; }
.logo .en { font-family: 'Funnel Display', sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.blue:not(.pill), .carbon { --mk-bg: #F5F4EF; --mk-fg: #12302F; }
.phone .vp { --mk-bg: #12302F; --mk-fg: #F5F4EF; }

/* ---------- the ink stamp ---------- */
.stamp { position: absolute; pointer-events: none; color: var(--blue); mix-blend-mode: multiply; opacity: .92; z-index: 3; }
.stamp.ok { color: var(--ok); } .stamp.bad { color: var(--bad); }
.stamp.thump { animation: thump .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes thump { 0% { transform: scale(2.1) rotate(var(--rot, -12deg)); opacity: 0; } 55% { opacity: .95; } 100% { transform: scale(1) rotate(var(--rot, -12deg)); opacity: .92; } }
@media (prefers-reduced-motion: reduce) { .stamp.thump { animation: none; transform: rotate(var(--rot, -12deg)); } }

/* ---------- thermal receipt ---------- */
.rcpt { --rw: 300px; width: var(--rw); background: var(--sheet); color: #1b1b1f; font-family: var(--f-rcpt); font-weight: 400; font-size: 19px; line-height: 1.12; letter-spacing: .01em; padding: 26px 22px 30px; position: relative;
  -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom/14px 9px repeat-x;
          mask: linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat, conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) bottom/14px 9px repeat-x;
  filter: drop-shadow(0 22px 30px rgba(12,40,36,.22)); }
.rcpt.w80 { --rw: 380px; }
.rcpt .c { text-align: center; } .rcpt .b { font-weight: 700; }
.rcpt .t1 { font-size: 30px; font-weight: 700; line-height: 1; }
.rcpt .t2 { font-size: 21px; font-weight: 600; }
.rcpt .ln { display: flex; justify-content: space-between; gap: 10px; }
.rcpt .ln > :last-child { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.rcpt .dash { border: 0; border-top: 2px dashed rgba(27,27,31,.45); margin: 10px 0; }
.rcpt .tot { font-size: 30px; font-weight: 700; }
.rcpt .qr { width: 132px; height: 132px; margin: 12px auto 6px; }
.rcpt .qr svg { width: 100%; height: 100%; display: block; }
.rcpt .meta { font-size: 16px; color: rgba(27,27,31,.72); }
.rcpt .tag { display: inline-block; padding: 1px 8px; border: 2px solid currentColor; font-weight: 700; font-size: 17px; }
.rcpt-print { overflow: hidden; } /* JS animates height to "print" */

/* ---------- phone ---------- */
.phone { --pw: 360px; width: var(--pw); aspect-ratio: 390 / 844; position: relative; border-radius: calc(var(--pw) * .15); background: #0B0C10; padding: calc(var(--pw) * .028); box-shadow: 0 0 0 1.5px #2A2B31 inset, 0 0 0 1px rgba(0,0,0,.5), var(--shadow-2), 0 50px 90px -30px rgba(12,40,36,.5); flex: none; }
.phone::before { content: ''; position: absolute; top: calc(var(--pw) * .052); left: 50%; transform: translateX(-50%); width: 29%; height: calc(var(--pw) * .085); background: #000; border-radius: 999px; z-index: 5; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .125); overflow: hidden; background: var(--paper); }
.phone .vp { --ink: #12201F; --ink-2: #4A5856; --ink-3: #84908D; --line: rgba(18,48,47,.10); --line-2: rgba(18,48,47,.19); --blue-ink: #1F4C46; position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--k)); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-size: 16px; }
.phone .sb { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0; font-family: -apple-system, 'SF Pro Text', 'Rubik', sans-serif; font-weight: 600; font-size: 16px; direction: ltr; }
.phone .sb .ind { display: flex; gap: 6px; align-items: center; }
.phone .body { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: none; } .phone .body::-webkit-scrollbar { display: none; }
.phone .tabs { flex: none; height: 84px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 26px; background: rgba(255,254,250,.94); box-shadow: 0 -1px 0 var(--line); }
.phone .tabs button { display: grid; justify-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: #85868D; }
.phone .tabs button.on { color: var(--blue); }
.phone .home-ind { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 9px; background: #12201F; opacity: .85; z-index: 6; }
.phone.night .vp { background: #0E1C1B; color: #F5F4EF; } .phone.night .home-ind { background: #F5F4EF; }
.phone .sheet-bg { position: absolute; inset: 0; background: rgba(10,11,20,.38); z-index: 20; display: flex; align-items: flex-end; animation: fade .2s; }
.phone .sheet { width: 100%; background: var(--sheet); border-radius: 28px 28px 0 0; padding: 10px 20px 34px; max-height: 88%; overflow: auto; animation: up .28s cubic-bezier(.2,.9,.3,1); }
.phone .sheet::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 9px; background: var(--line-2); margin: 0 auto 14px; }
@keyframes up { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }
/* in-app typography helpers */
.a-title { font-family: var(--f-dis); font-weight: 600; font-size: 30px; line-height: 1.1; }
.a-pad { padding: 4px 20px 24px; }
.a-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 20px 12px; }
.a-ibtn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.a-card { background: var(--sheet); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.a-cta { position: sticky; bottom: 0; padding: 12px 20px 16px; background: linear-gradient(to top, var(--paper) 70%, transparent); }
.netbar { margin: 0 16px 10px; border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.netbar.off { background: #12201F; color: #F5F4EF; } .netbar.sync { background: var(--blue); color: var(--on-blue); }

/* ---------- toast + modal ---------- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #12201F; color: #F5F4EF; padding: 13px 20px; border-radius: 999px; font-weight: 500; font-size: 15px; z-index: 200; box-shadow: var(--shadow-2); animation: up .3s cubic-bezier(.2,.9,.3,1); display: flex; gap: 10px; align-items: center; max-width: calc(100% - 32px); }
.modal-bg { position: fixed; inset: 0; z-index: 150; background: rgba(10,11,30,.45); display: grid; place-items: center; padding: 20px; animation: fade .2s; backdrop-filter: blur(4px); }
.modal { background: var(--sheet); border-radius: 24px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-2); animation: up .3s cubic-bezier(.2,.9,.3,1); }
.modal.wide { width: min(920px, 100%); }
.modal-h { padding: 22px 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .modal-b { padding: 18px 26px 26px; }

/* ---------- back to top ---------- */
.totop { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 120; width: 48px; height: 48px; border-radius: 50%; background: var(--sheet); color: var(--blue); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(18,48,47,.4), inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; } .totop:hover { background: var(--blue); color: var(--on-blue); }
@media (max-width: 600px) { .totop { width: 44px; height: 44px; bottom: 16px; inset-inline-end: 16px; } }

/* ---------- console shell (founder) ---------- */
.con { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.con-side { background: #0E0F13; color: #F4F1E9; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.con-side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: rgba(244,241,233,.7); font-size: 15px; }
.con-side a.on, .con-side a:hover { background: rgba(244,241,233,.08); color: #F4F1E9; }
.con-main { padding: 28px 36px 60px; min-width: 0; }
@media (max-width: 900px) { .con { grid-template-columns: 1fr; } .con-side { position: static; height: auto; flex-direction: row; overflow-x: auto; align-items: center; padding: 12px; } .con-side a { white-space: nowrap; padding: 8px 10px; flex: none; } .con-side > div { padding: 0 6px !important; flex: none; } .con-side > div:last-child { display: none; } .con-main { padding: 20px 16px 60px; } }

/* hero (lead-owned) — see W.hero in core.js: calm sage field, olive branches, centred promise + step-1 form, product rising from below */
.hero { background: var(--sage); position: relative; overflow: hidden; padding-top: 76px; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 50% 30%, rgba(255,255,255,.55), transparent 70%); }
.hero .olive { position: absolute; top: 150px; width: clamp(260px, 29vw, 440px); z-index: -1; pointer-events: none; transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity 1.6s; }
.hero .olive.l { left: -70px; } .hero .olive.r { right: -70px; }
.hero:not(.in) .olive.l { transform: translate(-30px, 30px) rotate(-4deg); opacity: 0; } .hero:not(.in) .olive.r { transform: translate(30px, 30px) rotate(4deg); opacity: 0; }
.hero .copy { text-align: center; max-width: 920px; margin: 0 auto; padding-top: clamp(48px, 8vh, 96px); position: relative; }
.hero .kick { display: inline-flex; gap: 10px; align-items: center; height: 36px; padding-inline: 16px; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.hero .kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 4px rgba(122,133,80,.18); }
.hero h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: 1.1; margin-top: 26px; letter-spacing: -.015em; }
html[lang="en"] .hero h1 { font-size: clamp(46px, 6vw, 92px); line-height: 1.0; }
.hero h1 em { font-style: normal; color: var(--blue-ink); position: relative; }
.hero .sub { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.75; color: var(--ink-2); max-width: 36em; margin: 24px auto 0; }
.hero .hform { display: flex; gap: 8px; width: min(620px, 100%); margin: 36px auto 0; background: var(--sheet); border-radius: 999px; padding: 7px; box-shadow: 0 1px 2px rgba(18,48,47,.06), 0 24px 60px -24px rgba(18,48,47,.4), inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.hero .hform:focus-within { box-shadow: 0 1px 2px rgba(18,48,47,.06), 0 24px 60px -24px rgba(18,48,47,.45), inset 0 0 0 2px var(--blue); }
.hero .hform .cc { display: flex; align-items: center; gap: 6px; padding-inline: 16px 8px; font-weight: 600; color: var(--ink-2); direction: ltr; border-inline-end: 1px solid var(--line); }
.hero .hform input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; padding-inline: 12px; direction: ltr; text-align: start; }
[dir="rtl"] .hero .hform input { text-align: end; }
.hero .hform .btn { height: 54px; }
.hero .hform.err { box-shadow: inset 0 0 0 2px var(--bad), 0 24px 60px -24px rgba(18,48,47,.4); }
.hero .ferr { color: var(--bad); font-size: 14px; margin-top: 10px; min-height: 20px; }
.hero .trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.hero .trust span { display: inline-flex; gap: 7px; align-items: center; } .hero .trust .ic { color: var(--olive); }
.hero .prod { position: relative; height: 470px; margin-top: 56px; width: min(760px, 100%); margin-inline: auto; }
.hero .prod .phone { position: absolute; top: 0; left: 50%; margin-left: -150px; --pw: 300px; z-index: 2; }
.hero .prod .slip { position: absolute; top: 70px; inset-inline-start: -50px; transform: rotate(4deg); z-index: 3; }
[dir="ltr"] .hero .prod .slip { transform: rotate(-4deg); }
.hero .prod .slip .rcpt { --rw: 270px; font-size: 17px; }
.hero .prod .float { position: absolute; z-index: 4; background: var(--sheet); border-radius: 18px; padding: 12px 16px 12px 14px; display: flex; gap: 12px; align-items: center; box-shadow: 0 24px 50px -20px rgba(18,48,47,.45), inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.35; text-align: start; }
.hero .prod .float .fi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.hero .prod::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: 0; height: 120px; background: linear-gradient(to top, var(--sage), transparent); z-index: 5; pointer-events: none; }
@media (max-width: 760px) {
  .hero .copy { padding-top: 28px; }
  .hero h1 { font-size: 44px; margin-top: 20px; } html[lang="en"] .hero h1 { font-size: 40px; line-height: 1.04; }
  .hero .kick { font-size: 13px; height: 32px; padding-inline: 12px; }
  .hero .sub { font-size: 16.5px; margin-top: 16px; line-height: 1.7; }
  .hero .hform { flex-wrap: wrap; border-radius: 22px; padding: 8px; margin-top: 26px; gap: 8px; }
  .hero .hform .cc { display: flex !important; padding-inline: 12px 6px; height: 52px; }
  .hero .hform input { height: 52px; }
  .hero .hform .btn { width: 100%; height: 54px; border-radius: 16px; padding-inline: 16px; font-size: 16px; }
  .hero .trust { gap: 6px 16px; font-size: 13.5px; }
  .hero .olive { width: 150px !important; top: auto !important; bottom: 40px; opacity: .9; }
  .hero .olive.l { left: -46px; } .hero .olive.r { right: -46px; }
}
@media (max-width: 760px) { .hero .prod { height: 420px; margin-top: 40px; } .hero .prod .phone { --pw: 250px; margin-left: -125px; } .hero .prod .slip { display: none; } .hero .prod .slip .rcpt { --rw: 200px; font-size: 14px; padding: 16px 12px 22px; } .hero .prod .slip .rcpt .t1, .hero .prod .slip .rcpt .tot { font-size: 22px; } .hero .prod .slip .rcpt .qr { width: 96px; height: 96px; } .hero .prod .float { display: none; } }
.marq { overflow: hidden; white-space: nowrap; }
.marq .tr { display: inline-flex; gap: 48px; padding-inline-end: 48px; animation: marq 40s linear infinite; }
[dir="rtl"] .marq .tr { animation-name: marq-r; }
@keyframes marq { to { transform: translateX(-100%); } } @keyframes marq-r { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .marq .tr { animation: none; } }