/* إيراد — public site (landing, compare, login). Builds on eraad.css tokens. */
body.site { background: var(--surface); color: var(--ink-2); font-size: 16px; line-height: 1.75; }
.site .container { width: min(1200px, 100% - 48px); margin-inline: auto; }
@media (max-width: 600px) { .site .container { width: calc(100% - 32px); } }
.side .brand svg { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.16); }

/* ---------- header ---------- */
.site-h { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.site-h.scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.94); }
.site-h .inner { display: flex; align-items: center; gap: 32px; height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; }
.wordmark span { font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1; }
.site-h nav.links { display: flex; gap: 4px; }
.site-h nav.links a { color: var(--ink-soft); font-size: .93rem; text-decoration: none; padding: 6px 12px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.site-h nav.links a:hover { color: var(--ink); background: var(--line-2); }
.site-h .h-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.site-h .h-actions .login { color: var(--ink-2); font-size: .93rem; padding: 6px 12px; white-space: nowrap; }
.site-h .h-actions .lang, .site-f .lang { color: var(--muted); font-size: .9rem; padding: 6px 10px; text-decoration: none; white-space: nowrap; }
.site-h .h-actions .lang:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-f .lang { color: #C9D2EA; padding: 0; }
@media (max-width: 1100px) { .site-h nav.links a { padding-inline: 8px; } }
@media (max-width: 960px) { .site-h nav.links { display: none; } }
@media (max-width: 480px) { .site-h .h-actions .login { display: none; } }

/* ---------- type ---------- */
:root:lang(en) body.site { line-height: 1.6; }
:root:lang(en) .display, :root:lang(en) .s-title, :root:lang(en) .closing h2, :root:lang(en) .auth .a-side h2, :root:lang(en) .tool-h h1 { line-height: 1.15; letter-spacing: -.015em; }
:root:lang(en) .hero h1 { line-height: 1.08; }
:root:lang(en) .wordmark span { letter-spacing: -.02em; }
.display { font-family: var(--f-display); font-weight: 700; color: var(--ink); line-height: 1.45; letter-spacing: 0; }
.s-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem); color: var(--ink); line-height: 1.45; margin: 0 0 14px; }
.s-lead { color: var(--ink-soft); font-size: 1.06rem; max-width: 60ch; margin: 0; }
.head { margin-bottom: 44px; }
.head.center { text-align: center; }
.head.center .s-lead { margin-inline: auto; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 56px 0 88px; overflow: hidden; background: linear-gradient(180deg, #F7F9FE 0%, #FFFFFF 100%); }
.hero::before { /* ledger grid, fading out */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--blue-100) 1px, transparent 1px), linear-gradient(90deg, var(--blue-100) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .55;
  -webkit-mask-image: radial-gradient(70% 60% at 30% 35%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 30% 35%, #000 0%, transparent 75%);
}
.hero .container { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem); margin: 0 0 20px; line-height: 1.4; }
.hero h1 .soft { color: var(--blue); }
.hero .lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin: 0; }
.hero .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.hero .fine { margin-top: 16px; font-size: .86rem; color: var(--muted); }
.channels { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.channels p { margin: 0 0 10px; font-size: .84rem; color: var(--muted); }
.channels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.channels li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); box-shadow: var(--sh-1); }
.channels li svg { width: 15px; height: 15px; color: var(--blue); }
[dir="ltr"] .hero::before { -webkit-mask-image: radial-gradient(70% 60% at 70% 35%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 70% 35%, #000 0%, transparent 75%); }
@media (max-width: 1040px) { .hero .container { grid-template-columns: minmax(0, 1fr); gap: 44px; } .hero { padding-top: 36px; } }

/* ---------- convergence stage (hero) ---------- */
.stage { position: relative; }
.stage .srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 2; }
.src { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 12px 12px 14px; font-size: .78rem; line-height: 1.75; color: var(--ink-2); min-width: 0; }
.src .src-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.src .src-h b { font-size: .8rem; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src .tag { flex: none; font-size: .66rem; font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.src .tag.pdf { background: var(--red-050); color: var(--red); }
.src .tag.msg { background: var(--blue-050); color: var(--blue-700); }
.src .tag.img { background: var(--amber-050); color: var(--amber); }
.src .lines { margin: 0; padding: 0; list-style: none; }
.src .lines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.src.doc .lines { border-top: 1px dashed var(--line); padding-top: 6px; }
.src.chat .bubble { background: var(--blue-050); border-radius: 10px; border-end-start-radius: 2px; padding: 8px 10px; }
.src.photo { transform: rotate(-1.6deg); background: #FDFDFB; background-image: repeating-linear-gradient(180deg, transparent 0 21px, #EEF0F4 21px 22px); }
.src.photo .lines li { font-style: italic; line-height: 22px; }
.src.photo { background-position: 0 31px; }
.src mark { background: none; color: inherit; border-radius: 3px; padding: 0 2px; }
.src mark.vat { background: var(--amber-050); box-shadow: inset 0 -2px 0 var(--amber-500); }
.src mark.err { background: var(--red-050); box-shadow: inset 0 -2px 0 var(--red); }

.flow { display: block; width: 100%; height: 64px; position: relative; z-index: 1; overflow: visible; }
.flow path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.flow circle { fill: var(--blue); }

.sheet { position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); overflow: hidden; }
.sheet-h { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #FBFCFE; }
.sheet-h .ref { color: var(--ink); font-weight: 600; font-size: .9rem; }
.sheet-h .note { font-size: .78rem; color: var(--muted); }
.sheet-h .replay { margin-inline-start: auto; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 12px; font-size: .78rem; color: var(--ink-soft); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sheet-h .replay:hover { border-color: var(--line-strong); color: var(--ink); }
.sheet-h .replay svg { width: 13px; height: 13px; }
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); text-align: end; white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { text-align: start; white-space: normal; }
.cmp thead th { font-weight: 500; color: var(--muted); font-size: .8rem; background: #FBFCFE; border-bottom: 1px solid var(--line); }
.cmp th.win, .cmp td.win { background: var(--blue-050); }
.cmp thead th.win { color: var(--blue-700); font-weight: 600; box-shadow: inset 0 3px 0 var(--blue); }
.cmp td .q { display: block; font-size: .74rem; color: var(--muted); }
.cmp td.low { color: var(--ink); font-weight: 600; }
.cmp .fix { display: inline-block; margin-inline-start: 6px; font-size: .68rem; font-weight: 600; padding: 0 6px; border-radius: 4px; vertical-align: 1px; }
.cmp .fix.vat { background: var(--amber-050); color: var(--amber); }
.cmp .fix.err { background: var(--red-050); color: var(--red); }
.cmp td.na { color: var(--muted); background: repeating-linear-gradient(-45deg, #F6F7FA, #F6F7FA 5px, #fff 5px, #fff 10px); font-size: .8rem; }
.cmp s { color: var(--red); text-decoration-thickness: 1.5px; margin-inline-end: 6px; font-weight: 400; }
.cmp tfoot td { font-weight: 600; color: var(--ink); background: #FBFCFE; }
.cmp tfoot td.win { background: var(--blue-050); color: var(--blue-700); }
.cmp tfoot tr.total td { border-top: 1px solid var(--line); font-size: .95rem; border-bottom: 0; }
.cmp tfoot td.bad { color: var(--red); font-weight: 500; font-size: .84rem; }
.verdict { display: flex; gap: 12px; align-items: center; margin: 14px 16px 16px; padding: 12px 14px; border-radius: var(--r); background: var(--ink); color: #DCE3F5; font-size: .9rem; line-height: 1.6; background-image: radial-gradient(90% 160% at 0% 0%, rgba(46,80,240,.5), transparent 60%); }
.verdict b { color: #fff; }
.verdict .pct { flex: none; display: grid; place-items: center; min-width: 64px; height: 44px; border-radius: var(--r); background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* one orchestrated load sequence */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes riseTilt { from { opacity: 0; transform: translateY(14px) rotate(-1.6deg); } to { opacity: 1; transform: rotate(-1.6deg); } }
@keyframes draw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.stage.play .src { animation: rise .55s var(--ease) both; }
.stage.play .src.photo { animation-name: riseTilt; }
.stage.play .src:nth-child(1) { animation-delay: .05s; }
.stage.play .src:nth-child(2) { animation-delay: .2s; }
.stage.play .src:nth-child(3) { animation-delay: .35s; }
.stage.play .flow path { stroke-dasharray: 120; animation: draw .7s ease-out .75s both; }
.stage.play .flow circle { animation: fadeIn .3s ease 1.35s both; }
.stage.play .sheet { animation: rise .6s var(--ease) 1s both; }
.stage.play .cmp tbody tr { animation: fadeIn .35s ease both; }
.stage.play .cmp tbody tr:nth-child(1) { animation-delay: 1.3s; }
.stage.play .cmp tbody tr:nth-child(2) { animation-delay: 1.4s; }
.stage.play .cmp tbody tr:nth-child(3) { animation-delay: 1.5s; }
.stage.play .cmp tbody tr:nth-child(4) { animation-delay: 1.6s; }
.stage.play .cmp tfoot tr { animation: fadeIn .35s ease 1.75s both; }
.stage.play .fix, .stage.play .cmp s { animation: pop .4s var(--ease) 2.05s both; display: inline-block; }
.stage.play .win { transition: background .4s; }
.stage.play .verdict { animation: rise .5s var(--ease) 2.35s both; }
@media (prefers-reduced-motion: reduce) { .stage.play * { animation: none !important; } }

@media (max-width: 760px) {
  .stage .srcs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 4px 2px 10px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .stage .srcs::-webkit-scrollbar { display: none; }
  .src { flex: 0 0 72%; scroll-snap-align: center; }
  .src.photo { transform: none; }
  .stage.play .src.photo { animation-name: rise; }
  .flow { height: 36px; }
  .cmp th, .cmp td { padding: 9px 8px; font-size: .8rem; }
  .cmp td:first-child, .cmp th:first-child { min-width: 96px; }
  .cmp .fix, .cmp s { display: none !important; }
  .cmp td:first-child, .cmp th:first-child { min-width: 84px; }
  .verdict { font-size: .84rem; }
}

/* ---------- sections ---------- */
.band { padding: 104px 0; position: relative; }
.band.canvas { background: var(--bg); }
@media (max-width: 760px) { .band { padding: 68px 0; } .head { margin-bottom: 32px; } }

/* navy band: process */
.band.navy { background: var(--ink); color: #C9D2EA; overflow: hidden; }
.band.navy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 85% 0%, rgba(46,80,240,.35), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(46,80,240,.18), transparent 70%); }
.band.navy .container { position: relative; }
.band.navy .s-title { color: #fff; }
.band.navy .s-lead { color: #AEB9D6; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; counter-reset: st; }
.track::before { content: ""; position: absolute; top: 19px; inset-inline: 10% 10%; height: 2px; background: linear-gradient(90deg, rgba(143,164,255,.15), rgba(143,164,255,.6), rgba(143,164,255,.15)); }
.track li { position: relative; counter-increment: st; }
.track .node { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--ink); border: 2px solid var(--sky); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.track li:last-child .node { background: var(--blue); border-color: var(--blue); }
.track h3 { color: #fff; text-align: center; font-size: 1.02rem; margin: 0 0 14px; }
.track .you { font-size: .88rem; line-height: 1.7; color: #AEB9D6; padding: 0 4px 12px; margin: 0; }
.track .us { margin: 0; font-size: .88rem; line-height: 1.7; color: #E6EBFA; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 10px 12px; }
.track .who { display: block; font-size: .74rem; font-weight: 600; margin-bottom: 2px; }
.track .you .who { color: #7F8CB0; }
.track .us .who { color: var(--sky); }
@media (max-width: 980px) {
  .track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .track::before { top: 20px; bottom: 20px; inset-inline-start: 19px; inset-inline-end: auto; width: 2px; height: auto; background: rgba(143,164,255,.35); }
  .track li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; }
  .track .node { margin: 0; grid-row: span 3; }
  .track h3 { text-align: start; margin: 8px 0 6px; }
}

/* checks: specimen cards */
.specimens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.spc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s; }
.spc:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.spc .vis { height: 128px; display: flex; align-items: center; justify-content: center; gap: 14px; background: #F8FAFE; border-bottom: 1px solid var(--line-2); padding: 0 18px; font-variant-numeric: tabular-nums; position: relative; }
.spc .txt { padding: 18px 20px 22px; }
.spc h3 { font-size: 1.04rem; margin: 0 0 6px; }
.spc p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.75; }
.v-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 14px; box-shadow: var(--sh-1); }
.v-chip .n { font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.v-chip .l { font-size: .7rem; color: var(--muted); }
.v-chip.good { border-color: var(--blue-100); background: var(--blue-050); }
.v-chip.good .n { color: var(--blue-700); }
.v-chip.bad .n { color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; }
.v-arrow { width: 26px; height: 26px; color: var(--faint); flex: none; }
.v-cells { display: flex; gap: 6px; }
.v-cells span { width: 34px; height: 34px; border-radius: 6px; background: var(--blue-100); }
.v-cells span.miss { background: repeating-linear-gradient(-45deg, #fff, #fff 4px, var(--red-200) 4px, var(--red-200) 6px); border: 1px dashed var(--red); }
.v-sum { display: flex; align-items: baseline; gap: 8px; font-size: 1rem; color: var(--ink-soft); }
.v-sum b { color: var(--ink); font-size: 1.2rem; font-weight: 600; }
.v-sum .plus { color: var(--amber); font-weight: 600; }
.v-range { width: 82%; }
.v-range .bar { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--blue-100), var(--blue-050)); }
.v-range .med { position: absolute; top: -6px; width: 2px; height: 22px; background: var(--ink-soft); inset-inline-start: 45%; }
.v-range .dot { position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--amber-500); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,27,63,.3); inset-inline-start: 28%; }
.v-range .lbls { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: 12px; }
@media (max-width: 980px) { .specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .specimens { grid-template-columns: minmax(0, 1fr); } }

/* roles: tabbed product views */
.roles { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.role-tabs { display: flex; flex-direction: column; gap: 10px; }
.role-tab { text-align: start; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; font: inherit; color: inherit; }
.role-tab:hover { border-color: var(--line-strong); }
.role-tab[aria-selected="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-050), var(--sh-2); }
.role-tab h3 { font-size: 1.02rem; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.role-tab h3 .ic-dot { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--blue-050); color: var(--blue); flex: none; }
.role-tab[aria-selected="true"] h3 .ic-dot { background: var(--blue); color: #fff; }
.role-tab h3 .ic-dot svg { width: 16px; height: 16px; }
.role-tab p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; }
.role-tab:not([aria-selected="true"]) p { display: none; }
.role-view { position: relative; min-height: 420px; border-radius: var(--r-xl); background: var(--ink); padding: 32px; display: grid; place-items: center; overflow: hidden; background-image: radial-gradient(70% 80% at 100% 0%, rgba(46,80,240,.45), transparent 70%); }
.role-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 18px 18px; }
.role-panel { position: relative; z-index: 1; width: 100%; max-width: 520px; animation: rise .45s var(--ease) both; }
.role-panel[hidden] { display: none; }
@media (max-width: 980px) { .roles { grid-template-columns: minmax(0, 1fr); gap: 24px; } .role-view { padding: 20px 14px; min-height: 0; } }

.ui { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; font-size: .84rem; }
.ui-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-weight: 600; color: var(--ink); }
.ui-h .sp { margin-inline-start: auto; font-weight: 400; color: var(--muted); font-size: .76rem; }
.ui-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.ui-row:last-child { border-bottom: 0; }
.ui-row .t { color: var(--ink); font-weight: 500; }
.ui-row .s { color: var(--muted); font-size: .76rem; }
.ui-row .grow { flex: 1; min-width: 0; }
.ui-bar { width: 70px; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; flex: none; }
.ui-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.pill.b { background: var(--blue-050); color: var(--blue-700); }
.pill.a { background: var(--amber-050); color: var(--amber); }
.pill.n { background: var(--ink); color: #fff; }
.pill.g { background: var(--line-2); color: var(--ink-soft); }
.ui-amt { padding: 18px 16px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-2); }
.ui-amt b { font-size: 1.7rem; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--line-2); }
.ui-dl dt { color: var(--muted); }
.ui-dl dd { margin: 0; color: var(--ink); }
.ui-warn { margin: 12px 16px 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--amber-050); color: var(--amber); font-size: .78rem; }
.ui-acts { display: flex; gap: 8px; padding: 14px 16px; }
.ui-acts span { flex: 1; text-align: center; padding: 8px; border-radius: var(--r); font-weight: 500; }
.ui-acts .p { background: var(--blue); color: #fff; }
.ui-acts .o { border: 1px solid var(--line-strong); color: var(--ink); }
.phone { width: 270px; margin: 0 auto; border-radius: 34px; background: #050B1C; padding: 10px; box-shadow: var(--sh-3), 0 0 0 1px rgba(255,255,255,.08); }
.phone .scr { border-radius: 26px; background: var(--bg); overflow: hidden; font-size: .78rem; }
.phone .p-top { background: var(--ink); color: #fff; padding: 22px 14px 14px; background-image: radial-gradient(90% 140% at 100% 0%, rgba(46,80,240,.5), transparent 70%); }
.phone .p-top b { display: block; font-size: .9rem; }
.phone .p-top span { color: #B4BFDA; font-size: .72rem; }
.phone .p-it { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--surface); margin: 8px 10px 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); }
.phone .p-it .in { min-width: 64px; text-align: end; border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 8px; font-variant-numeric: tabular-nums; color: var(--ink); }
.phone .p-btn { margin: 12px 10px 8px; background: var(--blue); color: #fff; text-align: center; padding: 9px; border-radius: 10px; font-weight: 500; }
.phone .p-fine { margin: 0 12px 14px; color: var(--muted); font-size: .66rem; line-height: 1.6; text-align: center; }

/* controls: audit log + list */
.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ctl-list { display: grid; gap: 4px; margin: 0; }
.ctl { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ctl:last-child { border-bottom: 0; }
.ctl .ic-b { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-050); color: var(--blue); }
.ctl .ic-b svg { width: 19px; height: 19px; }
.ctl dt { font-weight: 600; color: var(--ink); }
.ctl dd { margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.75; }
.log { position: sticky; top: 96px; }
.log .ui-h .live { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-050); }
.log ol { list-style: none; margin: 0; padding: 8px 16px 14px; position: relative; }
.log ol::before { content: ""; position: absolute; top: 18px; bottom: 22px; inset-inline-start: 66px; width: 1px; background: var(--line); }
.log li { display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .76rem; padding-top: 1px; }
.log .d { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); margin-top: 6px; position: relative; z-index: 1; }
.log li.k .d { border-color: var(--blue); background: var(--blue); }
.log li.ok .d { border-color: var(--ink); background: var(--ink); }
.log .e { color: var(--ink-2); line-height: 1.6; }
.log .e b { color: var(--ink); font-weight: 600; }
.log .e small { display: block; color: var(--muted); font-size: .74rem; }
@media (max-width: 980px) { .controls { grid-template-columns: minmax(0, 1fr); gap: 36px; } .log { position: static; } }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px 26px; box-shadow: var(--sh-1); }
.plan h3 { font-size: 1.1rem; margin: 0 0 4px; }
.plan .for { color: var(--muted); font-size: .9rem; margin: 0 0 20px; }
.plan .price { font-size: 2.3rem; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; font-family: var(--f-body); }
.plan .price small { font-size: .88rem; font-weight: 400; color: var(--muted); margin-inline-start: 6px; }
.plan ul { list-style: none; margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: .94rem; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { width: 17px; height: 17px; flex: none; margin-top: 5px; color: var(--blue); }
.plan .btn { margin-top: auto; }
.plan.feat { background: var(--ink); border-color: var(--ink); color: #C9D2EA; box-shadow: var(--sh-3); background-image: radial-gradient(90% 60% at 100% 0%, rgba(46,80,240,.5), transparent 70%); transform: translateY(-8px); }
.plan.feat h3, .plan.feat .price { color: #fff; }
.plan.feat .for, .plan.feat .price small { color: #AEB9D6; }
.plan.feat ul { border-top-color: rgba(255,255,255,.14); }
.plan.feat li svg { color: var(--sky); }
.plan.feat .badge-t { display: inline-block; font-size: .74rem; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; margin-inline-start: 8px; vertical-align: 2px; font-weight: 500; }
.price-foot { margin-top: 26px; text-align: center; font-size: .9rem; color: var(--muted); }
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .plan.feat { transform: none; } }

/* faq */
.faq-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; color: var(--ink); display: flex; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); color: var(--ink-soft); font-weight: 400; font-size: 1.1rem; transition: transform .2s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--blue-050); color: var(--blue); }
.faq details p { color: var(--ink-soft); padding-bottom: 20px; margin: 0; max-width: 68ch; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* closing band */
.closing { padding: 0 0 104px; }
.closing .box { position: relative; overflow: hidden; border-radius: 24px; background: var(--blue); color: #E3E9FF; padding: 64px 56px; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px; align-items: center; background-image: radial-gradient(70% 120% at 0% 100%, rgba(11,27,63,.55), transparent 70%); }
.closing .box::after { /* brand bars */
  content: ""; position: absolute; inset-inline-end: -60px; top: 50%; width: 380px; height: 260px; transform: translateY(-50%); opacity: .12; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) right 0 top 40px / 46% 26px no-repeat,
    linear-gradient(#fff, #fff) right 0 top 116px / 72% 26px no-repeat,
    linear-gradient(#fff, #fff) right 0 top 192px / 100% 26px no-repeat;
}
[dir="ltr"] .closing .box::after { background-position: left 0 top 40px, left 0 top 116px, left 0 top 192px; }
.closing h2 { color: #fff; margin: 0 0 10px; font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.45; }
.closing p { margin: 0; color: #D5DDFF; max-width: 52ch; }
.closing .acts { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-white { background: #fff; color: var(--blue-700); }
.btn-white:hover { background: #EEF2FF; }
.btn-onblue { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-onblue:hover { background: rgba(255,255,255,.1); }
@media (max-width: 860px) { .closing .box { grid-template-columns: minmax(0, 1fr); padding: 40px 24px; border-radius: 18px; } }

/* footer */
.site-f { background: var(--ink); color: #9AA6C6; padding: 48px 0 40px; font-size: .9rem; }
.site-f .container { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.site-f .wordmark { color: #fff; }
.site-f .wordmark img { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.site-f nav { display: flex; gap: 22px; flex-wrap: wrap; margin-inline-start: auto; }
.site-f a { color: #C9D2EA; }
.site-f a:hover { color: #fff; }

/* ---------- compare tool ---------- */
.tool-h { position: relative; padding: 48px 0 36px; background: linear-gradient(180deg, #F7F9FE, #fff); overflow: hidden; }
.tool-h::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--blue-100) 1px, transparent 1px), linear-gradient(90deg, var(--blue-100) 1px, transparent 1px); background-size: 44px 44px; opacity: .45; -webkit-mask-image: radial-gradient(60% 90% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(60% 90% at 80% 20%, #000, transparent 75%); }
[dir="ltr"] .tool-h::before { -webkit-mask-image: radial-gradient(60% 90% at 20% 20%, #000, transparent 75%); mask-image: radial-gradient(60% 90% at 20% 20%, #000, transparent 75%); }
.tool-h .container { position: relative; }
.tool-h h1 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); margin: 0 0 12px; }
.tool-h p { color: var(--ink-soft); max-width: 66ch; margin: 0; }
.tool-body { padding: 8px 0 72px; }
.tool-body .card { box-shadow: var(--sh-2); }
.quote-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
.quote-tabs .qt { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-size: .9rem; color: var(--muted); }
.quote-tabs .qt[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--blue); font-weight: 500; }
.quote-tabs .qt .filled { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.tool-next { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 24px 28px; border-radius: var(--r-xl); background: var(--ink); color: #C9D2EA; background-image: radial-gradient(70% 140% at 0% 0%, rgba(46,80,240,.45), transparent 70%); }
.tool-next h2 { font-size: 1.1rem; margin: 0 0 4px; color: #fff; }
.tool-next p { margin: 0; color: #AEB9D6; font-size: .93rem; }

/* ---------- login side ---------- */
body.site .auth { background: var(--surface); }
.auth .a-side { background: var(--ink); border: 0; color: #C9D2EA; position: relative; overflow: hidden; background-image: radial-gradient(80% 60% at 100% 0%, rgba(46,80,240,.45), transparent 70%); }
.auth .a-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.auth .a-side-in { max-width: 440px; position: relative; z-index: 1; }
.auth .a-side h2 { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.5; color: #fff; margin: 0 0 28px; }
.a-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 22px; }
.a-steps li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.a-steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .85rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.a-steps li:first-child::before { background: var(--blue); border-color: var(--blue); }
.a-steps b { color: #fff; font-weight: 600; }
.a-steps span { color: #AEB9D6; font-size: .93rem; }
.a-fine { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: #9AA6C6; }

/* legal */
.prose { max-width: 72ch; padding: 48px 0 72px; }
.prose h1 { font-family: var(--f-display); font-size: 1.8rem; }
.prose h2 { font-size: 1.15rem; margin-top: 2em; }
.prose p, .prose li { color: var(--ink-soft); }