/* ════════════════════════════════════════════════════════════════
   AssetFlow — سامانهٔ مدیریت اموال سازمان
   Design system shared by index.html (customer) and sales.html (seller).
   Palette is the app's own: the azure ramp of its favicon
   #4FB3F6 → #0080E0 → #005BB5, deepened to a navy ink for the
   full-bleed sections, with the dashboard's own mint #17A57F as the
   second, "it's working" accent. Ground is the app's #F1F5FA.
   Fonts are self-hosted — Iran network blocks CDNs.
   ════════════════════════════════════════════════════════════════ */

@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap }
@font-face{ font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight:700; font-display:swap }

:root{
  --azure:#4FB3F6;
  --indigo:#0080E0;
  --indigo-dark:#0063B4;
  --navy:#0A4C7E;
  --ink:#08192B;
  --ink-2:#0D2439;
  --ink-3:#123253;
  --indigo-soft:#E4F1FD;
  --indigo-soft-2:#F2F9FE;
  --mint:#17A57F; --mint-soft:#E4F6F0;
  --green:#0F9D63; --green-soft:#E5F6EE; --green-dark:#0A6E46;
  --amber:#DE9020; --amber-soft:#FDF3E3; --amber-dark:#8E5A0B;
  --red:#DC2626; --red-soft:#FDECEC;
  --body:#3A4A5C; --muted:#647686; --faint:#93A2B1;
  --border:#DFE7EF; --divider:#EDF2F7;
  --bg:#FFFFFF; --bg-soft:#F1F5FA; --bg-tint:#E8F2FB;

  --t-h1:clamp(30px, 8.6vw, 48px);
  --t-h2:clamp(23px, 6.4vw, 32px);
  --t-body:15.5px;
  --pad-x:clamp(20px, 5.6vw, 34px);
  --pad-y:clamp(52px, 11vw, 78px);
  --r:18px; --r-lg:24px; --r-xl:30px;
  --sh:0 2px 6px rgba(8,25,43,.04), 0 12px 30px rgba(8,25,43,.06);
  --sh-lg:0 10px 24px rgba(8,25,43,.08), 0 32px 64px rgba(8,25,43,.12);
}

*{ margin:0; padding:0; box-sizing:border-box }
html{
  /* House standard: no default tap flash. Chrome/Android paints a grey-blue box
     over any tapped link or button, which on a full-bleed photo cover reads as a
     rendering glitch. Every tappable thing here has its own :active feedback. */
  -webkit-tap-highlight-color:transparent; -webkit-print-color-adjust:exact; print-color-adjust:exact; scroll-behavior:smooth;
      overflow-x:hidden; scroll-padding-top:66px }
body{ font-family:'Vazirmatn','Noto Sans Arabic',Tahoma,sans-serif; background:#050F1C;
      color:var(--body); font-size:var(--t-body); line-height:1.9;
      -webkit-font-smoothing:antialiased; overflow-x:hidden }
/* width/height attrs are presentational hints — without height:auto an
   attribute-sized image is squashed inside a narrower box. */
img{ display:block; max-width:100% }
.shot img,.zoom img,.ui img{ height:auto }
a{ color:inherit; text-decoration:none }
/* inline links inside prose — the default `color:inherit` above hides them */
.ilink,.sec-lead a,.acc .a a,.ticks a{ color:var(--indigo); font-weight:600;
  border-bottom:1px solid rgba(0,128,224,.35); padding-bottom:1px }
.s-ink .sec-lead a,.full .sec-lead a,.s-ink .ticks a,.full .ticks a,.s-ink .ilink,.full .ilink{
  color:var(--azure); border-bottom-color:rgba(79,179,246,.45) }
svg{ display:block }
/* tracking only on latin/number runs — never on Persian, it breaks cursive joining */
.latin{ font-family:'Inter','Poppins','Avenir Next',Arial,sans-serif; letter-spacing:.02em }
.num{ font-variant-numeric:tabular-nums; letter-spacing:normal }
/* AranoKardex lockup — two weights of the same word, as on the brand sheet.
   Set in type so it stays crisp at every size instead of shipping a bitmap. */
.wm{ font-family:'Inter','Poppins','Avenir Next',Arial,sans-serif; font-weight:700;
     letter-spacing:.005em; white-space:nowrap }
.wm i{ font-style:normal; color:var(--indigo) }
.s-ink .wm i,.full .wm i,body.nav-dark .wm i{ color:var(--azure) }
b,strong{ font-weight:600; color:var(--ink) }

.sheet{ max-width:640px; margin:0 auto; background:var(--bg); position:relative;
        box-shadow:0 0 100px rgba(0,0,0,.55) }
section{ position:relative; padding:var(--pad-y) var(--pad-x); overflow:hidden }
.s-soft{ background:var(--bg-soft) }
.s-tint{ background:linear-gradient(180deg,var(--bg-tint) 0%,#FAFBFF 100%) }
.s-ink{ background:var(--ink); color:#BFD2E2 }
.s-ink .sec-title{ color:#fff } .s-ink .sec-lead{ color:#7F97AB } .s-ink b{ color:#fff }

/* ————— quiet aurora, the only abstract decoration ————— */
.aura{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(64px); opacity:.55 }
.aura.a1{ width:300px; height:300px; background:rgba(0,128,224,.20); inset-inline-end:-120px; top:-100px }
.aura.a2{ width:260px; height:260px; background:rgba(23,165,127,.16); inset-inline-start:-110px; bottom:-90px }
section > *:not(.aura):not(.bgfull){ position:relative; z-index:1 }

.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1) }
.rv.in{ opacity:1; transform:none }
.stag > *:nth-child(2){ transition-delay:.06s } .stag > *:nth-child(3){ transition-delay:.12s }
.stag > *:nth-child(4){ transition-delay:.18s } .stag > *:nth-child(5){ transition-delay:.24s }
.stag > *:nth-child(6){ transition-delay:.30s } .stag > *:nth-child(7){ transition-delay:.36s }
.stag > *:nth-child(8){ transition-delay:.42s }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none } }

/* ————— type ————— */
.kicker{ display:inline-flex; align-items:center; gap:9px; color:var(--indigo-dark);
         font-weight:600; font-size:13px; letter-spacing:normal }
.kicker::before{ content:''; width:22px; height:2.5px; border-radius:2px; background:var(--indigo) }
.s-ink .kicker,.full .kicker{ color:var(--azure) }
.s-ink .kicker::before,.full .kicker::before{ background:var(--azure) }
.sec-title{ font-size:var(--t-h2); font-weight:700; color:var(--ink); line-height:1.5; margin:12px 0 14px }
.sec-lead{ color:var(--muted); font-size:15px; margin-bottom:28px; max-width:44ch }
.fine{ font-size:13px; color:var(--faint); line-height:1.85 }

/* ════════ full-bleed photo sections — the spine of both catalogs ════════ */
.full{ min-height:min(100svh, 860px); display:flex; flex-direction:column; justify-content:flex-end;
       color:#E4EBFB; padding-top:calc(var(--pad-y) + 20px); padding-bottom:calc(var(--pad-y) - 6px);
       background:var(--ink) }
.full .sec-title{ color:#fff } .full .sec-lead{ color:#9DB3C6 }
.full b{ color:#fff }
/* the photo behind a headline can be bright (an office window) or nearly black
   (a night desk); the shadow is what keeps the text readable over both. */
.full .sec-title,.full .sec-lead,.full .kicker,.hero h1,.hero .lead,.hero .lockup{
  text-shadow:0 1px 16px rgba(5,15,28,.62), 0 1px 3px rgba(5,15,28,.5) }
.bgfull{ position:absolute; inset:0; z-index:0; overflow:hidden }
/* Every photo is a 9:16 frame briefed with its subject in the upper third and a
   deliberately empty lower third for the headline. Inside the 640px sheet a section
   has to crop ~277px of height, so the anchor decides whose head survives: at the
   old 26% that was 72px off the top — and these subjects' heads start ~90px into the
   source. Anchored near the top, the crop comes off the empty foot instead. */
.bgfull img{ width:100%; height:100%; object-fit:cover; object-position:center 8%;
             opacity:0; transition:opacity 1.2s ease;
             filter:saturate(.82) contrast(1.05) }
.bgfull img.ok{ opacity:1 }
/* the ink veil: dark at the bottom where the text sits, clearer at the top where the subject is */
.bgfull::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,25,43,.55) 0%, rgba(8,25,43,.42) 26%,
             rgba(8,25,43,.82) 62%, rgba(5,17,31,.96) 100%) }
/* The cover crop is anchored to the TOP, not to 26% like the other full-bleed
   sections. Both cover photos put the subject's head ~90px into a 1672px frame, and
   at this sheet width 237px of height has to go somewhere — taking 26% of it off the
   top clipped the head. Anchored top, all of it comes off the empty tabletop at the
   foot, which is exactly the part we can afford to lose. */
.hero .bgfull img{ object-position:center top }
/* the cover carries a lockup in the top corner as well as a headline at the foot, so
   it needs a veil that is dark at BOTH ends and clear across the subject in between. */
.hero .bgfull::after{ background:linear-gradient(180deg,
  rgba(8,25,43,.30) 0%, rgba(8,25,43,.10) 16%, rgba(8,25,43,.16) 42%,
  rgba(8,25,43,.70) 68%, rgba(5,15,28,.95) 100%) }
/* the lockup sits in the top corner over open sky, so it gets its own small scrim
   rather than a heavy band across the whole top of the photograph */
/* The lockup drops clear of the subject's head instead of sitting on it. Both covers
   put a face in the top ~30% of the frame, so the brand block starts below that and
   lands on the jacket and the out-of-focus background — dark, quiet, and nobody's face.
   Its scrim is tightened to hug the text rather than washing across the photograph. */
.hero .lockup{ position:relative; z-index:1; margin-top:clamp(84px, 21vh, 190px) }
.hero .lockup::before{ content:''; position:absolute; inset:-11px -14px -10px -16px; z-index:-1;
  border-radius:18px; background:radial-gradient(96% 118% at 78% 42%,
    rgba(6,20,36,.58) 0%, rgba(6,20,36,.26) 56%, rgba(6,20,36,0) 80%) }
/* The closing section is the ask. Its veil leaves the top of the photograph open and
   deepens into saturated brand blue at the foot — the colour the reader has been
   reading all the way down — so the call to action lands on the brand, not on grey. */
/* The closing veil is سورمه‌ای: fully open across the top fifth so the photograph keeps
   its subject, then deepening fast into navy so every line of the ask sits on solid
   colour rather than on a bright window. */
#order .bgfull::after{ background:linear-gradient(180deg,
  rgba(6,20,36,0)     0%,   rgba(6,20,36,.06) 17%,
  rgba(10,34,70,.68)  31%,  rgba(8,28,58,.93) 45%,
  rgba(6,22,46,.975)  64%,  rgba(5,18,38,.995) 100%) }
/* and the copy starts lower down the frame than in any other section */
#order{ justify-content:flex-end; padding-top:calc(var(--pad-y) + 170px) }
#order .made{ margin-top:20px }
.signmark{ display:block; position:relative; width:112px; margin:26px auto 0 }
.signmark img{ display:block; width:100%; height:auto; opacity:.96 }
/* The gleam is masked by the logo's own alpha, so it travels across the mark and the
   wordmark and nowhere else — a sheen on the artwork, not a rectangle over it. */
.signmark::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 34%, rgba(255,255,255,.92) 50%,
             rgba(255,255,255,.35) 57%, transparent 70%);
  background-size:200% 100%; background-repeat:no-repeat;
  -webkit-mask-image:url('brand/lockup-dark.png'); mask-image:url('brand/lockup-dark.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:logoShine 6.5s cubic-bezier(.35,0,.25,1) infinite }
/* The travel range is not arbitrary: sampled against this artwork, the highlight is only
   on the logo between about 115% and 0%. Sweeping further (the first attempt ran
   190% → -90%) spends almost the whole eased cycle off the mark, so the gleam is either
   invisible or flicks past too fast to read. Sweep across the window, then rest. */
@keyframes logoShine{
  0%,7%    { background-position:118% 0 }
  36%,100% { background-position:-6% 0 }
}
.bgfull.even::after{ background:linear-gradient(180deg, rgba(8,25,43,.60) 0%, rgba(8,25,43,.86) 48%, rgba(5,17,31,.96) 100%) }
/* branded stand-in until the photo file exists */
.bgfull.noimg{ background:
  radial-gradient(120% 80% at 78% 6%, rgba(79,179,246,.32), transparent 56%),
  radial-gradient(90% 70% at 12% 92%, rgba(23,165,127,.22), transparent 60%),
  linear-gradient(165deg, #0F3554 0%, #123E62 45%, #08192B 100%) }
.bgfull.noimg::before{ content:''; position:absolute; inset:0; opacity:.10;
  background:url('brand/mark.png') center 26% no-repeat; background-size:132px 132px }

/* A 9:16 photograph cannot fill a 1600px-tall section on a 390px-wide screen:
   object-fit:cover then scales to the height and crops ~58% of the frame's width, so all
   that survives is a vertical sliver of the picture. Below 560px the photo becomes a band
   across the top of the section and the copy underneath sits on the section's own ink —
   the image is seen properly instead of being seen barely. The cover and the closing
   section are near enough to one screen tall that they keep the full bleed. */
@media (max-width:560px){
  .full:not(.hero) .bgfull{ bottom:auto; height:min(66%, 540px) }
  .full:not(.hero) .bgfull::after{ background:linear-gradient(180deg,
    rgba(8,25,43,.38) 0%, rgba(8,25,43,.24) 28%, rgba(8,25,43,.80) 76%, #08192B 100%) }
  #order .bgfull{ bottom:auto; height:min(58%, 520px) }
  #order .bgfull::after{ background:linear-gradient(180deg,
    rgba(6,20,36,.08) 0%, rgba(10,34,70,.48) 34%, rgba(8,28,58,.88) 72%, #08192B 100%) }
}

/* ————— hero cover ————— */
/* the cover's whole job is the photo — the subject sits in the upper third, so the
   copy block is pushed as low as it can sit and still clear the home indicator,
   leaving the top of the frame open. */
.hero{ min-height:min(100svh, 900px); justify-content:flex-end;
  padding-bottom:calc(clamp(14px, 2.6vw, 20px) + env(safe-area-inset-bottom)) }
.hero .lockup{ display:flex; align-items:center; gap:12px; margin-bottom:auto }
.hero .lockup img{ width:44px; height:44px; border-radius:12px }
.hero .lockup b{ display:block; font-size:17px; color:#fff; font-weight:700; line-height:1.5 }
.hero .lockup span{ font-size:12px; color:#C2D2E0 }
.hero h1{ font-size:var(--t-h1); font-weight:700; color:#fff; line-height:1.44; margin-bottom:16px }
.hero h1 em{ font-style:normal; color:var(--azure) }
.hero .lead{ font-size:16px; color:#A6BCCE; max-width:36ch; margin-bottom:26px }
.hero .acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.hero .foot{ margin-top:20px; padding-top:15px; border-top:1px solid rgba(255,255,255,.12);
             display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#849AAE }

/* ————— buttons ————— */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border-radius:14px; padding:15px 24px; font-weight:600; font-size:15px; line-height:1;
  transition:transform .16s ease, box-shadow .16s ease; cursor:pointer; border:0;
  font-family:inherit }
.btn:active{ transform:scale(.97) }
.btn-ind{ background:var(--indigo); color:#fff; box-shadow:0 10px 26px rgba(63,85,201,.42) }
.btn-white{ background:#fff; color:var(--ink) }
.btn-ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--border) }
.btn-line{ background:rgba(255,255,255,.07); color:#fff; border:1.5px solid rgba(255,255,255,.28) }
.btn svg{ width:18px; height:18px; flex:0 0 auto }

/* ————— header —————
   House rule for every catalog (see ../best-practices.md):
   1. the cover owns the full screen — the bar is off-canvas until it is scrolled past;
   2. from the second section on, the glass takes the theme of whatever is behind it,
      so it reads as part of that page rather than as a fixed dark strip. */
.nav{ position:fixed; top:0; inset-inline:0; z-index:60; max-width:640px; margin:0 auto;
  height:60px; display:flex; align-items:center; gap:11px; padding:0 16px;
  background:rgba(255,255,255,.66); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(8,25,43,.08);
  transition:background .3s ease, border-color .3s ease,
             transform .32s cubic-bezier(.2,.7,.3,1), opacity .26s ease;
  transform:translateY(-100%); opacity:0; pointer-events:none }
body.nav-on .nav{ transform:none; opacity:1; pointer-events:auto }
.nav img{ width:30px; height:30px; border-radius:9px }
.nav .nm{ font-weight:700; font-size:15px; color:var(--ink); line-height:1.3;
  transition:color .3s ease }
.nav .nm small{ display:block; font-size:10.5px; font-weight:400; color:var(--muted) }
.nav .sp{ margin-inline-start:auto }
.nav .cta{ font-size:13px; font-weight:600; background:var(--indigo); color:#fff;
  padding:9px 15px; border-radius:11px }
/* dark backdrop → dark glass */
body.nav-dark .nav{ background:rgba(8,25,43,.72); border-bottom-color:rgba(255,255,255,.12) }
body.nav-dark .nav .nm{ color:#fff }
body.nav-dark .nav .nm small{ color:#849AAE }

.prog{ position:fixed; top:60px; inset-inline:0; height:2px; z-index:61; max-width:640px; margin:0 auto;
  opacity:0; transition:opacity .26s ease }
body.nav-on .prog{ opacity:1 }
.prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mint),var(--azure) 45%,var(--indigo)) }

/* ————— sticky bottom actions —————
   held back until the reader is half-way down, so the ask lands after the pitch. */
.dock{ position:fixed; bottom:0; inset-inline:0; z-index:60; max-width:640px; margin:0 auto;
  display:flex; gap:9px; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px);
  border-top:1px solid rgba(8,25,43,.09);
  transform:translateY(115%); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .28s ease }
body.dock-on .dock{ transform:none; opacity:1; pointer-events:auto }
.dock .btn{ flex:1; padding:14px 12px; font-size:14.5px; border-radius:13px }
.dock .btn svg{ width:17px; height:17px }
body.has-dock .sheet{ padding-bottom:80px }
@media (prefers-reduced-motion: reduce){
  .nav,.dock{ transition:opacity .2s ease, background .3s ease } }

/* ════════ browser frame around a real screenshot ════════
   AssetFlow is a desktop-first web app, so the frame that makes a shot read
   as "a real product" is a browser window, not a phone. The chrome is drawn
   in CSS — three dots and an address pill — so no image is needed for it. */
.shot{ position:relative; border-radius:16px; overflow:hidden; background:#0B2033;
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--sh-lg) }
.shot .bar{ display:flex; align-items:center; gap:7px; padding:9px 12px; background:#0B2033 }
.shot .bar i{ width:9px; height:9px; border-radius:50%; background:#324B60; flex:0 0 auto }
.shot .bar i:nth-child(1){ background:#E0605A } .shot .bar i:nth-child(2){ background:#E0B44B }
.shot .bar i:nth-child(3){ background:#4FBE86 }
.shot .bar u{ flex:1; text-decoration:none; background:rgba(255,255,255,.07); border-radius:7px;
  height:19px; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:10.5px; color:#7E9AB0; font-family:'Inter',Arial,sans-serif; letter-spacing:.02em;
  margin-inline-start:6px }
.shot img{ width:100%; height:auto; display:block; background:var(--bg-soft) }
.s-ink .shot,.full .shot{ border-color:rgba(255,255,255,.13) }
.shotcap{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:11px; line-height:1.75 }
.full .shotcap,.s-ink .shotcap{ color:#9DB3C6 }

/* a bare close-up of one panel of the UI — no browser chrome, it is a detail
   lifted out of the screen, and the shadow is what says "lifted out" */
.zoom{ border-radius:15px; overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--border); box-shadow:var(--sh) }
.zoom img{ width:100%; height:auto; display:block }
.s-ink .zoom,.full .zoom{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12) }
.zoomwrap{ display:grid; gap:16px }
@media (min-width:520px){ .zoomwrap.two{ grid-template-columns:1fr 1fr; align-items:start } }

/* horizontally scrolling screenshot strip */
.strip{ display:flex; gap:14px; overflow-x:auto; padding:4px 0 14px;
        margin:0 calc(var(--pad-x) * -1); padding-inline:var(--pad-x);
        scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.strip::-webkit-scrollbar{ height:0 }
/* programmatic drift and mandatory snap fight each other — the auto strip
   keeps free scrolling and stays draggable. */
.strip[data-auto]{ scroll-snap-type:none }
.strip > figure{ flex:0 0 auto; width:min(55vw, 232px); scroll-snap-align:center; margin:0 }
.strip figcaption{ font-size:12px; color:var(--muted); text-align:center; margin-top:9px; line-height:1.7 }
.full .strip figcaption,.s-ink .strip figcaption{ color:#9DB3C6 }
.striphint{ font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px; margin-top:-4px }
.striphint svg{ width:14px; height:14px }

/* ————— wide photo band (5:2) — same graceful fallback as .bgfull ————— */
.band{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/2;
  box-shadow:var(--sh-lg);
  background:radial-gradient(120% 90% at 80% 8%, rgba(79,179,246,.30), transparent 56%),
             radial-gradient(90% 70% at 10% 95%, rgba(23,165,127,.20), transparent 60%),
             linear-gradient(160deg,#0F3554 0%,#123E62 50%,#08192B 100%) }
.band::before{ content:''; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background:url('brand/mark.png') center no-repeat; background-size:84px 84px }
.band img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease }
.band img.ok{ opacity:1 }
.band.noimg img{ display:none }

/* ————— cards ————— */
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:17px 17px;
       box-shadow:var(--sh) }
.s-ink .card,.full .card{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11);
       box-shadow:none; color:#B7CADA }
.stack{ display:grid; gap:12px }
.two{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:520px){ .two{ grid-template-columns:1fr 1fr } }
.ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto }
.ic svg{ width:19px; height:19px }
.ic-ind{ background:var(--indigo-soft); color:var(--indigo-dark) }
.ic-green{ background:var(--green-soft); color:var(--green-dark) }
.ic-amber{ background:var(--amber-soft); color:var(--amber-dark) }
.ic-red{ background:var(--red-soft); color:#B91C1C }
.s-ink .ic-ind,.full .ic-ind{ background:rgba(79,179,246,.16); color:var(--azure) }
.s-ink .ic-green,.full .ic-green{ background:rgba(15,157,99,.20); color:#4FD9A8 }
.s-ink .ic-amber,.full .ic-amber{ background:rgba(222,144,32,.20); color:#F2C57C }
.row{ display:flex; gap:13px; align-items:flex-start }
.row h3{ font-size:16px; font-weight:600; color:var(--ink); line-height:1.6; margin-bottom:3px }
.row p{ font-size:14px; color:var(--muted) }
.s-ink .row h3,.full .row h3{ color:#fff }
.s-ink .row p,.full .row p{ color:#8CA2B6 }

/* ————— stat band ————— */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border);
        border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden }
@media (min-width:520px){ .stats{ grid-template-columns:repeat(4,1fr) } }
.stats .st{ background:#fff; padding:18px 12px; text-align:center }
.stats .st .v{ font-size:26px; font-weight:700; color:var(--indigo-dark); line-height:1.4 }
.stats .st .l{ font-size:12px; color:var(--muted); line-height:1.6 }
.s-ink .stats,.full .stats{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12) }
.s-ink .stats .st,.full .stats .st{ background:rgba(8,25,43,.55) }
.s-ink .stats .st .v,.full .stats .st .v{ color:var(--azure) }
.s-ink .stats .st .l,.full .stats .st .l{ color:#8CA2B6 }

/* ————— chips ————— */
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{ font-size:13.5px; padding:9px 14px; border-radius:99px; background:#fff;
  border:1px solid var(--border); color:var(--ink); box-shadow:var(--sh);
  display:inline-flex; align-items:center; gap:7px }
.chip svg{ width:15px; height:15px; color:var(--indigo) }
.s-ink .chip,.full .chip{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
  color:#C6D6E3; box-shadow:none }
.s-ink .chip svg,.full .chip svg{ color:var(--azure) }
.chip.ok{ background:var(--green-soft); border-color:#B7E5CF; color:#14532D }
.chip.ok svg{ color:var(--green) }

/* ————— numbered steps ————— */
.steps{ position:relative }
.steps::before{ content:''; position:absolute; inset-inline-start:19px; top:22px; bottom:26px; width:2px;
  background:linear-gradient(180deg,var(--indigo),var(--azure) 50%,var(--mint)); opacity:.32 }
.step{ display:flex; gap:16px; padding-bottom:22px }
.step .n{ width:40px; height:40px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
  background:#fff; border:1.5px solid var(--border); color:var(--indigo-dark); font-weight:700; font-size:15px;
  box-shadow:0 0 0 6px #fff, var(--sh); z-index:1 }
.s-soft .step .n{ box-shadow:0 0 0 6px var(--bg-soft), var(--sh) }
.s-ink .step .n,.full .step .n{ background:var(--ink-3); border-color:rgba(255,255,255,.16); color:#fff;
  box-shadow:0 0 0 6px var(--ink) }
.step .n svg{ width:19px; height:19px }
.step .bd{ padding-top:4px }
.step h3{ font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.6 }
.step p{ font-size:14px; color:var(--muted); margin-top:2px }
.s-ink .step h3,.full .step h3{ color:#fff }
.s-ink .step p,.full .step p{ color:#8CA2B6 }

/* ————— feature grid ————— */
.fgrid{ display:grid; gap:11px; grid-template-columns:1fr }
@media (min-width:520px){ .fgrid{ grid-template-columns:1fr 1fr } }
.feat{ background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px 15px; box-shadow:var(--sh) }
.feat .ic{ width:36px; height:36px; border-radius:11px; margin-bottom:11px }
.feat .ic svg{ width:18px; height:18px }
.feat h4{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.6; margin-bottom:3px }
.feat p{ font-size:13.5px; color:var(--muted); line-height:1.75 }
.s-ink .feat,.full .feat{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11) }
.s-ink .feat h4,.full .feat h4{ color:#fff }
.s-ink .feat p,.full .feat p{ color:#8CA2B6 }

/* ————— tick list ————— */
.ticks{ list-style:none; display:grid; gap:10px }
.ticks li{ display:flex; gap:11px; font-size:14.5px; color:var(--body) }
.ticks li svg{ width:17px; height:17px; flex:0 0 auto; margin-top:5px; color:var(--green) }
.s-ink .ticks li,.full .ticks li{ color:#B7CADA }
.s-ink .ticks li svg,.full .ticks li svg{ color:#4FD9A8 }

/* ————— quote / say-this ————— */
.quote{ background:linear-gradient(160deg,var(--ink) 0%,#0F4670 100%); color:#fff;
  border-radius:var(--r-xl); padding:26px 22px 22px; position:relative; overflow:hidden;
  box-shadow:var(--sh-lg) }
.quote::before{ content:'”'; position:absolute; top:-18px; inset-inline-start:18px;
  font-size:100px; color:rgba(79,179,246,.22); font-family:Georgia,serif }
.quote p{ font-size:clamp(17px,4.8vw,21px); font-weight:600; line-height:1.85; position:relative }
.quote .by{ margin-top:14px; font-size:12.5px; color:#84A8C6 }
.say{ border-inline-start:3px solid var(--green); background:var(--green-soft);
  border-radius:0 13px 13px 0; padding:13px 15px; font-size:14.5px; color:#14532D }
.dont{ border-inline-start:3px solid var(--red); background:var(--red-soft);
  border-radius:0 13px 13px 0; padding:13px 15px; font-size:14.5px; color:#7F1D1D }
.say b,.dont b{ color:inherit }

/* ————— details/accordion ————— */
.acc{ background:#fff; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh) }
.acc + .acc{ margin-top:10px }
.acc > summary{ list-style:none; cursor:pointer; padding:16px 17px; display:flex; gap:12px; align-items:flex-start }
.acc > summary::-webkit-details-marker{ display:none }
.acc > summary .q{ flex:1; font-size:15px; font-weight:600; color:var(--ink); line-height:1.7 }
.acc > summary .m{ width:23px; height:23px; flex:0 0 auto; border-radius:8px; background:var(--indigo-soft);
  color:var(--indigo-dark); display:grid; place-items:center; font-size:13px; font-weight:700; margin-top:3px }
.acc > summary .cv{ width:21px; height:21px; color:var(--faint); transition:transform .25s; margin-top:4px; flex:0 0 auto }
.acc[open] > summary .cv{ transform:rotate(180deg) }
.acc[open] > summary{ border-bottom:1px solid var(--divider) }
.acc .a{ padding:14px 17px 17px; font-size:14.5px; color:var(--body) }
.acc .a .line{ margin-top:11px; background:var(--green-soft); border-radius:11px; padding:12px 13px;
  font-size:14px; color:#14532D }
.acc .a .line b{ color:#14532D }

/* ————— seller-only marker + presentation mode ————— */
.tag-int{ display:inline-flex; align-items:center; gap:7px; background:var(--amber-soft);
  color:var(--amber-dark); border:1px solid #F0DDB8; font-size:11.5px; font-weight:600;
  padding:5px 11px; border-radius:99px; margin-bottom:12px }
.tag-int svg{ width:13px; height:13px }
.s-ink .tag-int,.full .tag-int{ background:rgba(222,144,32,.16); border-color:rgba(222,144,32,.36); color:#F2C57C }
body.present .internal{ display:none }
.tgl{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  background:rgba(8,25,43,.05); border:1px solid rgba(8,25,43,.12); color:var(--muted);
  padding:7px 12px; border-radius:99px; font-size:12px; font-weight:500; font-family:inherit;
  transition:background .3s ease, border-color .3s ease, color .3s ease }
.tgl .dot{ width:8px; height:8px; border-radius:50%; background:#AEBDC9; transition:background .2s }
body.nav-dark .tgl{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#BFD2E2 }
body.nav-dark .tgl .dot{ background:#4E657A }
body.present .tgl{ background:rgba(15,157,99,.24); border-color:rgba(15,157,99,.52); color:#7FE3BC }
body.present .tgl .dot{ background:#38D9A0; box-shadow:0 0 0 4px rgba(56,217,160,.18) }

/* ————— chapter index ————— */
.navbtn{ width:36px; height:36px; border-radius:11px; border:0; cursor:pointer;
  background:rgba(8,25,43,.06); color:var(--ink); display:grid; place-items:center; flex:0 0 auto;
  transition:background .3s ease, color .3s ease }
body.nav-dark .navbtn{ background:rgba(255,255,255,.1); color:#fff }
.navbtn:active{ transform:scale(.94) }
.navbtn svg{ width:19px; height:19px }
.idx{ position:fixed; inset:0; z-index:70; display:none }
.idx.open{ display:block }
.idx .scrim{ position:absolute; inset:0; background:rgba(5,15,28,.66); backdrop-filter:blur(3px) }
.idx .panel{ position:absolute; bottom:0; inset-inline:0; max-width:640px; margin:0 auto;
  background:#fff; border-radius:22px 22px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:82vh; overflow:auto; animation:acUp .28s ease }
@keyframes acUp{ from{ transform:translateY(30px); opacity:.4 } to{ transform:none; opacity:1 } }
.idx h4{ font-size:13px; color:var(--muted); font-weight:600; margin:4px 4px 10px }
.idx a{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:12px;
  font-size:14px; color:var(--ink); font-weight:500 }
.idx a:active{ background:var(--bg-soft) }
.idx a i{ font-style:normal; width:25px; height:25px; flex:0 0 auto; border-radius:8px;
  background:var(--indigo-soft); color:var(--indigo-dark); display:grid; place-items:center;
  font-size:11.5px; font-weight:700 }
.idx a.int i{ background:var(--amber-soft); color:var(--amber-dark) }
body.present .idx a.int{ display:none }

/* ————— contact / order ————— */
.c-rows{ display:grid; gap:10px; margin:24px 0 18px }
.c-row{ display:flex; gap:13px; align-items:center; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13); border-radius:16px; padding:14px 16px; transition:background .2s }
.c-row:active{ background:rgba(255,255,255,.13) }
.c-row .ic{ background:rgba(79,179,246,.15); color:var(--azure) }
.c-row b{ display:block; font-size:15px; color:#fff }
.c-row span{ font-size:12.5px; color:#8CA2B6 }
.qrbox{ background:#fff; border-radius:20px; padding:16px; text-align:center; max-width:196px; margin:0 auto }
.qrbox img{ width:136px; height:136px; margin:0 auto 9px }
.qrbox span{ font-size:12.5px; color:var(--muted) }
.made{ margin-top:24px; font-size:12.5px; color:#78909F; text-align:center; line-height:2 }
.made a{ color:var(--azure) }


/* ════════════════════════════════════════════════════════════════
   Drawn app surfaces — the UI, rebuilt in CSS instead of shrunk
   screenshots. A 3000px-wide desktop capture squeezed into a 590px
   sheet turns Persian labels into grey noise; these stay crisp at any
   width, carry the catalog's own palette, and print cleanly. Whole
   screens stay photographic (.shot) — details are drawn.
   ════════════════════════════════════════════════════════════════ */
.ui{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:15px; box-shadow:var(--sh) }
.s-ink .ui,.full .ui{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.11); box-shadow:none }
.uicap{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:11px; line-height:1.75 }
.full .uicap,.s-ink .uicap{ color:#9DB3C6 }

/* the global search field, as the app draws it */
.uisearch{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:99px;
  padding:13px 18px; border:1.5px solid #E2DCF6;
  box-shadow:0 1px 2px rgba(8,25,43,.04), 0 0 0 4px rgba(126,110,220,.06) }
.uisearch svg{ width:19px; height:19px; color:#8E86C4; flex:0 0 auto }
/* a real input never wraps — it truncates. Without this the placeholder breaks onto a
   second line on a narrow phone and the magnifier drifts to the middle of the field. */
.uisearch span{ font-size:13.5px; color:#9AA6B4; line-height:1.7;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:430px){
  .uisearch{ padding:11px 14px; gap:8px }
  .uisearch span{ font-size:12.5px }
  .uisearch svg{ width:17px; height:17px }
}
.s-ink .uisearch,.full .uisearch{ background:#111F31; border-color:#2E3A63; box-shadow:none }
.s-ink .uisearch span,.full .uisearch span{ color:#7288A0 }

/* the four dashboard KPI tiles */
.uikpi{ display:grid; grid-template-columns:1fr 1fr; gap:11px }
.uikpi .k{ border-radius:15px; padding:14px 15px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; min-height:78px }
.uikpi .k .t{ text-align:start }
.uikpi .k .v{ font-size:23px; font-weight:700; line-height:1.35 }
.uikpi .k .l{ font-size:12.5px; color:var(--muted); line-height:1.6 }
.uikpi .k .o{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  flex:0 0 auto; border:2.5px solid currentColor; background:#fff }
.uikpi .k .o svg{ width:17px; height:17px }
.uikpi .k.b{ background:#EDF5FE } .uikpi .k.b .v{ color:#0B5FA6 } .uikpi .k.b .o{ color:#2F8FE0 }
.uikpi .k.g{ background:#E9F7F0 } .uikpi .k.g .v{ color:#0A6E46 } .uikpi .k.g .o{ color:#2AA877 }
.uikpi .k.a{ background:#FDF6E7 } .uikpi .k.a .v{ color:#8E5A0B } .uikpi .k.a .o{ color:#DFA23C }
.uikpi .k.v{ background:#F1EEFC } .uikpi .k.v .v{ color:#4B3E9E } .uikpi .k.v .o{ color:#7A6BD6 }

/* one card out of the transfer ledger */
/* A transfer record card. The section's claim is that everything needed to
   understand the move is *on* the card, so the card has to look like a record and
   not like a paragraph: an accent spine marks it as a row from a ledger, the
   from → to pair is a tinted strip of its own (the one fact the reader came for),
   and type/place become chips so the eye can skip them when it doesn't need them.
   No field here is invented — these are the same five facts the list below names. */
.uitr{ position:relative; border-radius:16px; padding:14px 16px 12px; background:#fff;
  border:1px solid rgba(8,25,43,.07); overflow:hidden;
  box-shadow:0 1px 2px rgba(8,25,43,.05), 0 10px 24px rgba(8,25,43,.05);
  transition:transform .18s ease, box-shadow .18s ease }
.uitr::before{ content:''; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background:linear-gradient(180deg,var(--azure),var(--indigo)) }
.uitr::after{ content:''; position:absolute; inset-inline-end:-30px; top:-40px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle,rgba(46,125,246,.07),transparent 68%);
  pointer-events:none }
.uitr + .uitr{ margin-top:12px }
.uitr.alt::before{ background:linear-gradient(180deg,#3ECF9B,#0F7A55) }
.uitr.alt::after{ background:radial-gradient(circle,rgba(15,122,85,.07),transparent 68%) }
@media (hover:hover){ .uitr:hover{ transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(8,25,43,.06), 0 16px 34px rgba(8,25,43,.10) } }

.uitr .hd{ display:flex; align-items:center; gap:11px }
.uitr .hd .ico{ width:34px; height:34px; border-radius:11px; flex:0 0 auto; order:-1;
  display:grid; place-items:center; color:var(--indigo);
  background:var(--indigo-soft); box-shadow:inset 0 0 0 1px rgba(46,125,246,.18) }
.uitr.alt .hd .ico{ color:#0F7A55; background:#E4F6EE; box-shadow:inset 0 0 0 1px rgba(15,122,85,.18) }
.uitr .hd .ico svg{ width:17px; height:17px }
.uitr .hd .ttl{ text-align:end; min-width:0; flex:1 }
.uitr .hd .ttl b{ display:block; font-size:15.5px; color:var(--ink); font-weight:700; line-height:1.5 }
.uitr .hd .ttl .code{ display:inline-block; margin-top:3px; font-size:11.5px; color:#5C6E80;
  background:#F1F4F8; border-radius:6px; padding:1px 7px; line-height:1.75 }
.uitr .hd .d{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; align-self:flex-start;
  font-size:11.5px; color:#66788A; background:#F1F4F8; border-radius:99px; padding:3px 9px;
  line-height:1.7 }
.uitr .hd .d svg{ width:12px; height:12px; stroke:#93A3B4; stroke-width:2; fill:none }

/* the move itself — the one line the reader actually came for */
.uitr .fl{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:11px; padding:8px 10px; border-radius:12px;
  background:linear-gradient(90deg,#F7FAFF,#EEF4FD); border:1px solid rgba(46,125,246,.12) }
.uitr.alt .fl{ background:linear-gradient(90deg,#F6FBF8,#EAF6F0); border-color:rgba(15,122,85,.14) }
.uitr .fl .pt{ display:inline-flex; align-items:center; gap:6px; min-width:0;
  font-size:13px; color:var(--body); line-height:1.7 }
.uitr .fl .pt.to{ color:#0F7A55; font-weight:600 }
.uitr .fl .av{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid;
  place-items:center; font-style:normal; font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(150deg,#7FA9F0,#3F6FD8) }
.uitr .fl .pt.to .av{ background:linear-gradient(150deg,#4FC79A,#0F7A55) }
.uitr .fl .av.st{ background:#E6EBF2; color:#6C7E90 }
.uitr .fl .av.st svg{ width:12px; height:12px; stroke:currentColor; stroke-width:2; fill:none }
.uitr .fl .arw{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid;
  place-items:center; background:#fff; box-shadow:0 1px 3px rgba(8,25,43,.12) }
.uitr .fl .arw svg{ width:12px; height:12px; stroke:#8FA2B6; stroke-width:2; fill:none }

.uitr .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px }
.uitr .tags .tg{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:#5C6E80; background:#F4F7FA; border:1px solid rgba(8,25,43,.06);
  border-radius:99px; padding:3px 9px; line-height:1.75 }
.uitr .tags .tg svg{ width:12px; height:12px; stroke:#93A3B4; stroke-width:2; fill:none }

.uitr .who{ display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:9px;
  border-top:1px dashed rgba(8,25,43,.09); font-size:11.5px; color:#8496A6 }
.uitr .who b{ color:#5C6E80; font-weight:600 }
.uitr .who .av.sm{ width:18px; height:18px; border-radius:50%; flex:0 0 auto; display:grid;
  place-items:center; font-style:normal; font-size:9.5px; font-weight:700; color:#6C7E90;
  background:#EDF1F6 }

/* the transfer wizard's summary step */
.uisum{ background:#fff; border-radius:15px; border:1px solid var(--border); overflow:hidden }
.uisum .h{ background:var(--indigo-soft); color:var(--indigo-dark); font-size:12.5px;
  font-weight:600; padding:10px 14px }
.uisum .r{ display:flex; justify-content:space-between; gap:14px; padding:11px 14px;
  border-top:1px solid var(--divider); font-size:13.5px }
.uisum .r:first-of-type{ border-top:0 }
.uisum .r em{ font-style:normal; color:var(--muted); flex:0 0 auto }
.uisum .r b{ color:var(--ink); font-weight:600; text-align:end }
.uisum .r b .ar{ color:var(--faint); margin:0 6px; font-weight:400 }

/* ————— before / after — the two columns the whole pitch turns on —————
   The contrast is carried by the design, not only by the words: the "today" column is
   flat, grey and struck through, the way a superseded way of working should look; the
   "with AranoKardex" column is white, lit by the brand ramp, and each of its rows
   answers the row opposite it. Both are the same six topics in the same order, so the
   eye can travel across on a wide screen and down the pair on a phone. */
.cmp{ display:grid; gap:14px; grid-template-columns:1fr; counter-reset:cmp }
@media (min-width:560px){ .cmp{ grid-template-columns:1fr 1fr; gap:16px } }
.cmp .col{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); background:#fff; box-shadow:var(--sh) }
.cmp .col::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px; z-index:2 }
.cmp .col.was{ background:#F5F7F9; border-color:#E4E9EE }
.cmp .col.was::before{ background:linear-gradient(90deg,#C6CFD8,#9FB0BF) }
.cmp .col.now::before{ background:linear-gradient(90deg,var(--mint),var(--indigo)) }
.cmp .col.now{ background:linear-gradient(180deg,#F4FAFF 0%,#FFFFFF 42%);
  border-color:#CFE4F6; box-shadow:0 2px 8px rgba(0,128,224,.07), 0 18px 40px rgba(8,25,43,.09) }

.cmp .col h4{ display:flex; align-items:center; gap:10px; margin:0;
  padding:16px 16px 13px; font-size:15px; font-weight:700; line-height:1.6 }
.cmp .col h4 .b{ width:29px; height:29px; border-radius:9px; display:grid; place-items:center;
  flex:0 0 auto }
.cmp .col h4 .b svg{ width:16px; height:16px }
.cmp .col h4 .t{ margin-inline-start:auto; font-size:11px; font-weight:600; padding:4px 9px;
  border-radius:99px; letter-spacing:normal }
.cmp .col.was h4{ color:#5B6976 }
.cmp .col.was h4 .b{ background:#E5EAEF; color:#7C8B99 }
.cmp .col.was h4 .t{ background:#E5EAEF; color:#7C8B99 }
.cmp .col.now h4{ color:var(--ink) }
.cmp .col.now h4 .b{ background:var(--indigo); color:#fff; box-shadow:0 4px 12px rgba(0,128,224,.35) }
.cmp .col.now h4 .t{ background:var(--mint-soft); color:var(--green-dark) }

.cmp ul{ list-style:none; padding:0 16px 6px; display:block }
.cmp li{ display:flex; gap:10px; align-items:flex-start; padding:11px 0;
  border-top:1px solid var(--divider); font-size:13.6px; line-height:1.8 }
.cmp li:first-child{ border-top:0 }
.cmp li svg{ width:15px; height:15px; flex:0 0 auto; margin-top:5px }
.cmp .col.was li{ color:#6B7A88 }
.cmp .col.was li svg{ color:#AFBCC7 }
.cmp .col.was li b{ color:#54636F; font-weight:600 }
.cmp .col.now li{ color:var(--body) }
.cmp .col.now li svg{ color:var(--mint) }
.cmp .col.now li b{ color:var(--ink) }
.cmp .col.now li:last-child{ border-bottom:0 }
/* the topic each pair is about, so a phone reader knows the two rows are a pair */
.cmp li em{ font-style:normal; display:block; font-size:11px; font-weight:600;
  color:var(--faint); margin-bottom:1px; letter-spacing:normal }
.cmp .col.now li em{ color:var(--indigo) }

/* ————— field / spec table — for the audit trail and the report list ————— */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px;
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:#fff }
.tbl th{ background:var(--bg-soft); color:var(--ink); font-weight:600; font-size:12.5px;
  text-align:start; padding:11px 13px; letter-spacing:normal }
.tbl td{ padding:11px 13px; border-top:1px solid var(--divider); color:var(--body); vertical-align:top }
.tbl td b{ font-weight:600 }
.tblwrap{ overflow-x:auto; margin:0 calc(var(--pad-x) * -1); padding-inline:var(--pad-x) }
.s-ink .tbl,.full .tbl{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12) }
.s-ink .tbl th,.full .tbl th{ background:rgba(255,255,255,.07); color:#fff }
.s-ink .tbl td,.full .tbl td{ border-top-color:rgba(255,255,255,.09); color:#B7CADA }

/* ————— status badges, drawn the way the app draws them ————— */
.bdg{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 11px; border-radius:99px; letter-spacing:normal }
.bdg::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor }
.bdg.ok{ background:var(--green-soft); color:#0A6E46 }
.bdg.tmp{ background:var(--indigo-soft); color:var(--indigo-dark) }
.bdg.warn{ background:var(--amber-soft); color:var(--amber-dark) }
.bdg.off{ background:var(--red-soft); color:#B02020 }

/* ————— deployment split: cloud vs on-prem ————— */
.dep{ display:grid; gap:12px; grid-template-columns:1fr }
@media (min-width:520px){ .dep{ grid-template-columns:1fr 1fr } }
.dep .d{ background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:19px 17px; box-shadow:var(--sh); position:relative; overflow:hidden }
.dep .d::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--azure),var(--indigo)) }
.dep .d.onprem::before{ background:linear-gradient(90deg,var(--mint),var(--green)) }
.dep .d h3{ font-size:16.5px; font-weight:700; color:var(--ink); margin:10px 0 4px }
.dep .d p{ font-size:13.8px; color:var(--muted); margin-bottom:13px }
.dep .d ul{ list-style:none; display:grid; gap:8px }
.dep .d li{ font-size:13.5px; color:var(--body); display:flex; gap:9px; line-height:1.8 }
.dep .d li svg{ width:16px; height:16px; margin-top:5px; flex:0 0 auto; color:var(--indigo) }
.dep .d.onprem li svg{ color:var(--mint) }
.s-ink .dep .d,.full .dep .d{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11) }
.s-ink .dep .d h3,.full .dep .d h3{ color:#fff }
.s-ink .dep .d p,.full .dep .d p{ color:#8CA2B6 }
.s-ink .dep .d li,.full .dep .d li{ color:#B7CADA }

/* ————— the report catalogue, grouped ————— */
.rep{ display:grid; gap:9px }
.repgrp{ margin-top:20px }
.repgrp > h4{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:10px;
  display:flex; align-items:center; gap:8px; letter-spacing:normal }
.repgrp > h4::after{ content:''; flex:1; height:1px; background:var(--divider) }
.rep .r.rv{ transform:translateY(16px) scale(.984) }
.rep .r.rv.in{ transform:none }
.rep .r{ display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid var(--border);
  border-radius:13px; padding:12px 14px; box-shadow:var(--sh); font-size:14px }
.rep .r svg{ width:17px; height:17px; margin-top:5px; flex:0 0 auto; color:var(--indigo) }
.rep .r b{ font-weight:600 } .rep .r span{ display:block; font-size:12.8px; color:var(--muted); line-height:1.75 }
.s-ink .rep .r,.full .rep .r{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.11) }
.s-ink .repgrp > h4::after,.full .repgrp > h4::after{ background:rgba(255,255,255,.12) }

/* ════════════════════════════════════════════════════════════════
   Ambient motion — eight loops, each tied to something the page is
   actually saying. Nothing moves for decoration alone, nothing
   competes with reading, and every one of them stops dead under
   prefers-reduced-motion (the block at the end of this section).
   ════════════════════════════════════════════════════════════════ */

/* 1 · the aurora behind each section breathes and drifts. It is the only
   abstract decoration in the catalog, so it is the right thing to move. */
@keyframes auraDrift{
  0%  { transform:translate3d(0,0,0)      scale(1) }
  50% { transform:translate3d(14px,-18px,0) scale(1.09) }
  100%{ transform:translate3d(0,0,0)      scale(1) }
}
.aura.a1{ animation:auraDrift 21s ease-in-out infinite }
.aura.a2{ animation:auraDrift 27s ease-in-out infinite reverse }

/* 2 · the one instruction on the first screen, drawn instead of written: a
   phone-shaped capsule with a dot falling through it. It reads without language,
   survives translation, and — being a real link to the next section — also works
   for anyone who taps it instead of scrolling. */
@keyframes sdrop{
  0%  { transform:translateY(0);     opacity:0 }
  16% { opacity:1 }
  68% { transform:translateY(10px);  opacity:1 }
  100%{ transform:translateY(12px);  opacity:0 }
}
@keyframes sbob{ 0%,100%{ transform:none } 50%{ transform:translateY(3px) } }
.sdown{ display:inline-grid; place-items:center; flex:0 0 auto; padding:2px 4px;
  animation:sbob 2.6s ease-in-out infinite }
.sdown .cap{ position:relative; display:block; width:19px; height:30px; border-radius:99px;
  border:1.6px solid rgba(255,255,255,.5); box-shadow:0 0 0 4px rgba(255,255,255,.05) }
.sdown .cap i{ position:absolute; inset-inline:0; top:6px; margin:0 auto; display:block;
  width:3px; height:6px; border-radius:99px; background:#fff;
  animation:sdrop 1.9s cubic-bezier(.45,0,.25,1) infinite }
.sdown:active .cap{ border-color:rgba(255,255,255,.6) }

/* 3 · a caret blinks in the drawn search field. The section's whole argument is
   "just start typing", and a live cursor says that faster than the caption does. */
@keyframes caret{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
.uisearch span::before{ content:''; display:inline-block; width:1.5px; height:15px;
  background:var(--indigo); margin-inline-end:7px; vertical-align:-2px;
  animation:caret 1.15s steps(1,end) infinite }

/* 4 · a highlight travels down the numbered-steps connector, in the direction the
   reader is going. Used by the transfer wizard, the onboarding path and the demo
   script — all three are sequences, so the line reads as flow, not decoration. */
@keyframes flowLine{ 0%{ background-position:50% 0% } 100%{ background-position:50% -200% } }
.steps::before{ background-size:100% 200%; animation:flowLine 9s linear infinite }

/* 5 · the amber "بدون مالک" KPI pulses. It is the one number on that tile grid the
   catalog argues should be driven to zero — so it is the one that asks for attention. */
@keyframes ping{
  0%  { box-shadow:0 0 0 0 rgba(222,144,32,.42) }
  70% { box-shadow:0 0 0 9px rgba(222,144,32,0) }
  100%{ box-shadow:0 0 0 0 rgba(222,144,32,0) }
}
.uikpi .k.a .o{ animation:ping 2.8s cubic-bezier(.3,.8,.4,1) infinite }

/* 6 · a slow sheen crosses the browser frame, so a still screenshot reads as a live
   screen rather than a flat picture. Long pause, low opacity — if you notice it
   working, it is too strong. */
@keyframes sheen{ 0%{ transform:translateX(-140%) } 42%,100%{ transform:translateX(140%) } }
.shot{ isolation:isolate }
.shot::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(104deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  animation:sheen 11s ease-in-out infinite }

@media (prefers-reduced-motion: reduce){
  .aura.a1,.aura.a2,.sdown,.sdown .cap i,.uisearch span::before,
  .steps::before,.uikpi .k.a .o,.shot::after,.signmark::after{ animation:none }
  .uisearch span::before{ opacity:1 } .sdown .cap i{ opacity:1; transform:translateY(5px) }
}


@media print{
  body{ background:#fff } .sheet{ box-shadow:none; max-width:none; padding:0 }
  .nav,.dock,.idx,.prog,.shot::after{ display:none !important }
  section{ page-break-inside:avoid; padding:14mm 12mm }
  .full{ min-height:0 }
  .rv{ opacity:1 !important; transform:none !important }
  .acc .a{ display:block !important } .acc,.card,.shot,.zoom,.cmp,.dep .d,.ui,.uitr,.uisum{ break-inside:avoid }
  .strip{ overflow:visible; flex-wrap:wrap }
  .tblwrap{ overflow:visible; margin:0; padding:0 }
}