/* Cloud POS sales page (/welcome). Plain CSS. Inter is kept on our own site (SIL OFL, fonts/INTER-LICENSE.txt). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #161616;
  --ink-2: #555558;
  --ink-3: #8c8c90;
  --bg: #f8f8f7;
  --outer: #ececea;
  --card: #ffffff;
  --line: #e8e7e4;
  --dash: #d6d5d1;
  --soft: #f2f2f0;
  --orange: #f26a1b;
  --orange-2: #e2580c;
  --orange-soft: #fff1e7;
  --orange-line: #fbd5bb;
  --green: #1fa45a;
  --hatch: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 8px);
  --gut: 56px;
  --radius: 18px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--outer); color: var(--ink); font: 16px/1.55 var(--font); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.03em; }
p { margin: 0; }
.wrap { width: 100%; margin: 0 auto; padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); }
.hl { color: var(--orange); }
.nowrap { white-space: nowrap; }
.up { color: var(--green); }
.down { color: var(--green); font-size: 14px; font-weight: 600; }

/* The page frame: a hatched panel, a content column between dashed lines, dashed bands between sections. */
.frame { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); background: #f3f3f1 var(--hatch); min-height: 100vh; }
.frame > header, .frame > main, .frame > footer { background: var(--bg); border-left: 1px dashed var(--dash); border-right: 1px dashed var(--dash); }
.sep { height: 26px; margin: 0 calc(-1 * var(--gut)); border-top: 1px dashed var(--dash); border-bottom: 1px dashed var(--dash); background: #f3f3f1 var(--hatch); }
.sep-thin { height: 0; border-bottom: 0; }

/* Logo: an orange rounded mark with a sparkle cut out of it */
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(180deg, #f8873f, var(--orange-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); position: relative; flex: none; }
.logo-mark::after, .foot-shape::after { content: ""; position: absolute; inset: 22%; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; white-space: nowrap; padding: 12px 22px; font-size: 15px; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 15px; }
.btn-lg { padding: 16px 36px; font-size: 18px; }
.btn-block { width: 100%; padding: 13px 20px; font-size: 15px; }
.btn-pill { border-radius: 999px; padding: 13px 28px; }
.btn-orange { background: linear-gradient(180deg, #ff8a40 0%, #f96d1f 55%, #f2600f 100%); color: #fff; border: 1px solid #ec5a0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(176, 58, 0, 0.32), 0 12px 26px -8px rgba(249, 103, 28, 0.6); }
.btn-orange:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(176, 58, 0, 0.32), 0 16px 30px -8px rgba(249, 103, 28, 0.7); }
.btn-white { background: #fff; color: var(--ink); border: 1px solid #ebebea; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 18px -8px rgba(0, 0, 0, 0.22); }
.btn-dark { background: #141414; color: #fff; }
.btn-dark:hover { background: #000; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgba(248, 248, 247, 0.9); backdrop-filter: blur(10px); }
.top-row { display: flex; align-items: center; gap: 32px; height: 74px; }
.top-nav { display: flex; gap: 34px; margin: 0 auto; }
.top-nav a { text-decoration: none; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.top-nav a:hover { color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.top-nav + .top-actions { margin-left: 0; }
/* Country switch: Pakistan page or international page */
.region { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid #ebebea; background: #fff; border-radius: 999px; }
.region a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.region a:hover { color: var(--ink); }
.region a.on { background: var(--y-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--y-line); }
.region .flag { width: 18px; height: 18px; flex: none; }

/* Opening */
.hero { position: relative; }
.hero-inner { position: relative; text-align: center; padding-top: 84px; padding-bottom: 92px; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 3px; border: 1.5px solid #f8cdae; background: #fffdfb; border-radius: 999px; font-size: 16px; text-decoration: none; color: var(--ink); }
.badge-new { background: linear-gradient(180deg, #ff8a40, #f2600f); color: #fff; font-weight: 500; padding: 2px 12px; border-radius: 999px; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
h1 { font-size: clamp(40px, 6.2vw, 82px); font-weight: 650; letter-spacing: -0.04em; margin: 30px auto 0; max-width: 13em; line-height: 1.16; }
.hero-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 34em; margin: 26px auto 0; }
.br-sm { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* Cursors with name tags around the heading */
.cursor { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0; pointer-events: none; }
.cursor svg { width: 28px; height: 28px; fill: var(--c); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15)); }
.cursor em { font-style: normal; font-size: 13px; font-weight: 500; color: #fff; background: var(--c); padding: 3px 10px; border-radius: 4px; box-shadow: 0 6px 12px -6px var(--c); }
.cur-1, .cur-2 { flex-direction: column-reverse; align-items: flex-end; }
.cur-1 { --c: #d55df0; left: 3.5%; top: 300px; }
.cur-2 { --c: #8b6cf0; left: 6%; top: 470px; }
.cur-3 { --c: #26b36a; right: 3.5%; top: 280px; }
.cur-4 { --c: #f26a1b; right: 6%; top: 450px; }
.cur-1 em, .cur-2 em { margin-right: 22px; margin-top: -4px; }
.cur-3 em, .cur-4 em { margin-left: 22px; margin-top: -4px; }
.cur-1 svg, .cur-2 svg { margin-left: auto; }

.pill-up { display: inline-flex; align-items: center; background: var(--green); color: #fff; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 6px; letter-spacing: 0; }
.av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid #fff; flex: none; }
.av1 { background: #0f766e; }
.av2 { background: var(--orange-2); }
.av3 { background: #7c3aed; }
.av4 { background: #2563eb; }

/* Dashboard mockup */
.dash-wrap { padding-top: 40px; padding-left: clamp(16px, 7vw, 96px); padding-right: clamp(16px, 7vw, 96px); }
.dash-frame { border-radius: 22px 22px 0 0; padding: 10px 10px 0; background: linear-gradient(180deg, #fcd2b2, #fde7d6); border: 1px solid #f7b98f; border-bottom: 0; box-shadow: 0 -10px 50px -24px rgba(242, 106, 27, 0.55); }
.dash { display: grid; grid-template-columns: 220px 1fr; background: #fff; border-radius: 14px 14px 0 0; overflow: hidden; font-size: 14px; }
.dash-side { background: #fafaf9; border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.dash-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 14px; }
.dash-logo .logo-mark { width: 24px; height: 24px; border-radius: 7px; }
.dash-search { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 10px; color: var(--ink-3); display: flex; justify-content: space-between; margin-bottom: 12px; }
kbd { font: 11px var(--font); background: var(--soft); border-radius: 5px; padding: 1px 6px; color: var(--ink-2); }
.dash-group { font-size: 11px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin: 12px 8px 4px; }
.dash-item { padding: 7px 10px; border-radius: 8px; color: var(--ink-2); }
.dash-item.on { background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); position: relative; }
.dash-item.on::before { content: ""; position: absolute; left: -15px; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--orange); }
.dash-main { padding: 16px 24px 24px; min-width: 0; }
.dash-crumb { display: flex; align-items: center; color: var(--ink-3); font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dash-crumb b { color: var(--ink); font-weight: 600; margin-left: 4px; }
.dash-user { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.dash-user .av { width: 30px; height: 30px; font-size: 11px; }
.dash-title-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 14px; }
.dash-title-row h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 650; }
.dash-btns { display: flex; gap: 10px; }
.dbtn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.dbtn-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.dash-cards { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.dcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.dcard-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dsel { border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; font-size: 12px; color: var(--ink-2); white-space: nowrap; flex: none; }
.dcard-num { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.dcard-num small { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.legend { display: flex; gap: 16px; justify-content: flex-end; font-size: 12px; color: var(--ink-2); }
.legend-col { flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lg-a::before { background: var(--orange); }
.lg-b::before { background: #f9b27c; }
.lg-c::before { background: #fde0c9; }
.lg-soft::before { background: #fbe3c2; }
.bars { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 6px; height: 190px; margin-top: 10px; align-items: end; }
.bar-y { display: flex; flex-direction: column; justify-content: space-between; height: 170px; font-size: 11px; color: var(--ink-3); align-self: start; }
.bar-day { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 190px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.bar-day i { width: 34%; height: var(--h); border-top: 2px solid; border-radius: 2px 2px 0 0; }
.bar-day .b-a { border-color: #e9a46e; background: repeating-linear-gradient(135deg, #f6caa3 0 2px, #fcebdc 2px 6px); }
.bar-day .b-b { border-color: #f1cf8f; background: repeating-linear-gradient(135deg, #fae3b8 0 2px, #fffaf0 2px 6px); }
.bar-day span { position: absolute; bottom: 0; font-size: 11px; color: var(--ink-3); }
.dcard-ring { display: flex; flex-direction: column; }
.ring { width: 100%; max-width: 190px; margin: 6px auto 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 22; }
.ring-bg { stroke: var(--soft); }
.ring-a { stroke: var(--orange); }
.ring-b { stroke: #f9b27c; }
.ring-c { stroke: #fde0c9; }
.ring text { transform: rotate(90deg); transform-origin: 70px 70px; text-anchor: middle; }
.ring-small { font-size: 10px; fill: var(--ink-3); }
.ring-big { font-size: 22px; font-weight: 700; fill: var(--ink); }

/* Kinds of shops: 4 on top, 5 below */
.kinds { padding-top: 56px; padding-bottom: 44px; text-align: center; }
.kinds-title { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -0.02em; font-weight: 600; }
.kinds-grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 1px; margin: 28px auto 0; max-width: 1000px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kind { grid-column: span 4; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 10px; font-weight: 650; font-size: 17px; color: #707075; background: #f6f6f4; letter-spacing: -0.02em; }
.kind:nth-child(-n + 4) { grid-column: span 5; }
.kind svg { width: 26px; height: 26px; fill: none; stroke: #707075; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kinds-more { margin-top: 16px; color: var(--ink-3); font-size: 14px; }

/* Numbers */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 8px; padding-bottom: 8px; background: #efefed; }
.num-card { background: #fafafa; border-radius: 18px; padding: 30px 16px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.num-ico { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #ff8a40, #f2600f); border: 3px solid #fbb98e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -10px rgba(226, 88, 12, 0.9); }
.num-ico svg { width: 28px; height: 28px; fill: #fff; }
.num-ico .ln { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num-card b { font-size: clamp(28px, 2.7vw, 40px); white-space: nowrap; font-weight: 400; letter-spacing: -0.04em; margin-top: 18px; line-height: 1.1; font-family: var(--mono); color: #48484b; }
.num-card b small { font-size: 0.6em; letter-spacing: -0.02em; color: #6a6a6e; margin-left: 0.25em; }
.num-card > span:last-child { color: #2c2c2e; margin-top: 8px; font-size: 15px; }

/* Section heads */
.sec { padding-top: 80px; padding-bottom: 80px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.sec-head h2, .sec-center h2 { font-size: clamp(32px, 3.8vw, 52px); font-weight: 500; margin-top: 16px; max-width: 12em; }
.sec-head > p { max-width: 26em; color: var(--ink-2); font-size: 15px; }
.sec-center { text-align: center; }
.sec-center h2 { margin-left: auto; margin-right: auto; max-width: 18em; }
.sec-sub { color: var(--ink-2); font-size: 15px; margin: 14px auto 0; max-width: 36em; }
.tag { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid #f8d2b6; border-radius: 999px; padding: 5px 16px 5px 5px; font: 700 14px/1 var(--mono); letter-spacing: 0.04em; color: #2c2c2e; background: #fffdfb; }
.tag-dot { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #ff8a40, #f2600f); display: inline-grid; place-items: center; box-shadow: 0 0 0 3px #fde1cc, inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.tag-dot:empty::after { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid #fff; }
.tag-ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag-ico text { fill: #fff; stroke: none; font: 700 9px var(--font); letter-spacing: -0.04em; }

/* Feature cards */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feat { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 24px; }
.feat-panel { position: relative; background: var(--soft); border-radius: 18px; padding: 22px; min-height: 330px; }
.feat-panel::before { content: ""; position: absolute; inset: 14px; background: #fff; border-radius: 16px; z-index: 0; }
.feat-panel > * { position: relative; z-index: 1; }
.feat h3 { font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.02em; margin: 22px 14px 0; }
.feat > p { color: var(--ink-2); font-size: 14px; margin: 8px 14px 0; }
.fp-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 0; }
.fp-head b { font-size: 18px; font-weight: 600; }
.fp-head small { display: block; color: var(--ink-3); font-size: 13px; }
.dots { color: var(--ink-2); font-weight: 700; letter-spacing: 2px; }
.fp-num { font-size: clamp(26px, 2.8vw, 36px); font-weight: 650; letter-spacing: -0.03em; padding: 12px 14px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-legend { margin-left: auto; font-size: 12px; letter-spacing: 0; font-weight: 400; }
.area-chart { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 16px; padding: 18px 14px 4px; }
.ac-top { display: flex; flex-direction: column; font-size: 13px; color: var(--ink-3); }
.ac-top b { font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
.ac-top b.up { color: var(--green); }
.ac-top span { margin-bottom: 12px; }
.ac-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
.ac-rows li { display: grid; grid-template-columns: 82px 1fr 74px; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.ac-rows i { height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--orange) var(--w), transparent var(--w)); }
.ac-rows li:first-child i { box-shadow: 0 6px 14px -6px rgba(234, 88, 12, 0.6); }
.ac-rows b { color: var(--ink); text-align: right; }
.line { display: block; width: 100%; height: 170px; margin-top: 10px; }
.line-path { fill: none; stroke: var(--orange-2); stroke-width: 3; }
.line-hi { fill: #fde4d0; }
.line-dot { fill: var(--orange-2); stroke: #fff; stroke-width: 3; }
.line-tip { position: absolute; left: calc(66.3% - 50px); top: 178px; background: #fff; border-radius: 10px; padding: 5px 10px; font-weight: 700; font-size: 14px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25); }
.months { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; padding: 0 14px; }
.pbars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; height: 210px; align-items: end; padding: 14px 14px 0; }
.pbars div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pbars i { width: 100%; height: var(--h); border-radius: 6px 6px 2px 2px; background: repeating-linear-gradient(135deg, #fde2b0 0 2px, #fef3dc 2px 6px); }
.pbars .pb-on i { background: linear-gradient(180deg, #f8873f, var(--orange-2)); box-shadow: 0 10px 18px -10px rgba(234, 88, 12, 0.7); }
.pbars span { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.pbars em { position: absolute; bottom: calc(70% + 34px); white-space: nowrap; font-style: normal; font-size: 11px; background: #fff; border-radius: 8px; padding: 5px 8px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25); color: var(--ink-2); z-index: 2; }
.feat-panel-table { padding-bottom: 8px; overflow: hidden; }
.fp-app { display: flex; align-items: center; gap: 10px; padding: 14px 14px 0; font-size: 20px; }
.fp-app b { font-weight: 600; letter-spacing: -0.01em; }
.tabs { display: flex; gap: 24px; padding: 16px 14px 0; color: var(--ink-3); font-size: 15px; }
.tab.on { color: var(--ink); font-weight: 600; }
.bills { width: calc(100% - 28px); margin: 14px 14px 0; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bills th { background: #fbfbfa; text-align: left; font-weight: 500; color: var(--ink-2); padding: 9px 10px; border-bottom: 1px solid var(--line); }
.bills td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bills tr:last-child td { border-bottom: 0; }
.bills td:first-child { white-space: nowrap; color: var(--ink-2); }
.item { display: flex; align-items: center; gap: 10px; }
.item small { display: block; color: var(--ink-3); font-size: 12px; }
.bills td:last-child { font-weight: 600; white-space: nowrap; }
.thumb { width: 32px; height: 32px; border-radius: 8px; background: var(--orange-soft); color: var(--orange-2); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }

/* Why */
.why-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.acc { display: grid; gap: 14px; }
.acc details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; transition: background 0.15s; }
.acc details[open] { background: #fcf1e9; border-color: var(--orange-line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 0; font-size: clamp(15px, 1.3vw, 17px); font-weight: 600; letter-spacing: -0.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; margin-left: auto; font-size: 26px; font-weight: 300; color: var(--ink-2); }
.acc details[open] summary::after { content: "−"; }
.acc-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; flex: none; }
.acc-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc details[open] .acc-ico { background: linear-gradient(180deg, #f8873f, var(--orange-2)); }
.acc details[open] .acc-ico svg { stroke: #fff; }
.acc details p { color: var(--ink-2); font-size: 14px; padding: 0 0 18px 54px; }
.why-art { position: relative; border-radius: 28px; padding: 44px 44px 70px; background: linear-gradient(140deg, #fbd1a8, #fde9d4 50%, #f8cfa6); min-height: 480px; border: 8px solid rgba(255, 255, 255, 0.55); }
.why-card { position: relative; background: #fff; border-radius: 22px; padding: 18px 20px 22px; box-shadow: 0 20px 44px -24px rgba(180, 83, 9, 0.45); max-width: 400px; }
.gauge { width: 100%; max-width: 300px; display: block; margin: 8px auto 0; }
.gauge path { fill: none; stroke-width: 30; stroke-linecap: butt; }
.g-bg { stroke: #fde6d4; stroke-dasharray: 18 5; }
.g-on { stroke: var(--orange); stroke-dasharray: 18 5 18 5 18 5 18 5 18 5 18 5 18 5 18 5 14 400; }
.gauge-num { text-align: center; font-size: 36px; font-weight: 650; letter-spacing: -0.03em; margin-top: -54px; }
.gauge-num small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.why-mini { margin-top: 26px; background: var(--soft); border-radius: 14px; padding: 12px 14px; max-width: 190px; }
.why-mini small { color: var(--ink-3); display: block; }
.why-mini b { font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.why-card-2 { position: absolute; right: 26px; bottom: 34px; width: 270px; border: 6px solid rgba(255, 255, 255, 0.6); background-clip: padding-box; }
.why-card-2 .fp-head { padding: 0; color: var(--ink-2); }
.coin { width: 32px; height: 32px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-2); display: grid; place-items: center; font-size: 11px; font-weight: 700; border: 1px solid var(--orange-line); }
.why-big { display: block; font-size: 34px; letter-spacing: -0.03em; margin-top: 10px; }
.why-card-2 small { font-size: 13px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; text-align: left; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; }
.plan-top { background: #f4f4f2; border-radius: 14px; padding: 24px 22px 22px; }
.plan h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.plan-top p { color: var(--ink-2); font-size: 14px; margin-top: 8px; min-height: 3.1em; }
.price { font-size: 36px; font-weight: 650; letter-spacing: -0.03em; margin: 18px 0 22px; }
.price span { font-size: 17px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.plan-list { padding: 22px 14px 10px; }
.plan-list h4 { font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.plan-list ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.plan-list li { position: relative; padding-left: 30px; font-size: 14px; }
.plan-list li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 14px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.plan-main { background: linear-gradient(180deg, #f8873f, var(--orange-2)); border-color: var(--orange-2); box-shadow: 0 30px 60px -30px rgba(234, 88, 12, 0.75); }
.plan-main .plan-top { background: #fff; background-image: linear-gradient(rgba(249, 115, 22, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 115, 22, 0.06) 1px, transparent 1px); background-size: 34px 34px; background-position: right top; }
.plan-main .plan-list, .plan-main .plan-list h4 { color: #fff; }

/* Testimonials */
/* Reviews: arrows at the top right, no scroll bar */
.sec-head-arrows { align-items: flex-end; }
.arrows { display: flex; gap: 12px; }
.arrows button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; border: 1.5px solid #cfcfcd; background: #fff; color: #161616; transition: transform 0.15s; }
.arrows button:hover { transform: scale(1.06); }
.arrows svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrows .arrow-on { background: #f8701f; color: #fff; border-color: #f8701f; }
.arrows button:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.av-pic { padding: 0; overflow: hidden; background: #eee; }
.av-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 12px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.quotes::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: start; margin: 0; background: #fff; border: 1.5px solid #ececea; border-radius: 22px; padding: 30px 30px 24px; display: flex; flex-direction: column; }
.q-mark { width: 46px; height: 33px; fill: #f6c4a4; flex: none; }
.quote blockquote { margin: 26px 0 28px; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.45; color: #59595c; letter-spacing: -0.02em; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px; }
.quote figcaption .av { width: 52px; height: 52px; margin: 0; font-size: 15px; }
.quote figcaption b { display: block; font-size: 18px; font-weight: 500; color: #161616; }
.q-shop { width: 34px; height: 34px; margin-left: auto; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.quote figcaption small { color: var(--ink-3); font-size: 14px; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 44px; text-align: left; }
.faq-col { display: grid; gap: 14px; align-content: start; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.faq details[open] { background: #fcf1e9; border-color: var(--orange-line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; font-size: 26px; font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); font-size: 14px; padding-bottom: 18px; margin-top: -6px; }

/* Contact strip (dark, under the FAQ) */
.strip { margin-top: 48px; border-radius: 20px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; color: #fff; background:
  radial-gradient(70% 180% at 35% 120%, rgba(150, 70, 20, 0.85) 0%, transparent 60%), linear-gradient(90deg, #171210, #2a1a10 55%, #3b2415); position: relative; overflow: hidden; }
.strip::before, .strip::after { content: ""; position: absolute; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.05); top: 0; }
.strip::before { right: 92px; }
.strip::after { right: 48px; top: 44px; }
.strip h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 550; letter-spacing: -0.02em; margin: 0; max-width: none; }
.strip p { color: rgba(255, 255, 255, 0.72); margin-top: 8px; font-size: 15px; }
.strip .btn { position: relative; z-index: 1; }

/* Banner with the dashboard */
.banner { margin-top: 56px; margin-bottom: 56px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 20px; border-radius: 24px; overflow: hidden; background:
  linear-gradient(100deg, #fdf3ea 0%, #fbe2cd 60%, #f8d4b9 100%); border: 1px solid #f5ddca; min-height: 360px; }
.banner-text { padding: 48px 0 48px 44px; }
.banner-text h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 500; margin-top: 18px; max-width: 12em; }
.banner-text .hero-actions { justify-content: flex-start; margin-top: 26px; }
.banner-dash { align-self: end; display: grid; grid-template-columns: 170px minmax(0, 1fr); background: #fff; border-radius: 14px 0 0 0; margin-top: 44px; overflow: hidden; font-size: 12px; box-shadow: -20px 0 50px -30px rgba(160, 70, 15, 0.45); }
.banner-dash .dash-side { padding: 14px 10px; }
.banner-dash .dash-logo { font-size: 15px; }
.banner-dash .dash-item.on::before { left: -11px; }
.banner-dash .dash-main { padding: 12px 18px 16px; }
.banner-dash .dcard-num { font-size: 18px; }
.bars-4 { grid-template-columns: 30px repeat(4, 1fr); height: 160px; gap: 10px; }
.bars-4 .bar-day { height: 160px; }
.bars-4 .bar-y { height: 140px; }

/* Updates on WhatsApp */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.news h2 { font-size: clamp(28px, 3vw, 46px); font-weight: 500; margin-top: 16px; max-width: 13em; }
.news-side h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.news-box { display: inline-flex; margin-top: 16px; text-decoration: none; }
.news-box .btn { padding: 14px 34px; font-size: 17px; }
.news-box:hover .btn { transform: translateY(-1px); }
.news-side p { margin-top: 12px; font-size: 14px; color: #3a3a3c; }

/* Footer */
.foot { position: relative; overflow: clip; padding-top: 64px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; z-index: 1; padding-bottom: 72px; }
.foot-brand p { color: var(--ink-2); font-size: 14px; margin-top: 14px; max-width: 22em; }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a { width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--orange); display: grid; place-items: center; box-shadow: 0 6px 12px -8px rgba(226, 88, 12, 0.9); background: #fff; }
.socials svg { width: 20px; height: 20px; fill: none; stroke: var(--orange-2); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.foot-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.foot-col h4 { font-size: 15px; font-weight: 600; color: #3f3f43; letter-spacing: -0.01em; margin-bottom: 4px; }
.foot-col a { text-decoration: none; color: var(--ink-2); }
.foot-col a:hover { color: var(--orange-2); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 28px; color: var(--ink-2); font-size: 13px; position: relative; z-index: 1; }
.foot-bottom a { text-decoration: none; }
.foot-shape { position: absolute; right: -40px; bottom: -70px; width: 250px; height: 250px; border-radius: 60px; background: rgba(242, 106, 27, 0.13); }
.foot-shape::after { background: var(--bg); }

a:focus-visible, summary:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; border-radius: 8px; }

/* Plain pages (privacy, terms) */
.doc { max-width: none; padding-top: 60px; padding-bottom: 60px; padding-left: max(24px, calc((100% - 760px) / 2)); padding-right: max(24px, calc((100% - 760px) / 2)); }
.doc h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 8px; text-align: left; max-width: none; }
.doc h2 { font-size: 22px; margin: 34px 0 8px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--ink-2); font-size: 17px; }
.doc p + p { margin-top: 10px; }
.doc .muted { color: var(--ink-3); font-size: 14px; }

/* Big screens: a wider frame and everything a little larger, like the reference design on a 1920 px screen. */
@media (min-width: 1700px) {
  :root { --gut: 100px; }
  .frame { max-width: 1430px; zoom: 1.1; }
}
@media (min-width: 1900px) {
  .frame { zoom: 1.2; }
}
/* Brand colours: lime (#B5F524) highlights and navy buttons (replaced orange on 24 Oct 2026; orange backup in docs/backups/) */
:root { --y: #b5f524; --y-2: #9bdc12; --y-soft: #f5fde2; --y-line: #d3f08a; --navy: #1c1740; --navy-2: #2a2460; }
.hl { color: var(--ink); background: linear-gradient(transparent 16%, var(--y) 16%, var(--y) 94%, transparent 94%); padding: 0 0.1em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.btn-orange, .btn-orange:hover { background: linear-gradient(180deg, var(--navy-2), var(--navy)); border-color: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 24px -10px rgba(28, 23, 64, 0.55); }
.logo-mark { background: linear-gradient(180deg, var(--navy-2), var(--navy)); }
.logo-mark::after { background: var(--y); }
.badge { border-color: var(--y-line); background: #fff; }
.badge-new { background: var(--y); color: var(--ink); box-shadow: none; }
.tag { border-color: var(--y-line); background: #fff; }
.tag-dot { background: var(--y); box-shadow: 0 0 0 3px #e6f9c8; }
.tag-dot:empty::after { border-color: var(--ink); }
.tag-ico svg { stroke: var(--ink); }
.tag-ico text { fill: var(--ink); }
.num-ico { background: var(--y); border-color: #d6f2a4; box-shadow: 0 8px 18px -10px rgba(80, 130, 10, 0.55); }
.num-ico svg { fill: var(--ink); }
.num-ico .ln { stroke: var(--ink); }
.dash-frame { background: linear-gradient(180deg, #e4f9c0, #f6fdea); border-color: #c9ec8c; box-shadow: 0 -10px 50px -24px rgba(110, 170, 20, 0.5); }
.dash-item.on::before { background: var(--navy); }
.dbtn-on { background: var(--navy); border-color: var(--navy); }
.lg-a::before { background: var(--navy); }
.lg-b::before { background: var(--y-2); }
.lg-c::before { background: #e4e3ef; }
.lg-soft::before { background: #e2f7bf; }
.bar-day .b-a { border-color: var(--navy); background: repeating-linear-gradient(135deg, #cfcde3 0 2px, #f0eff7 2px 6px); }
.bar-day .b-b { border-color: #84c21a; background: repeating-linear-gradient(135deg, #d9f5a8 0 2px, #f5fde6 2px 6px); }
.ring-a { stroke: var(--navy); }
.ring-b { stroke: var(--y-2); }
.ring-c { stroke: #e4e3ef; }
.ac-rows i { background: linear-gradient(90deg, var(--navy) var(--w), transparent var(--w)); }
.ac-rows li:first-child i { box-shadow: 0 6px 14px -6px rgba(28, 23, 64, 0.6); }
.line-path { stroke: var(--navy); }
.line-hi { fill: #e4f8c4; }
.line-dot { fill: var(--navy); }
#lf stop { stop-color: #1c1740; }
.pbars i { background: repeating-linear-gradient(135deg, #d9f5a8 0 2px, #f5fde6 2px 6px); }
.pbars .pb-on i { background: linear-gradient(180deg, var(--navy-2), var(--navy)); box-shadow: 0 10px 18px -10px rgba(28, 23, 64, 0.7); }
.thumb { background: var(--y-soft); color: var(--ink); }
.fp-app .logo-mark { background: var(--navy); }
.acc details[open] { background: var(--y-soft); border-color: var(--y-line); }
.acc details[open] .acc-ico { background: var(--y); }
.acc details[open] .acc-ico svg { stroke: var(--ink); }
.why-art { background: linear-gradient(140deg, #d7f3a2, #f4fde6 50%, #cbee8a); }
.g-on { stroke: var(--navy); }
.g-bg { stroke: #dcefc0; }
.coin { background: var(--y-soft); color: var(--ink); border-color: var(--y-line); }
.plan-main { background: linear-gradient(180deg, #c4f84e, var(--y)); border-color: #93d22a; box-shadow: 0 30px 60px -30px rgba(90, 150, 10, 0.6); }
.plan-main .plan-list, .plan-main .plan-list h4 { color: var(--ink); }
.plan-main .plan-top { background-image: linear-gradient(rgba(28, 23, 64, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 23, 64, 0.05) 1px, transparent 1px); }
.arrows .arrow-on { background: var(--navy); border-color: var(--navy); }
.q-mark { fill: #b5e36a; }
.q-shop { stroke: var(--y-2); stroke-width: 2; }
.faq details[open] { background: var(--y-soft); border-color: var(--y-line); }
.strip { background: radial-gradient(70% 180% at 35% 120%, rgba(181, 245, 36, 0.22) 0%, transparent 60%), linear-gradient(90deg, #120f2b, #1c1740 55%, #241e52); }
.banner { background: linear-gradient(100deg, #f6fdeb 0%, #e6f8c8 60%, #d2f2a0 100%); border-color: #dcefc4; }
.socials a { border-color: var(--navy); box-shadow: 0 6px 12px -8px rgba(28, 23, 64, 0.8); }
.socials svg { stroke: var(--navy); }
.foot-col a:hover { color: var(--navy); }
.foot-shape { background: rgba(181, 245, 36, 0.28); }
.cur-4 { --c: #1c1740; }
.av2 { background: var(--navy); }
a:focus-visible, summary:focus-visible, .arrows button:focus-visible { outline-color: #84c21a; }

/* Lime leads, navy supports: charts and small accents in lime; main buttons stay navy */
.lg-a::before { background: var(--y); box-shadow: inset 0 0 0 1px #8cc80f; }
.lg-b::before { background: var(--navy); }
.lg-soft::before { background: #dcdbea; }
.bar-day .b-a { border-color: #7fb20f; background: linear-gradient(180deg, #c4f84e, var(--y)); }
.bar-day .b-b { border-color: var(--navy); background: repeating-linear-gradient(135deg, #cfcde3 0 2px, #f0eff7 2px 6px); }
.ring-a { stroke: var(--y); }
.ring-b { stroke: var(--navy); }
.ac-rows i { background: linear-gradient(90deg, var(--y) var(--w), transparent var(--w)); }
.ac-rows li:first-child i { box-shadow: 0 6px 14px -6px rgba(120, 170, 10, 0.7); }
.line-path { stroke: #8cc80f; stroke-width: 3.5; }
#lf stop { stop-color: #b5f524; }
.line-hi { fill: #eef9d2; }
.line-dot { fill: var(--navy); }
.pbars i { background: repeating-linear-gradient(135deg, #dcdbea 0 2px, #f3f2f8 2px 6px); }
.pbars .pb-on i { background: linear-gradient(180deg, #c4f84e, var(--y)); box-shadow: 0 10px 18px -10px rgba(120, 170, 10, 0.8); }
.g-on { stroke: var(--y); }
.g-bg { stroke: #e7e7ee; }
.dbtn-on { background: var(--y); border-color: var(--y); color: var(--ink); }
.av2 { background: var(--y); color: var(--ink); }
.arrows .arrow-on { background: var(--y); border-color: var(--y); color: var(--ink); }
.strip .btn-white { background: var(--y); border-color: var(--y); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(181, 245, 36, 0.6); }
.dash-item.on::before { background: var(--y); }

@media (max-width: 1180px) {
  .cursor { display: none; }
}
@media (max-width: 1000px) {
  :root { --gut: 20px; }
  .top-nav { display: none; }
  .dash { grid-template-columns: 1fr; }
  .dash .dash-side { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .feat-grid, .why-grid, .faq, .news { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner-text { padding: 40px 28px 0; }
  .banner-dash { margin-left: 28px; margin-top: 10px; }
  .quotes { grid-auto-columns: 82%; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .kinds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kind, .kind:nth-child(-n + 4) { grid-column: span 1; }
  .kind:last-child { grid-column: 1 / -1; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-art { min-height: 0; padding: 30px 24px; }
  .why-card-2 { position: relative; right: auto; bottom: auto; margin: -20px 0 0 auto; }
}
@media (max-width: 600px) {
  :root { --gut: 0px; }
  .frame > header, .frame > main, .frame > footer { border-left: 0; border-right: 0; }
  body { font-size: 15px; }
  .hide-sm { display: none; }
  .region a span { display: none; }
  .region a { padding: 5px 6px; }
  .top-row { gap: 10px; }
  .top-actions { gap: 8px; }
  .top .logo { font-size: 18px; gap: 7px; }
  .top .btn-sm { padding: 9px 14px; font-size: 14px; }
  .hero-inner { padding-top: 48px; padding-bottom: 52px; }
  .br-lg { display: none; }
  .br-sm { display: inline; }
  h1 { font-size: clamp(34px, 10vw, 40px); }
  .badge { font-size: 12px; }
  .hero-actions .btn { width: 100%; }
  .dash-wrap { padding-top: 24px; }
  .dash-frame { padding: 6px 6px 0; border-radius: 16px 16px 0 0; }
  .dash-main { padding: 12px; }
  .dash-cards { grid-template-columns: minmax(0, 1fr); }
  .dash-btns { display: none; }
  .bars { grid-template-columns: 26px repeat(7, 1fr); gap: 3px; }
  .kind { font-size: 14px; padding: 20px 8px; gap: 8px; flex-direction: column; }
  .num-card { padding: 20px 10px; }
  .num-card b { font-size: 26px; }
  .sec { padding-top: 48px; padding-bottom: 48px; }
  .sec-head { margin-bottom: 28px; }
  .quotes { grid-auto-columns: 100%; gap: 16px; }
  .feat { border-radius: 20px; padding: 10px 10px 22px; }
  .feat h3, .feat > p { margin-left: 10px; margin-right: 10px; }
  .feat-panel { padding: 16px 10px; min-height: 0; }
  .feat-panel::before { inset: 8px; }
  .area-chart { grid-template-columns: minmax(0, 1fr); }
  .ac-rows li { grid-template-columns: 70px minmax(0, 1fr) 62px; gap: 6px; }
  .line-tip { top: 160px; }
  .pbars { gap: 5px; }
  .pbars em { left: -30px; }
  .bills { font-size: 12px; }
  .bills th:nth-child(3), .bills td:nth-child(3) { display: none; }
  .acc details { padding: 2px 14px; }
  .acc details p { padding-left: 0; }
  .acc-ico { width: 36px; height: 36px; }
  .why-art { padding: 18px 14px; }
  .why-card-2 { width: 100%; margin: 14px 0 0; }
  .quote { padding: 22px 20px 18px; }

  .strip { padding: 26px 20px; }
  .strip .btn { width: 100%; }
  .banner { margin-top: 36px; margin-bottom: 36px; }
  .banner-text { padding: 30px 20px 0; }
  .banner-text .btn { flex: 1; }
  .banner-dash { grid-template-columns: minmax(0, 1fr); margin-left: 20px; }
  .banner-dash .dash-side { display: none; }
  .news { padding-top: 40px; padding-bottom: 40px; gap: 20px; }
  .news-box { display: flex; }
  .news-box .btn { flex: 1; }
  .kinds { padding-top: 40px; padding-bottom: 32px; }
  .faq { margin-top: 28px; }
  .strip { margin-top: 32px; }
  .foot { padding-top: 44px; }
  .tag { font-size: 12px; }
  .btn-lg { padding: 15px 28px; font-size: 17px; }
  .foot-grid { gap: 26px; padding-bottom: 48px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media print {
  .top, .strip, .hero-actions, .socials, .news, .cursor, .arrows { display: none; }
  body, .frame { background: #fff; }
}