@charset "utf-8";
/* ============================================================================
   FABER FLOW · shared sheet for the service pages · 2026-07-31
   ============================================================================
   ⚠ Absolute mobile-first. Base rules are the phone (~390px).
     Expansions layer in only through @media(min-width:700px) and
     @media(min-width:1040px). There isn't a single max-width media query, and
     not a single rule with a physical left/right.

   File map (header map):
   --- Tokens and base ---
   - :root                  Color, sizing and timing tokens. Identical to the main screen, except the type scale
   - html[data-theme="light"] Override of the semantic tokens for light mode (2026-08-05)
   - body / .wrap / .wrap-n Base: 17px on phone, 18px from 700px. Body copy sits on --ink-soft (10.3:1)
   - .vh                    Screen-reader-only text ("opens in a new tab" announcement)
   - .skip                  Skip-to-content link, revealed only on focus
   - .grad                  Moving turquoise→indigo→turquoise gradient. Used on the h1 heading only
   --- Atmosphere layers ---
   - .glow / .grid / .noise / .sprog   Identical to the main screen
   --- Nav and buttons ---
   - .nav / .nav-in / .brand / .mark   Fixed top bar + the brand mark that draws itself
   - .nav-back                        Back link to the main site and the services list.
                                      Visible on mobile too (2026-07-31); only .sec-link is cut there
   - .btn / .btn-p / .btn-g / .btn-s  Engraved buttons, 48px touch target
   - .tgls / .tgl                    Light/dark toggle and language toggle, INTEGRATION.md block 8
   --- Sections ---
   - .sec / .lbl            Full-bleed hairline + monospace index label and dot
   --- hero ---
   - .hero / .hero-grid     One column at base, two columns from 1040px
   - .hero .sub             One sentence explaining what this is. 19px on phone, 21px from 700px
   --- The animated schematic (.fd) ---
   - .fd / .fd-m / .fd-d    Two variants: vertical on phone, horizontal from 700px. Swapped via display only
   - .fd g.dw              The drawing layer: lines that draw themselves via stroke-dashoffset
                            .reg registration marks, .dim dimension lines, .blk turquoise block, .alt indigo block
   - .fd g.pl              The bloom layer: a copy of the block rectangles, opacity 0, lights up per data-step
   - .fd g.lb              Labels: .t-i turquoise index, .t-i2 indigo index, .t-he block name,
                            .t-l LIVE label, .t-io input/output labels, the default is a dimension note
   - .fd path.sg           Signal segments. The dot runs on these only and never enters a block
   - The nth-child chain    Draw delays, up to 30 elements
   --- Section bodies ---
   - .plist                 Problem section: three items with an accent line
   - .steps                 How it works section: numbered list mapped to blocks in the schematic
   - .outs / .out           What comes out of it section: three cards
   - .needs                 What we need from you section: a short, direct list
   - .svc-grid / .svc       Services list on the index page
   --- Closing ---
   - .cta                   Indigo→turquoise closing strip
   - footer .tblock/.fnav   Schematic title block + link to the accessibility statement
   --- Motion and accessibility ---
   - .rv / .rv.hd / .rv.in  Scroll reveal
   - :focus-visible         #7DE8DE focus ring, 2px wide, 13.8:1 against the background
   - @media(min-width:700px) / (min-width:1040px)
   - @media(prefers-reduced-motion:reduce)   Full coverage: schematic drawn and frozen, no signal and no bloom
   --- Typography ---
   - Labels are Latin/English throughout; tracking and the shared monospace
     face apply uniformly: .brand, .lbl .ix, .fd text, .fd .t-i, .t-l, .fd .t-he
   ============================================================================ */

:root{
  --bg:#06090C;
  --bg-2:#0B1116;
  /* Contrast: body copy sits on --ink-soft (10.3:1) or --ink (17.2:1).
     --ink-dim is 9.4:1 and used for secondary lines. --ink-faint (5.9:1) is
     for registration marks only, --ink-mark for decorative dimension notes
     in the schematic and nothing else */
  --ink:#E9EFF4;
  --ink-soft:#AEBCC8;
  --ink-dim:#A3B4C2;
  --ink-faint:#7C8EA0;
  --ink-mark:#4B5A68;
  /* Brand scale. Seven stops, purple to aqua, identical to the mark's scale */
  --ff-1:#795DFF;
  --ff-2:#547AFF;
  --ff-3:#008FFF;
  --ff-4:#00A8E3;
  --ff-5:#00BED4;
  --ff-6:#22D3C5;
  --ff-7:#00FFDE;
  /* Semantic. Every token that carries text meets 4.5:1 against --bg and --bg-2 */
  --acc:#6FA0FF;
  --acc-lit:#8DBBFF;
  --acc-glow:#7FB0FF;
  --acc-deep:#1A3FF6;
  --acc-2:var(--ff-1);      /* 4.58:1 on --bg, 4.36:1 on --bg-2. Decorative only, not for text */
  --acc-2-lit:#A08CFF;      /* 7.31:1 · the purple that's safe to set text on */
  --acc-3:var(--ff-3);
  --acc-3-lit:#6FC2FF;
  --line:rgba(255,255,255,.07);
  --r:4px;
  --max:1180px;
  --max-n:1012px;
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --font-display:'Heebo',system-ui,sans-serif;
  --draw:2.2s;

  /* --- Atmosphere layers, cards and toggles (2026-08-05 · light/dark toggle)
     rgba values that used to be written directly in the sheet and relied on
     a fixed dark background moved here. The dark value of every token is
     bit-identical to what was previously in the code; the light mode is
     defined in the html[data-theme="light"] block right after --- */
  --nav-bg:rgba(6,9,12,.82);
  --veil:rgba(233,239,244,.09);
  --veil-2:rgba(233,239,244,.045);
  --glow-1:rgba(26,63,246,.20);
  --glow-2:rgba(121,93,255,.16);
  --glow-bar:rgba(34,211,197,.35);      /* Glow of the progress bar (.sprog) */
  --noise-op:.022;
  --card:rgba(233,239,244,.03);          /* Card surface: .plist li, .steps li, .svc */
  --card-2:rgba(233,239,244,.015);       /* A subtler surface: .tblock in the footer */
  --line-2:rgba(255,255,255,.12);        /* Toggle border on focus/hover, block 8c */
  --btn-border:rgba(233,239,244,.24);    /* Border of .btn-g */
  --accent-bar:rgba(233,239,244,.28);    /* Accent bar of .plist li */
  --shine:rgba(233,239,244,.07);         /* Subtle inner shine on .btn-g */
  --dot:#14A79C;                         /* The separator dot in .lbl */
  /* The following tokens are intentionally fixed in both modes, so they have no override in the light block */
  --on-acc:#FFFFFF;                      /* Text over an --acc-deep fill, fixed. 6.81:1 */
  --btn-fill-hover:#2D4BF7;              /* Hover fill of the buttons, fixed. 6.07:1 */
  --cta-ink:#E4EDF4;                     /* Text of the CTA strip, fixed */
  --cta-base:#06090C;                    /* Base of the CTA strip, always stays dark so the fixed text remains legible */
}

/* ============================================================================
   Light mode. The --ff-1..7 scale doesn't change, only the semantics. The ink
   and accent values are copied from ../logo/tokens.css (the source of truth
   for light mode); the tokens unique to this sheet (card/line-2/btn-border/
   accent-bar/shine/dot) are derived here by the same logic: RGB flips from
   233,239,244 (white) to 9,14,20 (near-black).
   ============================================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-2:#F4F7FA;
  --ink:#141416;          /* 18.40:1 */
  --ink-soft:#2A3038;     /* 10.21:1 */
  --ink-dim:#3A424B;      /*  6.42:1 */
  --ink-faint:#6E7A86;    /*  4.38:1 · large/decorative text only (registration frames in the schematic) */
  --ink-mark:#7A8590;     /*  2.54:1 · decorative dimension notes in the schematic only */

  --acc:#1A3FF6;          /*  5.06:1 · links and emphasized text */
  --acc-lit:#173FC4;      /*  6.83:1 · the strong emphasis */
  --acc-glow:#1A3FF6;     /*  5.06:1 · no glow on white, falls back to a solid color */
  --acc-deep:#1A3FF6; /* #22D3C5 · the fill, not the text */
  --acc-2:#6B4EE6;        /*  5.44:1 · in light mode the purple does carry text */
  --acc-2-lit:#5436C9;    /*  7.64:1 */
  --acc-3:#0063C1;        /*  5.91:1 */
  --acc-3-lit:#1668C4;    /*  5.51:1 */

  --line:rgba(9,14,20,.10);
  --line-2:rgba(9,14,20,.17);
  --veil:rgba(9,14,20,.07);
  --veil-2:rgba(9,14,20,.035);
  --glow-1:rgba(26,63,246,.10);
  --glow-2:rgba(107,78,230,.10);
  --glow-bar:rgba(11,124,116,.35);
  --noise-op:.014;
  --nav-bg:rgba(255,255,255,.86);
  --card:rgba(9,14,20,.022);
  --card-2:rgba(9,14,20,.013);
  --btn-border:rgba(9,14,20,.32);
  --accent-bar:rgba(9,14,20,.30);
  --shine:rgba(9,14,20,.05);
  --dot:var(--acc-lit);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-block-start:76px}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:17px;line-height:1.72;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Headings inherit letter-spacing:normal from the Hebrew sheet: positive tracking breaks a word into disconnected glyphs in Hebrew script */
h1,h2,h3,.display{font-family:'Poppins',system-ui,sans-serif;line-height:1.16;letter-spacing:normal}
.wrap{max-inline-size:var(--max);margin-inline:auto;padding-inline:20px}
.wrap-n{max-inline-size:var(--max-n)}

.vh{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:12px;z-index:80;
  padding:10px 16px;border-radius:var(--r);background:var(--acc-deep);color:var(--on-acc);
  font-weight:600;text-decoration:none}
.skip:focus-visible{inset-block-start:12px}

/* Visible focus on every interactive element: #7DE8DE on #06090C is 13.8:1 */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc-lit);outline-offset:3px;border-radius:2px}

/* ---------- .grad ---------- */
.grad{
  background-image:linear-gradient(90deg,
    var(--acc-lit) 0%, var(--acc) 22%, var(--acc-2-lit) 50%, var(--acc) 78%, var(--acc-lit) 100%);
  background-size:220% 100%;background-position:0% 50%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:gradshift 7s linear infinite alternate;
}
@keyframes gradshift{from{background-position:0% 50%}to{background-position:100% 50%}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background-image:none;color:var(--acc-lit);-webkit-text-fill-color:var(--acc-lit)}
}

/* ---------- atmosphere layers ---------- */
.glow{position:fixed;inset-block:-30%;inset-inline:0;z-index:0;pointer-events:none;
  will-change:transform;
  background:
    radial-gradient(46% 24% at 66% 24%, var(--glow-1), transparent 72%),
    radial-gradient(52% 28% at 30% 62%, var(--glow-2), transparent 74%)}
.grid{position:fixed;inset-block:-160px;inset-inline:0;z-index:0;pointer-events:none;
  will-change:transform;
  background-image:
    repeating-linear-gradient(90deg, var(--veil) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(180deg, var(--veil) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--veil-2) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(180deg, var(--veil-2) 0 1px, transparent 1px 24px);
  -webkit-mask-image:radial-gradient(130% 82% at 50% 16%, #000 18%, rgba(0,0,0,.35) 62%, transparent 96%);
  mask-image:radial-gradient(130% 82% at 50% 16%, #000 18%, rgba(0,0,0,.35) 62%, transparent 96%)}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--noise-op);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
.sprog{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:60;
  block-size:2px;inline-size:0;pointer-events:none;
  background:linear-gradient(270deg,var(--acc),var(--acc-2));
  box-shadow:0 0 12px var(--glow-bar)}

/* ---------- nav ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block-end:1px solid var(--line)}
.nav-in{display:flex;flex-wrap:wrap;row-gap:8px;align-items:center;justify-content:space-between;gap:12px;min-block-size:58px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:700;letter-spacing:.14em;font-size:14px;color:var(--ink);
  white-space:nowrap;text-decoration:none}
/* ⚠ The back link must exist on mobile too: a service page reached via a
   direct link is sometimes the first page opened, and without the link
   there's no way back to the site. Only "All services" (.sec-link) is cut
   below 700px, so the row stays within width */
.nav-back{display:flex;gap:14px;align-items:center}
.nav-back .sec-link{display:none}
.nav-back a{position:relative;color:var(--ink-soft);text-decoration:none;font-size:17px;
  transition:color .18s ease;display:inline-flex;align-items:center;min-block-size:44px}
.nav-back a::after{content:"";position:absolute;inset-block-end:9px;inset-inline:0;
  block-size:1.5px;border-radius:1px;pointer-events:none;
  background:linear-gradient(270deg,var(--acc),var(--acc-2-lit));
  transform:scaleX(0);transform-origin:0% 50%;transition:transform .22s var(--ease)}
.nav-back a:hover,.nav-back a:focus-visible{color:var(--ink)}
.nav-back a:hover::after,.nav-back a:focus-visible::after{transform:scaleX(1)}

/* The mark in the nav bar. Ratio 191:247, so width is derived from height,
   not squared off. The entrance is a short rise of three layers one after
   another, in the order the mark is built.
   ⚠ There's no ".dw" layer here marking "document ready": on service pages
   .dw is already taken by the drawing layer inside the animated schematic
   (.fd .dw>*), so the animation runs without a gate */
.mark{block-size:26px;inline-size:20.1px;flex:0 0 auto;overflow:visible}
.mark path{transform-box:fill-box;transform-origin:50% 100%;
  opacity:0;animation:mkrise .52s var(--ease) both}
.mark .mk-top{animation-delay:.06s}
.mark .mk-wing{animation-delay:.17s}
.mark .mk-stem{animation-delay:.28s}
@keyframes mkrise{from{opacity:0;transform:translateY(14%) scale(.94)}
                  to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-block-size:48px;padding:12px 24px;border-radius:var(--r);line-height:1.4;
  text-decoration:none;font-weight:600;font-size:17px;font-family:'Poppins',system-ui,sans-serif;
  border:1px solid var(--acc);
  transition:color .3s ease,border-color .3s ease,transform .18s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:0% 50%;transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
/* ⚠ תוקן 2026-08-29. עמד על --ff-6 (#22D3C5), והלבן עליו נתן 1.88:1. הזהות
   עברה לכחול ו---acc-deep (#1A3FF6) הוא מילוי הכפתור, 6.81:1 עם --on-acc.
   אותו באג היה גם בעמוד הבית ובתאום האנגלי, ותוקן שם באותו סבב */
 .btn-p{background:var(--acc-deep);color:var(--on-acc);box-shadow:inset 0 1px 0 rgba(226,232,255,.30)}
.btn-p::before{background:var(--btn-fill-hover)}
.btn-g{color:var(--ink);border-color:var(--btn-border);box-shadow:inset 0 1px 0 var(--shine)}
.btn-g::before{background:var(--acc-deep)}
.btn-g:hover{color:var(--on-acc);border-color:var(--acc-deep)}
.btn-s{min-block-size:44px;padding:8px 14px;font-size:16px}

/* ---------- light/dark toggle and language toggle (INTEGRATION.md block 8c, copied verbatim) ---------- */
.tgls{display:flex;align-items:center;gap:6px}
.tgl{display:inline-flex;align-items:center;justify-content:center;
     min-inline-size:44px;min-block-size:44px;padding-inline:10px;
     background:none;border:1px solid var(--line);border-radius:var(--r);
     color:var(--ink-dim);cursor:pointer;font:inherit;
     font-size:calc(13px * var(--tmul,1));font-weight:600;letter-spacing:.06em;
     text-decoration:none;
     transition:color .2s var(--ease),border-color .2s var(--ease)}
.tgl:hover,.tgl:focus-visible{color:var(--ink);border-color:var(--line-2)}
.tgl-i{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;
       stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
html[data-theme="light"] .i-moon{display:inline}
html[data-theme="light"] .i-sun-c,
html[data-theme="light"] .i-sun-r{display:none}

/* ---------- section separator system ---------- */
.sec{border-block-start:1px solid var(--line)}
.lbl{display:flex;align-items:center;gap:9px;font-family:'Poppins',system-ui,sans-serif;
  font-size:17px;font-weight:700;letter-spacing:normal;color:var(--acc);margin-block-end:16px}
.lbl .ix{font-family:var(--mono);font-size:14.5px;font-weight:400;letter-spacing:.16em;color:var(--acc)}
.lbl .dt{color:var(--dot)}
.lbl::after{content:"";block-size:1px;flex:1 1 24px;max-inline-size:72px;
  background:linear-gradient(270deg,var(--acc),transparent)}

/* ---------- hero ---------- */
.hero{padding-block:92px 36px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
.hero .kick{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--acc);
  margin-block-end:14px;display:block}
h1{font-size:clamp(30px,7.6vw,54px);font-weight:800}
.hero .sub{margin-block-start:20px;max-inline-size:46ch;font-size:19px;
  color:var(--ink-soft);font-weight:300}
.hero .row{display:flex;flex-direction:column;gap:12px;margin-block-start:28px}
.hero .row .btn{inline-size:100%}

/* ============================================================================
   The animated schematic. Two variants, swapped via display only.
   ============================================================================ */
.fd-wrap{position:relative;min-inline-size:0}
.fd{width:100%;height:auto;display:block;margin-inline:auto;direction:ltr;
  animation:fdfade .8s ease .1s both}
.fd-m{max-inline-size:330px}
.fd-d{display:none;max-inline-size:600px}
@keyframes fdfade{from{opacity:0}to{opacity:1}}

/* The default in the schematic is a decorative dimension note. Every label meant to be read gets a class */
.fd text{font-family:var(--mono);letter-spacing:.14em;fill:var(--ink-mark)}
.fd-m text{font-size:10px}
.fd-d text{font-size:9px}
.fd-m .t-i,.fd-m .t-i2{font-size:12px;letter-spacing:.2em}
.fd-d .t-i,.fd-d .t-i2{font-size:11px;letter-spacing:.2em}
.fd-m .t-i,.fd-d .t-i{fill:var(--acc)}
.fd-m .t-i2,.fd-d .t-i2{fill:var(--acc-2-lit)}
/* Block names in English: unlike Hebrew, English has a usable monospace face,
   so labels inherit the shared mono face and tracking from .fd text above.
   Only the fill color is overridden here. */
.fd .t-he{fill:var(--ink)}
.fd-m .t-he{font-size:15px}
.fd-d .t-he{font-size:13.5px}
.fd .t-sm{font-size:12.5px}
.fd-d .t-sm{font-size:11.5px}
.fd .t-l{letter-spacing:.22em;fill:var(--acc-lit)}
.fd-m .t-l{font-size:9px}
.fd-d .t-l{font-size:8px}
.fd .t-io{fill:var(--ink-dim)}

/* --- drawing layer --- */
.fd .dw>*{fill:none;stroke:var(--acc);stroke-opacity:.55;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:fddraw .55s var(--ease) both}
.fd .dw>.reg{stroke:var(--ink-faint);stroke-opacity:1;stroke-width:1.2}
.fd .dw>.dim{stroke:var(--acc-2-lit);stroke-opacity:.62;stroke-width:1}
.fd .dw>.blk{stroke-width:1.8;fill:var(--acc);fill-opacity:0;
  animation:fddraw .55s var(--ease) both, fdfill .9s ease both}
.fd .dw>.alt{stroke:var(--acc-2-lit);stroke-opacity:.72;fill:var(--acc-2);
  animation:fddraw .55s var(--ease) both, fdfill2 .9s ease both}
@keyframes fddraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fdfill{from{fill-opacity:0}to{fill-opacity:.07}}
@keyframes fdfill2{from{fill-opacity:0}to{fill-opacity:.2}}

.fd .dw>*:nth-child(1){animation-delay:0s}
.fd .dw>*:nth-child(2){animation-delay:.05s}
.fd .dw>*:nth-child(3){animation-delay:.1s}
.fd .dw>*:nth-child(4){animation-delay:.15s}
.fd .dw>*:nth-child(5){animation-delay:.24s}
.fd .dw>*:nth-child(6){animation-delay:.32s}
.fd .dw>*:nth-child(7){animation-delay:.4s}
.fd .dw>*:nth-child(8){animation-delay:.48s}
.fd .dw>*:nth-child(9){animation-delay:.56s}
.fd .dw>*:nth-child(10){animation-delay:.64s}
.fd .dw>*:nth-child(11){animation-delay:.72s}
.fd .dw>*:nth-child(12){animation-delay:.8s}
.fd .dw>*:nth-child(13){animation-delay:.88s}
.fd .dw>*:nth-child(14){animation-delay:.96s}
.fd .dw>*:nth-child(15){animation-delay:1.04s}
.fd .dw>*:nth-child(16){animation-delay:1.12s}
.fd .dw>*:nth-child(17){animation-delay:1.2s}
.fd .dw>*:nth-child(18){animation-delay:1.28s}
.fd .dw>*:nth-child(19){animation-delay:1.36s}
.fd .dw>*:nth-child(20){animation-delay:1.44s}
.fd .dw>*:nth-child(21){animation-delay:1.52s}
.fd .dw>*:nth-child(22){animation-delay:1.6s}
.fd .dw>*:nth-child(23){animation-delay:1.66s}
.fd .dw>*:nth-child(24){animation-delay:1.72s}
.fd .dw>*:nth-child(25){animation-delay:1.78s}
.fd .dw>*:nth-child(26){animation-delay:1.84s}
.fd .dw>*:nth-child(27){animation-delay:1.9s}
.fd .dw>*:nth-child(28){animation-delay:1.94s}
.fd .dw>*:nth-child(29){animation-delay:1.98s}
.fd .dw>*:nth-child(30){animation-delay:2s}

.fd .lb>*{opacity:0;animation:fdfade .6s ease both}
.fd .lb>*:nth-child(1){animation-delay:.7s}
.fd .lb>*:nth-child(2){animation-delay:.8s}
.fd .lb>*:nth-child(3){animation-delay:.9s}
.fd .lb>*:nth-child(4){animation-delay:1s}
.fd .lb>*:nth-child(5){animation-delay:1.1s}
.fd .lb>*:nth-child(6){animation-delay:1.2s}
.fd .lb>*:nth-child(7){animation-delay:1.3s}
.fd .lb>*:nth-child(8){animation-delay:1.4s}
.fd .lb>*:nth-child(9){animation-delay:1.5s}
.fd .lb>*:nth-child(10){animation-delay:1.6s}
.fd .lb>*:nth-child(11){animation-delay:1.7s}
.fd .lb>*:nth-child(12){animation-delay:1.8s}
.fd .lb>*:nth-child(13){animation-delay:1.9s}
.fd .lb>*:nth-child(14){animation-delay:2s}
.fd .lb>*:nth-child(15){animation-delay:2.05s}
.fd .lb>*:nth-child(16){animation-delay:2.1s}
.fd .lb>*:nth-child(17){animation-delay:2.15s}
.fd .lb>*:nth-child(18){animation-delay:2.2s}
.fd .lb>*:nth-child(19){animation-delay:2.25s}
.fd .lb>*:nth-child(20){animation-delay:2.3s}
.fd .lb>*:nth-child(21){animation-delay:2.34s}
.fd .lb>*:nth-child(22){animation-delay:2.38s}
.fd .lb>*:nth-child(23){animation-delay:2.42s}
.fd .lb>*:nth-child(24){animation-delay:2.46s}
.fd .lb>*:nth-child(25){animation-delay:2.5s}

/* --- bloom layer: the whole block lights up. The JS driver animates opacity only --- */
.fd .pl>*{fill:var(--acc);fill-opacity:.17;stroke:var(--acc-lit);stroke-width:1.9;
  stroke-linejoin:round;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 12px rgba(125,232,222,.6)) drop-shadow(0 0 28px rgba(34,211,197,.35))}
.fd .pl>.alt{fill:var(--acc-2);fill-opacity:.26;
  filter:drop-shadow(0 0 12px rgba(160,140,255,.6)) drop-shadow(0 0 28px rgba(121,93,255,.4))}

/* --- signal dot: runs on the connector segments only, never inside a block --- */
.fd .sg{fill:none;stroke:var(--acc-lit);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:.001 .999;stroke-dashoffset:1;opacity:0;
  filter:drop-shadow(0 0 7px rgba(125,232,222,.95)) drop-shadow(0 0 18px rgba(34,211,197,.5))}

/* ============================================================================
   Section bodies
   ============================================================================ */
.sec-body{padding-block:38px 44px}
.sec-body h2{font-size:clamp(25px,6.2vw,40px);font-weight:800;max-inline-size:20ch}
.sec-lead{margin-block-start:14px;max-inline-size:54ch;color:var(--ink-soft);
  font-weight:300;font-size:18px}

/* 01 the problem */
.plist{display:grid;gap:12px;margin-block-start:24px}
.plist li{list-style:none;position:relative;color:var(--ink);font-size:18px;font-weight:300;
  line-height:1.6;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);border-inline-start:2px solid var(--accent-bar);
  background:var(--card)}

/* 02 how it works */
.steps{display:grid;gap:12px;margin-block-start:24px;counter-reset:st}
.steps li{list-style:none;counter-increment:st;position:relative;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:start;
  padding:18px 18px 20px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),transparent);
  transition:border-color .35s ease,background .35s ease}
.steps li:hover{border-color:rgba(34,211,197,.5);
  background:linear-gradient(180deg,rgba(34,211,197,.05),rgba(121,93,255,.045))}
.steps li::before{content:"0" counter(st);grid-row:1 / span 2;align-self:start;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--acc);
  inline-size:38px;block-size:38px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(34,211,197,.09);border:1px solid rgba(34,211,197,.28)}
.steps b{font-family:'Poppins',system-ui,sans-serif;font-size:18px;font-weight:700;
  letter-spacing:normal;color:var(--ink)}
.steps p{color:var(--ink-soft);font-size:17px;font-weight:300;line-height:1.6}

/* 03 what comes out of it */
.outs{display:grid;grid-template-columns:1fr;gap:14px;margin-block-start:24px}
.out{position:relative;padding:22px 20px 24px;border-radius:var(--r);
  border:1px solid rgba(34,211,197,.34);
  background:linear-gradient(158deg,rgba(34,211,197,.075),rgba(121,93,255,.11) 78%,rgba(121,93,255,.04));
  box-shadow:inset 0 0 0 1px rgba(160,140,255,.06), 0 22px 46px -34px rgba(121,93,255,.85)}
.out::before{content:"";position:absolute;inset:7px;pointer-events:none;
  background:
    linear-gradient(var(--acc),var(--acc)) 0 0/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 0/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 100%/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/14px 1px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 100%/1px 14px no-repeat}
.out .onum{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--acc-lit);
  display:block;margin-block-end:10px}
.out p{color:var(--ink);font-size:18px;font-weight:300;line-height:1.6}

/* 04 what we need from you */
.needs{display:grid;gap:10px;margin-block-start:24px;max-inline-size:62ch}
.needs li{list-style:none;position:relative;color:var(--ink-soft);font-size:18px;
  font-weight:300;line-height:1.6;padding-inline-start:24px;padding-block:4px}
.needs li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:18px;
  inline-size:12px;block-size:1px;background:var(--acc)}
.needs-note{margin-block-start:20px;color:var(--ink);font-size:18px;
  padding-inline-start:16px;border-inline-start:2px solid var(--acc)}

/* ---------- services list on the index page ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:26px}
.svc{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px;align-items:start;
  padding:20px 18px 22px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--card),transparent);
  text-decoration:none;color:inherit;
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease,transform .5s var(--ease)}
.svc:hover{border-color:rgba(34,211,197,.55);transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(34,211,197,.055),rgba(121,93,255,.05));
  box-shadow:0 26px 50px -34px rgba(121,93,255,.9)}
.svc .snum{grid-row:1 / span 2;align-self:start;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;color:var(--acc);inline-size:38px;block-size:38px;border-radius:var(--r);
  display:grid;place-items:center;background:rgba(34,211,197,.09);
  border:1px solid rgba(34,211,197,.28)}
.svc h2{font-size:19px;font-weight:700;line-height:1.34}
.svc p{color:var(--ink-soft);font-size:17px;font-weight:300;line-height:1.55}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;padding-block:58px;text-align:center;
  border-block-end:1px solid rgba(160,140,255,.3);
  background-color:var(--cta-base);
  background-image:linear-gradient(112deg,rgba(121,93,255,.26),rgba(53,120,205,.16) 46%,rgba(34,211,197,.14))}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 130% at 50% 128%, rgba(34,211,197,.24), transparent 66%)}
.cta-in{position:relative}
.cta h2{font-size:clamp(26px,6.6vw,46px);font-weight:800;color:var(--cta-ink)}
.cta p{margin:18px auto 0;max-inline-size:48ch;color:var(--cta-ink);font-weight:300;font-size:18px}
.cta .row{display:flex;flex-direction:column;gap:12px;margin-block-start:28px;align-items:center}
.cta .row .btn{inline-size:100%}

/* ---------- reveal ---------- */
/* ⚠ חשיפה בגלילה כשיפור, לא כתנאי. שוכתב 2026-08-30. ראה את ההערה
   המלאה ביומן ההחלטות: scale(.965) הזיז כל כותרת 9.8px הצידה, והטרנזישן
   נעצר בלשונית מוסתרת ואז התוכן לא הופיע בכלל.
   ⚠ אין להחזיר opacity:0 לבורר .rv עצמו. ההסתרה חיה רק תחת html.js-rv. */
.rv{opacity:1;transform:none}
html.js-rv .rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js-rv .rv.hd{transform:translateY(26px)}
html.js-rv .rv.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer{padding-block:44px}
.tblock{border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center;
  background:var(--card-2);font-size:17px;color:var(--ink);letter-spacing:normal}
/* ⚠ .tblock .dim carries a monospace face, so it holds Latin/code content
   only (the schematic's build code). Hebrew text here used to pick up
   monospace by mistake — a bug that recurred four times in the project */
.tblock .dim{display:block;margin-block-start:8px;font-family:var(--mono);font-size:14px;
  letter-spacing:.08em;color:var(--ink-dim)}
.tblock .fnav{display:block;margin-block-start:14px}
.tblock a{color:var(--acc-lit);text-decoration:none;text-underline-offset:3px}
.tblock a:hover{text-decoration:underline}

/* ============================================================================
   ≥ 700px
   ============================================================================ */
@media (min-width:700px){
  body{font-size:18px;line-height:1.75}
  .wrap{padding-inline:26px}

  .nav-in{min-block-size:62px;gap:24px}
  .nav-back{gap:26px}
  .nav-back .sec-link{display:inline-flex}
  .mark{block-size:28px;inline-size:21.65px}
  .btn-s{padding:9px 20px}

  .hero{padding-block:112px 48px}
  .hero-grid{gap:44px}
  .hero .sub{margin-block-start:24px;font-size:21px}
  .hero .row{flex-direction:row;flex-wrap:wrap;gap:14px;margin-block-start:34px}
  .hero .row .btn{inline-size:auto}

  .fd-m{display:none}
  .fd-d{display:block}

  .lbl{font-size:17px;gap:12px;margin-block-end:14px}
  .lbl .ix{font-size:14px}

  .sec-body{padding-block:48px 60px}
  .sec-lead{margin-block-start:16px;font-size:19px}

  .plist{gap:14px;grid-template-columns:repeat(3,1fr);margin-block-start:30px}
  .plist li{padding:22px 20px;font-size:18px}

  .steps{margin-block-start:30px;gap:14px}
  .steps li{padding:22px 22px 24px}
  .steps b{font-size:19px}
  .steps p{font-size:18px}

  .outs{grid-template-columns:repeat(3,1fr);gap:16px;margin-block-start:30px}
  .out{padding:26px 24px 28px}

  .needs{margin-block-start:30px}
  .needs li{font-size:18px}
  .needs-note{font-size:19px;padding-inline-start:20px}

  .svc-grid{grid-template-columns:1fr 1fr;gap:14px;margin-block-start:32px}
  .svc h2{font-size:20px}
  .svc p{font-size:17.5px}
  .svc-wide{grid-column:1 / -1}

  .cta{padding-block:74px}
  .cta p{margin-block-start:20px;font-size:19px}
  .cta .row{flex-direction:row;justify-content:center;margin-block-start:32px}
  .cta .row .btn{inline-size:auto}

  footer{padding-block:64px}
  .tblock{padding:24px;font-size:18px}
}

/* ============================================================================
   ≥ 1040px
   ============================================================================ */
@media (min-width:1040px){
  /* The steps list is a single column because it's a sequence. At a full
     1012px the row stretches and dead space is left at the inline edge, so
     it caps at 800px and hugs the reading edge */
  .steps{max-inline-size:800px}
  .hero{padding-block:142px 60px}
  .hero-grid{grid-template-columns:1.04fr 1fr;gap:50px}
  .hero .sub{font-size:22px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================================
   Reduced motion preference: full coverage. The schematic reaches a fully
   drawn, frozen state.
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv,.rv.hd{opacity:1!important;transform:none!important}
  .fd{opacity:1}
  .fd .dw>*{stroke-dashoffset:0}
  .fd .dw>.blk{fill-opacity:.07}
  .fd .dw>.alt{fill-opacity:.2}
  .fd .lb>*{opacity:1}
  .fd .pl{display:none}
  .fd .sg{display:none}
  .sprog{display:none}
  .grid,.glow{transform:none!important}
  .mark path{animation:none;opacity:1}
  .nav-back a::after{transform:scaleX(0)}
  .nav-back a:hover::after,.nav-back a:focus-visible::after{transform:scaleX(1)}
  .grad{animation:none;background-position:0% 50%}
}

/* ===== 03 · הדגמה ====================================================
   ⚠ השיחות הן דוגמה מומצאת ומסומנות ככאלה ב-.demo-note. אין כאן לקוח
   אמיתי, אין שם אמיתי ואין נתון שנלקח מתיק. זה תנאי, לא קישוט.
   .chat  חלון וואטסאפ. role=img עם aria-label שמספר את כל השיחה, כי
          קורא מסך שמקריא עשר בועות בזו אחר זו לא מבין מה קרה כאן.
   .bub.in   הודעה מהמערכת, מיושרת לקצה ההתחלה
   .bub.out  הודעה מהפונה, מיושרת לקצה הסוף ובצבע המבטא */
.demo-note{margin-block-start:10px;color:var(--ink-dim);
  font-size:calc(15px * var(--tmul))}
.track{margin-block-start:34px;padding-block-start:28px;
  border-block-start:1px solid var(--line)}
.track:first-of-type{border-block-start:0;padding-block-start:0}
.track-n{display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;color:var(--acc);margin-block-end:8px}
.track-h h3{font-family:var(--font-h);font-weight:700;
  font-size:clamp(21px,3.8vw,30px);line-height:1.3;color:var(--ink)}
.track-p{margin-block-start:12px;color:var(--ink-soft)}
.track-b{margin-block-start:24px;display:grid;grid-template-columns:1fr;gap:18px}
.chat{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--bg-2);overflow:hidden}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border-block-end:1px solid var(--line)}
.chat-av{display:inline-flex;align-items:center;justify-content:center;
  inline-size:36px;block-size:36px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--acc);flex:0 0 auto}
.chat-av .ico{inline-size:18px;block-size:18px}
.chat-h b{display:block;font-family:var(--font-h);font-weight:700;
  font-size:calc(15px * var(--tmul));color:var(--ink)}
.chat-h em{display:block;font-style:normal;color:var(--ink-dim);font-size:12px}
.chat-b{padding:16px;display:flex;flex-direction:column;gap:10px}
.bub{position:relative;max-inline-size:82%;padding:11px 14px 20px;
  border-radius:var(--r-lg);font-size:calc(15px * var(--tmul));line-height:1.6}
.bub .t{position:absolute;inset-block-end:6px;inset-inline-end:12px;
  font-size:11px;color:var(--ink-dim);direction:ltr;unicode-bidi:isolate}
.bub.in{align-self:flex-start;background:var(--bg);color:var(--ink-soft);
  border:1px solid var(--line)}
.bub.out{align-self:flex-end;background:var(--btn-fill);color:var(--on-acc)}
.bub.out .t{color:var(--on-acc);opacity:.75}
.ticket{border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--bg-2);padding:20px 18px}
.ticket-h{display:flex;align-items:center;gap:10px;
  font-family:var(--font-h);font-weight:700;
  font-size:calc(16px * var(--tmul));color:var(--ink)}
.ticket-h .bic{display:inline-flex;color:var(--acc)}
.ticket-h .ico{inline-size:20px;block-size:20px}
.ticket dl{margin-block-start:16px;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.ticket dl>div{display:grid;grid-template-columns:96px 1fr;gap:12px;
  padding:10px 12px;background:var(--bg)}
.ticket dt{color:var(--ink-dim);font-size:calc(14px * var(--tmul))}
.ticket dd{color:var(--ink);font-size:calc(14px * var(--tmul))}
.ticket-l{margin-block-start:16px;display:grid;gap:8px;padding:0;list-style:none}
.ticket-l li{position:relative;padding-inline-start:18px;color:var(--ink-soft);
  font-size:calc(15px * var(--tmul))}
.ticket-l li::before{content:"";position:absolute;inset-inline-start:0;
  inset-block-start:.7em;inline-size:6px;block-size:6px;border-radius:50%;
  background:var(--acc)}
.ticket-f{margin-block-start:14px;color:var(--ink-dim);
  font-size:calc(14px * var(--tmul))}


@media(min-width:700px){
  .track-b{grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .bub{max-inline-size:88%}
}
/* ⚠ הועתק מ-brand/home.html 2026-08-30 כדי שההדגמה תהיה רכיב אחד בכל האתר.
   תיקון כאן חייב לחזור גם לשם, ולהיפך. */

/* ⚠ עמוד שירות נכתב מחדש 2026-08-30. אורן: ״לקצר למקסימום, קצר חד וברור
   מה זה נותן, עם הדגמה ויזואלית קצרה״. קודם היו שש סקציות ו-384 מילים.
   עכשיו שלוש: כאב בכותרת, הדגמה, מה זה נותן. .hero-solo מבטל את טור
   השרטוט, כי ההדגמה עצמה החליפה אותו. */
.hero-solo{grid-template-columns:1fr!important}
.gives{list-style:none;padding:0;margin-block-start:var(--sp-block,26px);
  display:grid;gap:12px}
.gives li{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--bg-2)}
.gives b{font-family:var(--font-h);font-weight:700;color:var(--ink);font-size:17px}
.gives span{color:var(--ink-soft);font-size:15px;line-height:1.6}
@media(min-width:700px){.gives{grid-template-columns:repeat(3,1fr)}}

/* ⚠ הכלל הבסיסי של אייקוני המותג. נעדר מהגיליון הזה עד 2026-08-30, ולכן
   האייקונים בהדגמה (הסמל בראש השיחה והוי בכרטיס) יצאו ריקים: ה-SVG הגיע
   בלי fill ובלי stroke. קיים במקביל ב-brand/home.html. */
.ico{display:block;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ⚠ יעד מגע. שני הקישורים המשפטיים בפוטר היו 23 פיקסל גובה בעמודי
   השירות, מתחת ל-44. תוקן בעמודי הבית ב-2026-08-29 ונשכח כאן. */
.tblock .fnav{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.tblock .fnav a{display:inline-flex;align-items:center;min-block-size:44px}
.nav-in .brand{min-block-size:44px;display:inline-flex;align-items:center}

/* ⚠ ראה את ההערה למעלה: הסרגל נשבר לשתי שורות ובלע את ראש העמוד */
.nav-in{flex-wrap:nowrap}
.nav-back{display:none}
@media(min-width:700px){ .nav-back{display:inline-flex} }

/* ⚠ ״המסלול הראשון בקושי רואים בלבן״. .track-n עמד על --acc בגודל 12
   בלי משקל, ובמצב בהיר זה נעלם. עכשיו תגית עם רקע ומשקל. */
.track-n{display:inline-flex;align-items:center;padding:5px 12px;
  border-radius:999px;background:var(--bg-2);border:1px solid var(--line-2);
  color:var(--acc-lit);font-family:var(--font-b);font-weight:700;
  font-size:13px;letter-spacing:0}

/* ⚠ ״האייקון מרגיש מנותק כי אין את הרקע״. לאווטאר לא היה מילוי. */
.chat-av{background:var(--btn-fill);border-color:transparent;color:var(--on-acc)}

/* ⚠ ״לא ברור מה זה המערכת״. שורת הסטטוס אומרת עכשיו מי עונה. */
.chat-h em{font-size:12px}

/* ⚠ ״הקוביות והוי לא במיקום הנכון״. כותרת הכרטיס הייתה flex עם האייקון
   בקצה, והשורות בטבלה לא התיישרו לרוחב אחיד. */
.ticket-h{align-items:center;gap:10px}
.ticket-h .bic{flex:0 0 auto;inline-size:32px;block-size:32px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);background:var(--bg);border:1px solid var(--line-2)}
.ticket dl>div{grid-template-columns:88px 1fr;align-items:baseline}
.ticket dt{font-weight:600}

/* ============ מסגרת אייפון עם וואטסאפ ============
   ⚠ אורן: ״תייצר אייפון עם וואטסאפ ואנימציה של הודעות אחת אחרי השנייה,
   האייפון חייב להיראות אמיתי״. הבנייה כאן היא CSS בלבד, בלי תמונה ובלי
   ספרייה: מסגרת טיטניום עם הדגשות, מסך שחור, איזור דינמי, ופס בית.
   ⚠ הצבעים כאן קשיחים בכוונה. מכשיר פיזי לא מחליף צבע בין מצב בהיר לכהה,
   וזה בדיוק מה שגורם לו להיראות אמיתי על שני הרקעים.
   ⚠ ההודעות נחשפות אחת אחרי השנייה דרך animation-delay ולא דרך JS,
   ולכן זה עובד גם בלי סקריפט. prefers-reduced-motion מציג הכל מיד. */
.phone{inline-size:min(320px,100%);margin-inline:auto;position:relative;
  aspect-ratio:9/19.5;border-radius:44px;padding:10px;
  background:linear-gradient(150deg,#d9dde3,#8e949e 28%,#f2f4f7 46%,#7d838d 62%,#c8ccd3);
  box-shadow:0 26px 60px -18px rgba(9,14,20,.45),0 2px 5px rgba(9,14,20,.28)}
.phone::before{content:"";position:absolute;inset:2px;border-radius:42px;
  border:1px solid rgba(255,255,255,.5);pointer-events:none}
.phone-scr{position:relative;block-size:100%;border-radius:35px;overflow:hidden;
  background:#0B141A;display:flex;flex-direction:column;isolation:isolate}
.phone-isl{position:absolute;inset-block-start:9px;inset-inline:0;margin-inline:auto;
  inline-size:82px;block-size:24px;border-radius:14px;background:#000;z-index:4}
.phone-bar{position:absolute;inset-block-end:7px;inset-inline:0;margin-inline:auto;
  inline-size:110px;block-size:5px;border-radius:3px;background:rgba(255,255,255,.55);z-index:4}
/* סרגל וואטסאפ */
.wa-top{display:flex;align-items:center;gap:10px;padding:42px 14px 10px;
  background:#1F2C34;color:#E9EDEF;flex:0 0 auto}
.wa-av{inline-size:32px;block-size:32px;border-radius:50%;flex:0 0 auto;
  background:#25D366;display:inline-flex;align-items:center;justify-content:center;color:#0B141A}
.wa-av .ico{inline-size:17px;block-size:17px;stroke-width:2}
.wa-top b{display:block;font-family:var(--font-b);font-weight:600;font-size:14px;line-height:1.2}
.wa-top em{display:block;font-style:normal;font-size:11px;color:#8696A0}
/* גוף השיחה */
.wa-body{flex:1 1 auto;overflow:hidden;padding:12px 10px 22px;
  display:flex;flex-direction:column;gap:7px;
  background:#0B141A url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23ffffff' fill-opacity='.022'%3E%3Ccircle cx='12' cy='14' r='2'/%3E%3Ccircle cx='44' cy='36' r='2'/%3E%3Ccircle cx='28' cy='52' r='1.5'/%3E%3C/g%3E%3C/svg%3E")}
.wa-b{max-inline-size:84%;padding:7px 10px 16px;position:relative;
  font-size:12.5px;line-height:1.45;border-radius:9px}
html.js-rv .wa-b{opacity:0;transform:translateY(9px);
  animation:waIn .45s var(--ease) forwards}
.wa-b .t{position:absolute;inset-block-end:4px;inset-inline-end:8px;
  font-size:9.5px;opacity:.62;direction:ltr;unicode-bidi:isolate}
.wa-b.in{align-self:flex-start;background:#202C33;color:#E9EDEF;border-start-start-radius:2px}
.wa-b.out{align-self:flex-end;background:#005C4B;color:#E9EDEF;border-start-end-radius:2px}
html.js-rv .wa-b:nth-child(1){animation-delay:.35s}
html.js-rv .wa-b:nth-child(2){animation-delay:1.25s}
html.js-rv .wa-b:nth-child(3){animation-delay:2.05s}
html.js-rv .wa-b:nth-child(4){animation-delay:2.95s}
html.js-rv .wa-b:nth-child(5){animation-delay:3.8s}
@keyframes waIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .wa-b{opacity:1;transform:none;animation:none}
}
html.a11y-noanim .wa-b{opacity:1!important;transform:none!important;animation:none!important}
@media(forced-colors:active){
  .phone{background:Canvas;border:1px solid CanvasText}
  .wa-b.in,.wa-b.out{border:1px solid CanvasText}
}

/* ⚠ ״האנימציה בין הכרטיסיות זזה לכיוון הלא נכון״. נקודת הפעימה על
   המחבר רצה משמאל לימין, בעוד שהעין בעברית קוראת מימין לשמאל.
   --dirx הופך את כיוון הנסיעה לפי dir המסמך. */
html[dir="rtl"] .conn{--dirx:-1}
html[dir="ltr"] .conn{--dirx:1}

/* ⚠ ״למה לא למרכז את הכרטיסיות הנפתחות״. הן נמתחו על כל רוחב העמוד
   בעוד שהכותרת מעליהן צרה, וזה נראה כמו שתי פריסות שונות. */
.objs{max-inline-size:80ch;margin-inline:auto}
.objs-sec .wrap>.lbl,.objs-sec .wrap>h2{max-inline-size:80ch;margin-inline:auto}

/* ⚠ ההדגמה: אייפון וכרטיס תוצאה זה לצד זה מ-700 פיקסל, והאייפון
   מקבל את הרוחב שהוא צריך בלי למתוח את הכרטיס. */
@media(min-width:700px){
  .track-b{grid-template-columns:320px 1fr;gap:26px;align-items:start}
}