/*rz-chrome rz-stamp:db7b297cf8*/:root{
  /* Bands (.top/.proof/.closer/.ft) sit on --space-0/1 so --ink stays pure
     "text + structure" and can never be confused with a surface again. */
  --space-0:#0A1128; --space-1:#0A1128;
  --paper:#FBFBFD; --white:#fff; --wash:#F4F6FC;
  --ink:#0A1128; --ink-2:#141C36;
  --royal:#1B45E0; --royal-d:#1235B8; --royal-lo:#EDF1FE;
  --ember:#E2670F; --ember-2:#B8500A; --ember-ink:#A8480A; --ember-lo:#FFF4EA;
  /* slate-2 was #646F8B: 5.01:1 on pure white, but every band surface is
     tinted 3-5% darker than white, which put it at 4.3-4.5 and made it
     flip between pass and fail as backdrops shifted by a few pixels.
     Darkened for headroom; still clearly the lighter of the two slates. */
  --slate:#4E5A73; --slate-2:#5A6480;
  --line:rgba(10,17,40,.09); --line-2:rgba(10,17,40,.16);
  --ok:#12A150; --bad:#E5484D;
  /* WhatsApp green is a BRAND colour, not ours: it is allowed on the
     floating action button and on glyphs, never as a second primary. */
  --wa:#25D366; --wa-ink:#053B18; --wa-deep:#0B6B36;
  /* --ok is for marks and strokes; white type needs the deep ramp (4.5+) */
  --ok-deep:#0E7A3D;
  --sans:"GSans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --r:14px; --r-l:20px; --r-xl:26px;
  --wrap:1200px;
  /* ---------- TYPE SCALE ----------
     Eight steps. Before this there were 20 ad-hoc pixel values, which is how
     a page ends up with 13px, 13.5px and 14px doing the same job in three
     places and none of them looking deliberate. */
  --fs-1:10.5px; --fs-2:11.5px; --fs-3:12.5px; --fs-4:14px;
  --fs-5:15.5px; --fs-6:17px;   --fs-7:21px;   --fs-8:25px;

  /* ---------- RADII ---------- */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;

  /* ---------- TRACKING ----------
     Tied to the size tier, not chosen per element. Hebrew has no ascender
     rhythm to protect, so display type takes a firmer negative than Latin. */
  /* 19px is not a scale step - it sits between --fs-6 17 and --fs-7 21, so
     the most important text on the page was the one size the system did not
     name, repeated as a literal in four places (one of them inside a
     max-width block, invisible to a desktop check). */
  --fs-cta:19px;

  --tr-display:-.045em;  /* clamped display sizes */
  --tr-head:-.03em;      /* h2, h3, card titles   */
  --tr-body:-.01em;      /* running text          */
  /* LTR LABELS ONLY - these require direction:ltr on the consumer.
     Tracked small caps is a Latin idiom: it works because uppercase has no
     ascenders or descenders to bind a word shape, so letting the letters
     breathe reads as a label. HEBREW HAS NO CASE, so there is nothing to
     track apart - the spacing just dismantles the word.
     Measured before this token existed: .ft h3 "מפתח" at 11.5px carried
     2.99px between every letter, widening a four-glyph word by about half.
     Tellingly, every --tr-label-w consumer that IS correct - .tier .tn,
     .logo .lat, .cmp thead .t-name - already sets direction:ltr. */
  --tr-label:.18em;      /* uppercase eyebrows, LTR only */
  --tr-label-w:.26em;    /* the widest label only, LTR only */
  /* Hebrew labels differentiate by weight, size and colour, which they
     already do. This is a hair of air, not tracking. */
  --tr-label-he:.03em;

  /* ---------- LEADING ---------- */
  --lh-flat:1;      /* single-line chips and buttons */
  --lh-tight:1.06;  /* display */
  --lh-snug:1.18;   /* headings */
  --lh-ui:1.45;     /* dense UI rows */
  --lh-body:1.6;    /* paragraphs */
  --lh-loose:1.72;  /* long-form answers */
  /* ---------- TEXT ON THE DARK BAND ----------
     Was six different white alphas; .42 and .45 both missed AA. */
  --on-d-1:rgba(255,255,255,.92);
  --on-d-2:rgba(255,255,255,.74);
  --on-d-3:rgba(255,255,255,.58);

  --ease:cubic-bezier(.2,.85,.24,1);
  --sh-s:0 1px 2px rgba(10,17,40,.05), 0 4px 12px -6px rgba(10,17,40,.13);
  --sh:0 2px 5px rgba(10,17,40,.05), 0 16px 34px -18px rgba(10,17,40,.22);
  --sh-l:0 4px 10px rgba(10,17,40,.06), 0 30px 62px -28px rgba(10,17,40,.32);
  --sh-xl:0 6px 16px rgba(10,17,40,.07), 0 50px 92px -40px rgba(10,17,40,.42);
  /* Accent glows. Same falloff as the neutral ramp so a coloured card sits at
     the same apparent height as a white one beside it. */
  --glow-ember:0 30px 62px -28px rgba(226,103,15,.52);
  --glow-royal:0 30px 62px -28px rgba(27,69,224,.52);
  --glow-wa:0 12px 26px -18px rgba(37,211,102,.45);
  --ring-royal:0 0 0 4px rgba(27,69,224,.13);
  --ring-bad:0 0 0 4px rgba(229,72,77,.11);
}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
/* Royal reaches only 2.65:1 against the dark bands, so the ring flips to white. */
.top :focus-visible,.closer :focus-visible,.ft :focus-visible{outline-color:#fff}
/* A royal ring offset 3px from a ROYAL fill is a ring the same colour as the
   thing it exists to distinguish - it only reads as a gap. Ink measures
   17.4:1 against the royal face. The dark-band buttons keep the white ring
   from the rule above, which still wins there by being more specific. */
.btn-e:focus-visible{outline-color:var(--ink)}
.care-panel .btn-e:focus-visible,.closer .btn-e:focus-visible{outline-color:#fff}
/* ...and back to ink inside .closer-doc, the WHITE card that lives inside the
   dark closer. The rule above would put a white ring on white paper - the same
   inversion the button FILL hit in this exact spot, so it is worth stating
   twice. Measured: ink on the card is 18.08:1, white on it would be ~1:1. */
.closer .closer-doc .btn-e:focus-visible{outline-color:var(--ink)}


/* text-wrap:pretty asks the line breaker to look at the whole paragraph
   instead of greedily filling each line, so it avoids orphans and very short
   last lines. It costs nothing where unsupported and it is the cheapest
   typographic upgrade available to running text. */
.sub,.head p,.who,.pr-txt p,.faq .ans p,.ft-tag,.closer p,.sty-txt p,.lede,.micro,.pr-foot,.dev-hero p{
  text-wrap:pretty;
}
.cmp tfoot .btn{width:100%}
.btn:active{transform:translateY(0) scale(.98)}
.skip{
  position:fixed;top:12px;inset-inline-start:12px;z-index:120;
  background:var(--ink);color:#fff;font-weight:800;font-size:var(--fs-4);
  padding:12px 20px;border-radius:var(--r-pill);box-shadow:var(--sh-l);
  transform:translateY(-260%);transition:transform .2s var(--ease);
}
.skip:focus{transform:none;outline:3px solid #fff;outline-offset:3px}
/* the nav underline persists on the section you are reading */
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
@media print{.top,.hdr-cta,.mbar,.comet,.skip,.dive-cue,.cap,.cd,
  .closer video,#speed,.cmp-bar{display:none!important}}
/* ============================================================ HEADER */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,251,253,.85);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.hdr.stuck{border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(10,17,40,.6)}
/* Read progress, driven by the document scroll with no JavaScript at all:
   animation-timeline:scroll(root) hands the animation a progress value instead
   of a clock, so it runs off the main thread and cannot fall behind the page.
   transform-origin is the RIGHT edge because the document is RTL. */
.hdr::after{
  content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;z-index:1;
  /* THE READ BAR RAN BACKWARDS. Gradient angles are physical, so 90deg put
   ember at the LEFT edge - and transform-origin:right center means an RTL
   reader sees the bar grow from the right. The sliver visible at 0% scroll
   was therefore the ember end: the bar started pure orange and only became
   royal at the bottom of the page. Solid royal says the same thing without
   a direction to get wrong, and survives the LTR /en/ build unchanged. */
  background:var(--royal);
  transform:scaleX(0);transform-origin:right center;
}
.hdr-in{display:flex;align-items:center;gap:14px;height:70px}
.hdr-cta{margin-inline-start:auto;display:flex;gap:9px;align-items:center}
.nav{display:flex;gap:26px;margin-inline-start:34px;font-size:var(--fs-4);font-weight:700}

.nav a{color:var(--slate);position:relative;padding:4px 0;transition:color .2s ease}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:var(--royal);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
/* BELOW 901px THIS USED TO BE `display:none` AND NOTHING REPLACED IT.
   No hamburger, no drawer, no anchor strip. .mbar only appears at 700px and
   carries two CTAs rather than links, so across the whole 701-900 tablet band
   (iPad Mini 744, iPad 768, iPad Air 820) AND every phone, #work, #packages,
   #process, /tools and /contact were unreachable from the top of a 13,215px
   page. Measured at 768: .nav display:none, 0 of 5 links visible, .mbar not
   rendered - the only routes above the fold were the logo, the giveaway, the
   WhatsApp button and the CTA.

   A horizontally scrollable strip keeps every link reachable without a drawer,
   which matters here because the panel is CSP-locked elsewhere and a JS drawer
   is one more thing to break. Notes on the details:
     · `to left` rather than 90deg, so the fade marks the scroll END in RTL
     · overscroll-behavior-x:contain, or the swipe bubbles up into the
       browser's back-navigation gesture
     · flex:none + nowrap, or the links compress instead of scrolling
     · padding-block gets each anchor to a 44px target while it is the only
       navigation on the page */
@media (max-width:900px){
  .nav{
    display:flex;margin-inline:0;gap:20px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 20px),transparent);
    mask-image:linear-gradient(to left,#000 calc(100% - 20px),transparent);
  }
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;flex:none;padding-block:11px}
}

/* ON A PHONE THE STRIP HAS NO ROOM TO BE A STRIP. Measured at 390: the row is
   logo 102 + nav 74 + giveaway 88 + WhatsApp 44 plus gaps, so the nav gets 74px
   and shows one and a half links. Reachable by scrolling, but nobody scrolls a
   74px window they cannot see the end of.

   So below 700 it takes its own full-width row. That is also the width where
   .mbar appears at the bottom carrying the CTA and WhatsApp, which is why the
   top row can afford to keep the giveaway: the things the header would
   otherwise be fighting for space with are already duplicated down there.

   [id] scroll-margin-top  MUST move with it. It is 88px globally against a
   70px header; with the nav on a second row the header is ~118px, and every
   in-page anchor would land underneath it. Measured after the change and set
   from the measurement, not guessed. */
@media (max-width:700px){
  .hdr-in{flex-wrap:wrap;height:auto;padding-block:8px;row-gap:2px}
.nav{flex-basis:100%;order:5;margin-inline:0;gap:22px}
}

/* ---------- logo: a real mark, not set type ---------- */
.logo{display:inline-flex;align-items:center;gap:11px;flex:none}
.logo .mark{width:42px;height:42px;flex:none;border-radius:var(--r-md);box-shadow:0 6px 16px -8px rgba(10,17,40,.5)}
.logo .stack{display:flex;flex-direction:column;justify-content:center;gap:3px}
.logo .he{font-size:var(--fs-8);font-weight:800;letter-spacing:var(--tr-head);line-height:var(--lh-flat);color:var(--ink)}
.logo .lat{font-size:var(--fs-1);font-weight:700;letter-spacing:var(--tr-label-w);color:var(--slate);direction:ltr;line-height:var(--lh-flat)}
/* ============================================================ BUTTONS */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border-radius:var(--r-pill);border:1px solid transparent;overflow:hidden;
  font-size:var(--fs-5);font-weight:800;letter-spacing:var(--tr-body);white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s ease,background .2s ease,border-color .2s ease;
}
.btn svg{width:18px;height:18px;flex:none;position:relative;z-index:1}
.btn > span,.btn{isolation:isolate}
/* THE PRIMARY ACTION IS ROYAL. The class is still called .btn-e because 21
   call sites use it and a rename buys nothing but risk.

   It was ember, and ember could not carry it. White on the brand ember
   #E2670F measures 3.40:1, under the 4.5:1 this 16px/800 label needs, so the
   gradient had been walked down into brown (#BE560B / #AE4E08 / #9C4406,
   4.64 / 5.39 / 6.48) to buy contrast. That is the whole problem in one
   declaration: the button was legible only once the brand colour had been
   muddied out of it.

   Royal is the accent by house rule and the owner has twice rejected an
   ember/brown CTA as a default-AI tell. It also just measures better - every
   stop here clears AA with room, and the worst of them (6.20:1) beats the
   best of the brown gradient's light end (4.64:1):

     #2450E8 6.20:1   #1B45E0 7.06:1   #1538B4 9.31:1

   So the CTA now carries a real brand colour at full strength instead of a
   compromised one, and ember is released to do what it is for - decoration,
   where 3.40:1 on a large ornament is fine and on a text label was not.

   The one-primary-colour rule that put everything on ember still holds. It is
   the same rule; only the colour changed. Nothing else on this page may use a
   filled royal button. */
.btn-e{background:linear-gradient(180deg,#2450E8,#1B45E0 55%,#1538B4);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 -2px 0 rgba(0,0,0,.20) inset,
             0 12px 28px -10px rgba(27,69,224,.62)}
.btn-e:hover{background:linear-gradient(180deg,#1B45E0,#0F2E9E);transform:translateY(-2px);
  box-shadow:var(--glow-royal), inset 0 1px 0 rgba(255,255,255,.28)}
/* THE SAME BUTTON ON A DARK BAND NEEDS A DIFFERENT ROYAL, AND THIS IS A
   CONTRAST BUG THE ROYAL SWITCH INTRODUCED.

   WCAG 1.4.11 asks a control to separate from its background by 3:1. On the
   light page the royal CTA is emphatic. On these two bands - .care-panel and
   .closer, both var(--ink)/var(--space-1) #0A1128 - it measures 2.65:1 and
   becomes a dark blue block on near-black. The ember it replaced was fine
   there by accident, being light.

   Same remedy as contact/social/tools already use for their dark heroes:
   royal moved up the ramp until it separates (5.41:1), with the INK label,
   because white fails on #5B82FF at 3.45:1 while ink reads 7.40/6.24/5.41.
   Scoped by the two dark containers rather than by a new class, so no markup
   changes and nothing for a re-patcher to revert. */
.care-panel .btn-e,.closer .btn-e{
  background:linear-gradient(180deg,#7BA0FF,#6C8FFF 55%,#5B82FF);color:var(--ink);
  box-shadow:0 12px 28px -10px rgba(91,130,255,.55), inset 0 1px 0 rgba(255,255,255,.30)}
.care-panel .btn-e:hover,.closer .btn-e:hover{
  background:linear-gradient(180deg,#8FB2FF,#7BA0FF);
  box-shadow:0 16px 34px -12px rgba(91,130,255,.65), inset 0 1px 0 rgba(255,255,255,.34)}
/* ...but .closer is dark and holds a WHITE document card, and its CTA lives
   inside that card. The rule above reached it and put a pale button on paper:
   2.48:1, which is the same 1.4.11 failure in the other direction. Measured,
   not guessed - the ground under it is rgb(255,253,248), not the section.
   Higher specificity than the dark rule, so it wins wherever it applies and
   order cannot break it. */
.closer .closer-doc .btn-e{
  background:linear-gradient(180deg,#2450E8,#1B45E0 55%,#1538B4);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset, 0 -2px 0 rgba(0,0,0,.20) inset,
             0 12px 28px -10px rgba(27,69,224,.62)}
.closer .closer-doc .btn-e:hover{
  background:linear-gradient(180deg,#1B45E0,#0F2E9E);
  box-shadow:var(--glow-royal), inset 0 1px 0 rgba(255,255,255,.28)}
/* specificity, not order: the footer sets white on everything inside it and
   was winning over this rule, giving 1.87:1 white-on-green */
.btn-wa,.ft .btn-wa{background:var(--wa);color:var(--wa-ink);box-shadow:var(--glow-wa)}
/* the closer already has one primary; a second full-green face beside it
   made the brightest object on the page a colour that is not ours */
.closer .btn-wa{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);box-shadow:none}
.closer .btn-wa:hover{background:rgba(255,255,255,.12);border-color:#fff}
.closer .btn-wa svg{fill:var(--wa)!important}
.btn-wa:hover{transform:translateY(-2px)}
.btn-o{background:var(--white);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-s)}
.btn-o:hover{border-color:rgba(10,17,40,.3);transform:translateY(-2px)}
/* LABELS WERE BEING CUT, NOT WRAPPED. .btn is overflow:hidden (the sheen
   ::after mask needs it - unclipping is the documented trap) plus
   white-space:nowrap with no fallback, so at 320px
   "קבלו את ההצעה חתומה" lost 6px off the RTL inline-end and
   "דברו איתנו בוואטסאפ" lost 11px, silently. Let the label wrap instead of
   removing the clip. Only the full-width and large buttons wrap: the small
   inline ones are short and wrapping them would ragged the rows. */
.btn-w,.btn-lg{white-space:normal;text-wrap:balance;line-height:1.25}
@media (max-width:400px){.btn-lg{padding-inline:18px}
.btn{gap:7px}}
.btn-sm{padding:11px 18px;font-size:var(--fs-4)}
.btn-w{width:100%}
.btn-lg{padding:18px 30px;font-size:var(--fs-6)}
/* Every primary label sits at 19px/800, above WCAG's 18.66px bold threshold,
   so the bar is 3:1 and the brand orange survives intact instead of being
   muddied down to a burnt brown that clears 4.5:1. */
.btn-e{font-size:var(--fs-cta)}
.btn-e.btn-sm{padding:12px 20px}
/* All three package CTAs share one size. Only the featured card is .btn-e, so
   sizing by colour alone left its button 5px taller than its neighbours. */
.tier .btn{font-size:var(--fs-cta)}
/* one slow sheen, on the money button only */
/* The sheen is an absolutely positioned ::after, so it paints ABOVE the
   label and used to sweep straight across the letters: white text on the
   lit ember measured 2.57:1 mid-sweep, under the 3.0 large-text floor,
   twice every five seconds. Masked to the rim now, so the light crosses
   the button's top and bottom edges and never its face. Same effect, and
   arguably a better one: light rakes an edge, it does not wash a surface. */
.btn-e::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);
  /* background-position is NEVER composited, and two of the nine .btn-e on
     this page never leave the viewport - the sticky-bar CTA and the giveaway
     pill - so this repainted a masked gradient on a fixed layer every frame,
     which is the worst case for scroll smoothness on exactly the phones this
     is sold to. A transform on a fixed-width highlight composites instead.
     Paused by default and started by the in-view observer, so the eight that
     are off-screen burn nothing. --sheen-dir keeps the rake travelling the
     same way it did rather than silently mirroring with the document. */
  inset-inline-start:-60%;width:60%;inset-block:0;inset-inline-end:auto;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.30) 50%,transparent 100%);
  will-change:transform;animation:sheen 5s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,#000,#000 20%,transparent 40%,transparent 60%,#000 80%,#000);
          mask-image:linear-gradient(180deg,#000,#000 20%,transparent 40%,transparent 60%,#000 80%,#000);
}
/* PAUSE ONLY WHAT HAS NOT ARRIVED YET, rather than pausing by default and
   relying on a class to start it. There is no .in-view class in this file -
   the reveal observer adds .in to .rv - so a default-paused sheen would have
   been a permanently dead sheen. Defaulting to running means the worst case
   is the behaviour we already had, now on the compositor. */
.rv:not(.in) .btn-e::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.btn-e::after{animation:none;opacity:0}}
@media (min-width:1001px){.hero > .wrap{flex:1;display:flex;flex-direction:column}}
/* the hero composes wider than the document column: full-width feel while
   the body copy keeps its measure */
.hero > .wrap{max-width:min(1560px,100%);padding-inline:clamp(22px,4vw,76px)}
@media (min-width:1100px){.lead-bar .btn-e{margin-top:0!important}
.lead-bar .btn-wa{padding-inline:16px}}
.po .lead-bar .btn-wa{
  position:absolute;top:calc(100% + 13px);inset-inline-start:22px;
  display:inline-flex;width:auto;margin:0;padding:0;border-radius:0;
  background:none;box-shadow:none;color:var(--ink);font-size:var(--fs-4);font-weight:800;
  gap:9px;
}
.po .lead-bar .btn-wa:hover{transform:none;color:var(--wa-deep)}
.po .lead-bar .btn-wa svg{width:19px;height:19px;fill:var(--wa)!important}
@media (max-width:900px){/* THE DESKTOP RULE STRIPPED THIS TO A FLOATING TEXT LINK and the mobile
     override restored POSITION ONLY, so width:auto, padding:0, background:none
     and border-radius:0 all leaked onto phones. Measured at 320px: the hero's
     only alternative to the form rendered 184x24 with no padding and a
     transparent background - a bare link where a button was intended, and
     .btn-w width:100%  was defeated by the width:auto it never got back.
     Everything the desktop rule stripped is restored here explicitly.
     Deliberately NOT a saturated green fill: the closer already documents that
     a full green face makes the brightest object on the screen a colour that
     is not ours. Outline, WhatsApp green icon, 44px target. */
  .po .lead-bar .btn-wa{
    position:static;margin-top:12px;width:100%;min-height:46px;
    padding:13px 20px;border-radius:var(--r-pill);
    background:var(--white);border:1px solid var(--line-2);
    box-shadow:var(--sh-s);color:var(--ink);
  }}
.care-panel .btn-e{flex:none}
/* absolutely on the boundary: a relative top offset guessed at the padding
   and left the chip floating 36px above the line. Direct section child, or
   the .bg-img child sweep makes .wrap the containing block. */
#packages p.dom-link{
  position:absolute;bottom:-23px;inset-inline:0;width:max-content;max-width:92%;
  margin-inline:auto;z-index:4;
}

.tier .btn{margin-top:14px}
.tier > .btn.btn-w{width:auto;align-self:stretch}
.tier > .tp,.tier > .who,.tier > .sep,.tier > ul,.tier > .tier-sign,.tier > .btn{
  margin-inline:clamp(24px,2vw,30px);
}
.tier .btn{height:52px;border-radius:var(--r-pill)}
.tier > .tp,.tier > .who,.tier > .sep,.tier > ul,.tier > .tier-sign,.tier > .btn{
  margin-inline:clamp(26px,2.4vw,36px);
}
.tier .btn{margin-top:18px}
/* both labels at one size, or the pair sits 3px out of true when stacked */
.closer-btns .btn{font-size:var(--fs-cta)}
.closer-doc .btn-wa{background:var(--wa);color:var(--wa-ink);border:0;box-shadow:var(--glow-wa)}
/* ============================================================ FOOTER */
/* same scroll-container trap as .closer: this one pinned .ft-end's lamp-off */
.ft{background:var(--space-0);color:#fff;padding-block:clamp(44px,6vh,68px) 0;position:relative;overflow:hidden;overflow:clip;
  view-timeline-name:--ft}
.ft::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 60% at 82% 0%, rgba(226,103,15,.14), transparent 62%),
             radial-gradient(40% 50% at 12% 100%, rgba(27,69,224,.16), transparent 64%);
}
.ft-in{position:relative;z-index:1}
.ft-top{display:grid;grid-template-columns:1.25fr .75fr .95fr;gap:clamp(24px,4vw,56px);padding-bottom:clamp(28px,4vh,44px)}

.ft-manifest{
  margin:10px 0 0;font-size:var(--fs-1);font-weight:800;letter-spacing:.12em;
  color:var(--on-d-3);text-transform:none;
}
.ft-live{
  margin-top:18px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:9px;
}
.ft-live-row{display:flex;align-items:center;gap:9px;font-size:var(--fs-2);font-weight:700;color:var(--on-d-2)}
.ft-live-row i{
  flex:none;width:8px;height:8px;border-radius:50%;background:#2B9E58;
  box-shadow:0 0 0 0 rgba(43,158,88,.4);
}
.ft-live-row i.sl{background:var(--ember)}
.ft-live-row b{color:#fff;font-weight:800}
.ft .logo b,.ft .he{color:#fff}
.ft .lat{color:var(--on-d-3)}
.ft-tag{margin:16px 0 0;font-size:var(--fs-4);line-height:var(--lh-loose);color:var(--on-d-2);max-width:34ch}
.ft h3{margin:0 0 16px;font-size:var(--fs-2);font-weight:800;letter-spacing:var(--tr-label-he);color:var(--on-d-3)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ft a{font-size:var(--fs-4);color:var(--on-d-1);transition:color .22s ease}
.ft a:hover{color:#fff}
.ft-c li{display:flex;align-items:center;gap:10px;font-size:var(--fs-4);color:var(--on-d-1)}
.ft-soc a{font-weight:800;color:var(--on-d-1);border-bottom:2px solid rgba(255,255,255,.25);transition:border-color .2s ease}
.ft-soc a:hover{border-color:#fff}
.ft-c svg{width:16px;height:16px;stroke:var(--ember);stroke-width:1.9;fill:none;flex:none;stroke-linecap:round;stroke-linejoin:round}
/* ---------- seam S7: the note left on the desk at closing ----------
   The last invitation is a sticky note straddling the closer/footer line,
   taped down like everything else on this desk. */
.ft-cta{
  position:relative;z-index:3;margin-top:-34px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border:0;border-radius:var(--r-md);
  padding:24px 26px 22px;background:#FFF3C9;color:var(--ink);
  rotate:-1.2deg;
  box-shadow:0 2px 6px rgba(5,10,28,.25), 0 22px 44px -18px rgba(5,10,28,.6);
}
.ft-tape{
  position:absolute;top:-11px;inset-inline-start:calc(50% - 48px);width:96px;height:24px;z-index:2;
  background:rgba(255,244,214,.85);border-radius:2px;rotate:2deg;pointer-events:none;
  clip-path:polygon(3% 0,97% 4%,100% 30%,98% 100%,4% 96%,0 60%,2% 30%);
  filter:drop-shadow(0 2px 3px rgba(10,17,40,.25));
}
.ft-cta b{display:block;font-size:var(--fs-6);font-weight:800;letter-spacing:var(--tr-body);color:var(--ink)}
.ft-cta span span{display:block;margin-top:4px;font-size:var(--fs-4);color:var(--slate)}
.ft-cta .ft-hours{margin-top:6px;font-size:var(--fs-3);font-weight:700;color:var(--slate);white-space:nowrap}
/* the footer index: the numbered document's table of contents */
/* THE FOOTER INDEX IS A REAL NAVIGATION AND WAS SIZED LIKE A LIST OF FOOTNOTES.
   Measured at 320: each anchor exactly 22px tall on a 33px pitch, so 11px of
   the gap is dead. 22px fails WCAG 2.5.8 (24px minimum) outright, and the
   spacing exception does not rescue it because the gap is smaller than the
   shortfall. It is still the only route to /panel, /privacy, /terms and
   /status on a phone even now the header nav is back.

   padding-block on the anchor takes the target to ~40px and the pitch to ~44
   with no extra markup. align-items moves from baseline to center so the
   dotted leader stays vertically centred against the taller row instead of
   riding up against the text baseline. */
.ft-ix li{display:flex;align-items:center;gap:0}
.ft-ix li a{display:block;padding-block:9px;min-height:24px}
.ft-ix li i{flex:1;border-bottom:1px dotted rgba(255,255,255,.22);margin-inline:10px;align-self:center;translate:0 0}
.ft-ix li b{
  font-size:12px;font-weight:800;color:#FFB374;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;flex:none;
}
.ft-ix li b svg{width:12px;height:12px;stroke:#FFB374;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ---------- THE MARK, IN THE ROUND ----------
   A real object, not a picture of one: two printed faces with a stack of
   slices between them so the mark has thickness, turning a full 360 on the
   footer's own timeline. No library, no model file, no extra request. */
.m3d{display:block;width:38px;height:38px;perspective:520px}
.m3d-in{
  position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transform:rotateY(0deg);
}
.m3d-in > i{position:absolute;inset:0;display:block}
.m3d-f{transform:translateZ(8px)}
.m3d-b{transform:translateZ(-8px) rotateY(180deg)}
.m3d-f svg,.m3d-b svg{width:100%;height:100%;display:block;border-radius:10px}
/* the rim: slices stacked through the depth so the edge reads as solid */
.m3d-e{
  transform:translateZ(var(--z));
  background:linear-gradient(150deg,#2A3454,#141C36 60%,#0C1226);
  border-radius:10px;
}
@media (prefers-reduced-motion:no-preference){/* the header mark turns on hover, the same object at pocket size */
  .hdr .logo:hover .m3d-in{transform:rotateY(360deg);transition:transform 1.1s cubic-bezier(.3,.7,.3,1)}}


/* the last frame: every seam tick on the page glowed; this one goes out */
.ft-end{
  display:block;width:34px;height:3px;border-radius:var(--r-pill);margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--ember),transparent);
  opacity:.35;
}
.ft-cta{animation:noteIn linear both;animation-timeline:--ft;animation-range:entry 5% entry 45%}
/* the closing strip: a letterpress signature line. The hairline is the
   brand's two inks meeting; the page ends the way the documents open. */
.ft-bot{
  position:relative;margin-top:clamp(24px,3.4vh,38px);border-top:0;
  padding-block:26px 24px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;font-size:var(--fs-2);color:var(--on-d-3);
  letter-spacing:.04em;
}
.ft-sig{
  position:absolute;top:0;inset-inline:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg, var(--ember) 0%, rgba(226,103,15,.35) 30%, rgba(27,69,224,.35) 70%, var(--royal) 100%);
}
.ft-up{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--on-d-2);
  transition:color .2s ease;
}
.ft-up i{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
  transition:border-color .2s ease,transform .25s var(--ease),background .2s ease;
}
.ft-up i svg{width:15px;height:15px}
.ft-up:hover{color:#fff}
.ft-up:hover i{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-3px)}
@media (max-width:700px){.ft-bot{flex-direction:column;gap:10px;text-align:center}}
/* the separators measured 2.06:1: .58 white knocked down another 40%.
   They are punctuation, so they stay quiet, but they stay legible. */
.ft-bot .dot-sep{margin-inline:8px}
@media (max-width:860px){.ft-top{grid-template-columns:1fr;gap:30px}}
/* ---------- CONVERSION LAYER ----------
   Everything here presents facts the page already states: the offer rides
   the sticky bar. (The exit-intent note was removed on review: one honest
   idea too many.) */
.mbar-main{flex-direction:column;gap:2px;padding-block:9px}
/* the offer line rides a darker strip: white on the raw ember orange
   measures 4.34 and fails AA for this size */
.mbar-sub{
  display:block;width:max-content;margin:3px auto 0;padding:1px 9px 2px;
  font-size:var(--fs-1);font-weight:700;letter-spacing:.02em;
  /* This was rgba(60,20,0,.36) - a BROWN scrim, composited over what is now
     a royal fill, resolving to a desaturated grey-navy pill inside a
     saturated blue button. It read as a rendering artefact. It existed
     because white on the raw ember measured 4.34 and failed AA; white on
     #1B45E0 is 7.06:1, so the strip buys nothing now. Kept as a neutral
     darken rather than deleted, so it still separates the caption from the
     label and survives any future retune of the gradient. */
  color:#fff;background:rgba(0,0,0,.20);border-radius:99px;
}
.mbar-sub b{font-weight:800;color:#fff}
/* ============================================================ MOBILE BAR */
.mbar{
  --mbar-h:96px;min-height:var(--mbar-h);
  position:fixed;inset-inline:0;bottom:0;z-index:80;display:none;gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(251,251,253,.94);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -22px rgba(10,17,40,.5);
  transition:transform .3s var(--ease);
}
.mbar{display:flex}
.closer-btns .btn{width:100%}
.logo .mark{width:38px;height:38px}
.nv .wrap,.nx .wrap,.nv-sheet .wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
/* ---------- header ---------- */
.hdr.nv{position:sticky;top:0;z-index:70;background:transparent !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.hdr.nv::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(250,251,253,0);border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.hdr.nv.stuck::before,.hdr.nv.mega-on::before{
  background:rgba(250,251,253,.88);border-bottom-color:rgba(10,17,40,.07);
  box-shadow:0 14px 34px -30px rgba(10,17,40,.4);
}
.hdr.nv.is-open::before{background:var(--nx-paper);border-bottom-color:rgba(10,17,40,.07)}
.hdr.nv::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;z-index:3;
  background:var(--ember);transform:scaleX(0);transform-origin:right center;
}
.nv .logo{gap:12px}
.nv .logo .mark.m3d{width:44px;height:44px;filter:drop-shadow(0 8px 16px rgba(10,17,40,.2))}
.nv .logo .stack{gap:5px}
.nv .logo .he{font-size:21px;color:var(--ink);letter-spacing:-.03em;line-height:1}
.nv .logo .vdot{color:var(--ember);display:inline-block}
@media (prefers-reduced-motion:no-preference){.nv .logo .vdot{animation:dotBreathe 3.4s ease-in-out infinite;transform-origin:center 72%}}
.nv .logo .lat{
  display:block;direction:rtl;letter-spacing:0;text-transform:none;
  font-size:12.5px;font-weight:700;line-height:1;color:var(--nx-ink-2);
  white-space:nowrap;max-width:none;overflow:visible;
}
.hdr.nv.is-open .nv-burger-lines i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.nv.is-open .nv-burger-lines i:nth-child(2){opacity:0}
.hdr.nv.is-open .nv-burger-lines i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.hdr-lock .mbar,body.hdr-lock .comet,body.hdr-lock #rvz-ambient{visibility:hidden}
.mp .wrap{max-width:1440px;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
.mp-console .btn-wa{width:100%;justify-content:center}
.sy .wrap,.sy-in{
  max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px);
  position:relative;z-index:2;width:100%;
}
.nv .logo .mark.m3d{transition:filter .25s cubic-bezier(.25,1,.5,1),transform .25s cubic-bezier(.25,1,.5,1)}
.nv .logo:hover .mark.m3d{filter:drop-shadow(0 10px 20px rgba(10,17,40,.28)) drop-shadow(0 0 18px rgba(242,118,27,.28));transform:translateY(-1px)}
.nv .logo .he{font-size:19px}
.nv .logo .lat{font-size:12px}