/* ===================================================================
   THE PUBLIC HOMEPAGE, in Northlight.

   Loaded by src/template.html and by nothing else, and scoped under
   body.home throughout. That scope is not decoration: bekefit.css is read
   by 404, by the legal pages AND by the client app and the console, so a
   homepage rule written there restyles all of them. It did, quietly, until
   the app's own visual baselines moved.

   So bekefit.css keeps the shared base at the values it has always had, the
   old homepage's rules are deleted from it, and everything the redesign
   invents lives here.

   Colour grammar, enforced by review:
     GOLD  the present moment, and the headline underline, which is the one
           documented brand exception. Never a button.
     MINT  completed, achieved.
     BLUE  every call to action.
     NAVY  structure and depth.
   =================================================================== */

/* ---------------------------------------------------------- header */.home .hdr{position:fixed;inset-inline:0;top:0;z-index:var(--bf-z-toast);transition:background var(--bf-dur-2) var(--bf-ease-out),border-color var(--bf-dur-2) var(--bf-ease-out)}
.home .hdr.stuck{background:rgba(7,12,22,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--bf-edge-deep)}
.home .hdrbar{display:flex;align-items:center;gap:12px;height:72px}
.home .nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.home .logo{min-height:var(--bf-tap);min-width:var(--bf-tap)}
.home .nav a{display:inline-flex;align-items:center;min-height:var(--bf-tap);min-width:var(--bf-tap);padding:8px 12px;border-radius:var(--bf-r-full);font-size:14px;font-weight:var(--bf-w-semi);color:var(--bf-on-deep-2)}
.home .nav a:hover{background:var(--bf-navy-700);color:#fff}
.home .tools{display:flex;align-items:center;gap:9px}
.home .lang{position:relative}
/* The language button is a tap target, not a chrome decoration: it stays at
   the 44px minimum on a phone, where it is the only way to change language
   before the menu is open. */.home .langbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--bf-tap);padding:8px 12px;border-radius:var(--bf-r-full);border:1px solid var(--bf-edge-deep);background:rgba(255,255,255,.04);color:var(--bf-on-deep-1);font-size:13px;font-weight:700;cursor:pointer}
.home .langbtn:hover{border-color:var(--bf-blue-300)}
.home .langbtn .globe{width:16px;height:16px}
.home .langbtn .chev{width:14px;height:14px;transition:transform var(--bf-dur-2) var(--bf-ease-out)}
.home .langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.home .langmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:170px;display:none;flex-direction:column;padding:6px;border-radius:var(--bf-r-card);background:var(--bf-navy-800);border:1px solid var(--bf-edge-deep);box-shadow:var(--bf-e3)}
.home .langmenu[data-open="true"]{display:flex}
.home .langmenu a{min-height:var(--bf-tap);padding:10px 12px;border-radius:var(--bf-r-ctl);font-size:14px;color:var(--bf-on-deep-1)}
.home .langmenu a:hover{background:var(--bf-navy-700)}
.home .langmenu a[aria-current="true"]{color:var(--bf-blue-300);font-weight:700}
.home .langmenu a[aria-current="true"]::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bf-blue-300);margin-inline-start:8px;vertical-align:middle}
.home .cur[hidden]{display:none}
.home .curbtn{gap:5px;padding-inline:11px}
.home .curbtn .cursym{font-weight:800;min-width:.7em;text-align:center}
.home .curmenu{min-width:220px}
.home .curmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--bf-tap);padding:10px 12px;border:0;border-radius:var(--bf-r-ctl);background:transparent;color:var(--bf-on-deep-1);font:inherit;font-size:14px;text-align:start;cursor:pointer}
.home .curmenu button[hidden]{display:none}
.home .curmenu button:hover,.home .curmenu button:focus-visible,.home .langmenu a:focus-visible{background:var(--bf-navy-700);outline:2px solid var(--bf-blue-300);outline-offset:-2px}
.home .curmenu .cursym{width:1.2em;font-weight:800;text-align:center}
.home .curmenu .curcode{font-weight:700;min-width:2.6em}
.home .curmenu .curname{color:var(--bf-on-deep-2);font-size:13px}
.home .curmenu button[aria-checked="true"]{color:var(--bf-blue-300)}
.home .curmenu button[aria-checked="true"] .curcode::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--bf-blue-300);margin-inline-start:7px;vertical-align:middle}
/* A phone has room for the two selectors only if each is its symbol and
   its code, nothing else: the globe goes, the gap tightens. */
@media (max-width:480px){
.home .tools{gap:6px}
.home .langbtn{padding:8px 9px;gap:4px}
.home .langbtn .globe{display:none}
.home .langbtn .chev{width:12px;height:12px}
.home .curmenu,.home .langmenu{max-width:calc(100vw - 24px)}
}
.home .burger{display:none;width:var(--bf-tap);height:var(--bf-tap);border:1px solid var(--bf-edge-deep);border-radius:var(--bf-r-ctl);background:rgba(255,255,255,.04);cursor:pointer;position:relative}
.home .burger i{position:absolute;inset-inline:11px;top:calc(50% - 1px);height:2px;background:#fff;border-radius:2px;transition:background var(--bf-dur-1)}
.home .burger i::before,.home .burger i::after{content:"";position:absolute;inset-inline:0;height:2px;background:#fff;border-radius:2px;transition:transform var(--bf-dur-2) var(--bf-ease-out)}
.home .burger i::before{top:-7px}
.home .burger i::after{top:7px}
.home .burger[aria-expanded="true"] i{background:transparent}
.home .burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.home .burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:999px){
.home .nav{display:none;position:absolute;inset-inline:12px;top:70px;flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:var(--bf-r-panel);background:var(--bf-navy-800);border:1px solid var(--bf-edge-deep);box-shadow:var(--bf-e3)}
.home .nav[data-open="true"]{display:flex}
.home .nav a{padding:13px 14px;font-size:15px;min-height:var(--bf-tap);display:flex;align-items:center}
.home .nav .navcta{margin-top:6px}
.home .nav .navcta .btn{width:100%}
.home .burger{display:block}
.home .hdr .desk-cta{display:none}
}
@media (min-width:1000px){
.home .nav .navcta{display:none}
}
/* ---------------------------------------------------------- hero */.home .hero{
  position:relative;overflow:hidden;
  background:var(--bf-grad-deep);
  color:var(--bf-on-deep-1);
  padding-block:126px 76px;
}
.home .hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--bf-edge-deep-soft) 1px,transparent 1px),linear-gradient(90deg,var(--bf-edge-deep-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 75%);
}
.home .hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media (max-width:1040px){
.home .hero{padding-block:104px 56px}
.home .hero .wrap{grid-template-columns:1fr;gap:40px}
}
.home .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--bf-r-full);border:1px solid var(--bf-edge-deep);background:rgba(255,255,255,.05);font-size:var(--bf-t-xs);font-weight:var(--bf-w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--bf-on-deep-2)}
html[lang="he"] .home .eyebrow{letter-spacing:.02em}
.home .eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--bf-done);flex:none}
.home h1{
  margin-top:20px;
  font-family:var(--bf-font-display);font-weight:var(--bf-w-bold);
  font-size:clamp(38px,5.6vw,68px);line-height:1.02;letter-spacing:var(--bf-ls-display);
  color:#fff;
}
html[lang="he"] .home h1{font-family:"Heebo",system-ui,sans-serif;font-weight:800;line-height:1.14;letter-spacing:-.02em}
.home h1 .l1{display:block;color:var(--bf-on-deep-2)}
.home h1 .l2{display:block;position:relative}
.home h1 .l2 .u{position:relative;display:inline-block}
/* The one documented gold exception: a brand underline, marketing only. */.home h1 .l2 .u svg{position:absolute;inset-inline:0;bottom:-.14em;width:100%;height:.16em;color:var(--bf-now);overflow:visible}
.home h1 .l2 .u svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--bf-ease-entrance) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
.home h1 .l2 .u svg path{animation:none;stroke-dashoffset:0}
}
.home .hero-sub{margin-top:22px;max-width:56ch;color:var(--bf-on-deep-2);font-size:clamp(15px,1.5vw,18px)}
.home .hero-notes{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.home .hero-notes span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--bf-on-deep-2)}
.home .hero-notes svg{width:15px;height:15px;color:var(--bf-done);flex:none}
/* ------------------------------------------------ product example cards
   These are pictures of the product, drawn with the product's own tokens
   rather than screenshotted. Every one of them sits inside a figure whose
   caption says the figures are illustrative: nothing here is a real
   client, and nothing here claims an outcome. */.home .exhibit{margin:0;position:relative}
.home .exhibit figcaption{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:var(--bf-t-xs);color:var(--mk-fg-3);line-height:1.45;
}
.home .band-ink .exhibit figcaption,.home .band-ink-2 .exhibit figcaption,.home .hero .exhibit figcaption{color:var(--bf-on-deep-3)}
.home .extag{
  flex:none;display:inline-block;padding:3px 8px;border-radius:var(--bf-r-chip);
  border:1px solid var(--mk-edge);background:var(--mk-card-2);
  font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--mk-fg-3);
}
.home .band-ink .extag,.home .band-ink-2 .extag,.home .hero .extag{border-color:var(--bf-edge-deep);background:rgba(255,255,255,.05);color:var(--bf-on-deep-2)}
.home .pcard{
  background:var(--mk-card);color:var(--mk-fg-1);
  border:1px solid var(--mk-edge);border-radius:var(--bf-r-panel);
  box-shadow:var(--bf-e3);overflow:hidden;
}
.home .pcard .ph{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--mk-card-3);background:var(--mk-card-2)}
.home .pcard .ph .brandchip{width:22px;height:22px;border-radius:8px;background:var(--bf-grad-blue);display:block;flex:none}
.home .pcard .ph b{font-size:13px;letter-spacing:-.01em}
.home .pcard .ph .rt{margin-inline-start:auto}
.home .pcard .pb{padding:16px}
.home .lchip{display:inline-block;padding:4px 9px;border-radius:var(--bf-r-full);font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);background:var(--mk-card-3);color:var(--mk-fg-2)}
.home .plab{font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--mk-fg-3)}
.home .plab.now{color:var(--bf-now-ink)}
.home .pbig{font-size:15px;font-weight:var(--bf-w-black);letter-spacing:-.03em;margin-top:8px;line-height:1.32}
/* The hero pairs the roadmap with a small Today card overlapping it. Below
   1040px they stack, because an overlap at 390px is just a collision. *//* The float is anchored to the card, not to the figure, so its overhang
   never lands on the caption underneath, and the stack reserves that
   overhang below itself. */.home .proof-stack{position:relative;margin-bottom:34px}
.home .proof .float{position:absolute;inset-inline-end:-18px;bottom:-26px;width:212px}
@media (max-width:1040px){
.home .proof-stack{margin-bottom:0}
.home .proof .float{position:static;width:auto;max-width:320px;margin-top:16px}
}
/* ---- the journey: the one thing a workout app cannot draw ---- */.home .mj{position:relative;padding-block:26px 4px}
.home .mjrail{position:absolute;inset-inline:16px;top:34px;height:3px;border-radius:3px;background:var(--mk-line-2);overflow:hidden}
/* Layout mirrors, time does not. The phases read in their own direction, and
   the rail fills from the EARLIER end, which is the left in English and the
   right in Hebrew. A block child sits at its container's inline start, so
   that happens on its own: there is no RTL override here, and adding one
   would put the fill at the wrong end of the journey. */.home .mjrail i{display:block;height:100%;width:42%;border-radius:3px;background:var(--bf-grad-route)}
.home .mjn{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.home .mn{text-align:center;position:relative}
.home .mn .dot{width:15px;height:15px;border-radius:50%;margin:0 auto 12px;background:var(--bf-done);border:3px solid var(--mk-card);box-shadow:0 0 0 1px var(--bf-done)}
.home .mn .nm{font-size:12px;font-weight:var(--bf-w-bold);letter-spacing:-.01em}
.home .mn .dt{font-size:10.5px;color:var(--mk-fg-3);margin-top:3px}
.home .mn.todo .dot{background:var(--mk-card);box-shadow:0 0 0 1px var(--bf-planned-light)}
.home .mn.todo .nm{color:var(--mk-fg-3)}
/* GOLD: the present moment. One per view. */.home .mn.here .dot{background:var(--bf-now);box-shadow:var(--bf-glow-now)}
.home .mn.here .nm{color:var(--bf-now-ink)}
.home .youare{
  display:inline-block;margin-top:7px;padding:3px 9px;border-radius:var(--bf-r-full);
  background:var(--bf-now);color:var(--bf-navy-900);
  font-size:10px;font-weight:var(--bf-w-black);letter-spacing:.04em;white-space:nowrap;
}
@media (max-width:520px){
.home .mn .nm{font-size:11px}
.home .mn .dt{font-size:9.5px}
.home .youare{font-size:9px;padding:2px 7px}
}
.home .pnext{display:flex;gap:9px;align-items:flex-start;margin-top:18px;padding-top:13px;border-top:1px solid var(--mk-card-3);font-size:11.5px;color:var(--mk-fg-2)}
.home .pnext svg{width:15px;height:15px;color:var(--bf-now-ink);flex:none;margin-top:1px}
.home .pnext b{color:var(--mk-fg-1)}
/* ---- two small panels: this week (gold) and next milestone (quiet) ---- */.home .twopanel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
@media (max-width:520px){
.home .twopanel{grid-template-columns:1fr}
}
.home .tp{border:1px solid var(--mk-edge);border-radius:var(--bf-r-card);padding:12px}
.home .tp.now{border-color:rgba(255,201,40,.5);background:linear-gradient(180deg,var(--bf-now-bg),var(--mk-card))}
.home .tp .v{font-size:12.5px;font-weight:var(--bf-w-black);margin-top:7px;line-height:1.35}
/* ---------------------------------------------------- section layout */.home .split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin-top:44px}
.home .split.rev>*:first-child{order:2}
@media (max-width:900px){
.home .split{grid-template-columns:1fr;gap:32px}
.home .split.rev>*:first-child{order:0}
}
.home .pointlist{display:grid;gap:22px}
.home .pt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.home .pt>svg{width:20px;height:20px;color:var(--mk-link);margin-top:3px}
.home .band-ink .pt>svg,.home .band-ink-2 .pt>svg{color:var(--bf-blue-300)}
.home .pt b{display:block;font-size:15px;letter-spacing:-.01em;margin-bottom:5px}
.home .pt p{font-size:14px;color:var(--mk-fg-2);line-height:1.55}
.home .band-ink .pt p,.home .band-ink-2 .pt p{color:var(--bf-on-deep-2)}
.home .lcard{background:var(--mk-card);border:1px solid var(--mk-edge);border-radius:var(--bf-r-panel);padding:18px;color:var(--mk-fg-1)}
.home .lcard.lift{box-shadow:var(--bf-e3-light)}
.home .ltitle{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:var(--bf-w-bold);letter-spacing:-.01em;color:var(--mk-fg-2)}
.home .ltitle svg{width:15px;height:15px;color:var(--mk-link)}
.home .ltitle .rt{margin-inline-start:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-fg-3)}
/* ---------------------------------------------------- today example */.home .today-card{max-width:400px;padding:0;overflow:hidden}
.home .today-head{padding:16px 16px 4px}
.home .today-greet{font-family:var(--bf-font-display);font-weight:var(--bf-w-bold);font-size:24px;letter-spacing:-.04em;margin-top:9px}
html[lang="he"] .home .today-greet{font-family:"Heebo",system-ui,sans-serif;font-weight:800;letter-spacing:-.015em}
.home .today-week{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:var(--bf-r-ctl);background:linear-gradient(90deg,var(--bf-now-bg),var(--mk-card));border:1px solid rgba(255,201,40,.45);font-size:11.5px;color:var(--mk-fg-2);line-height:1.45}
.home .today-week svg{width:15px;height:15px;color:var(--bf-now-ink);flex:none;margin-top:1px}
.home .today-week b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;color:var(--bf-now-ink)}
.home .today-body{padding:14px 16px 18px;display:grid;gap:11px}
.home .sesscard{border:1px solid rgba(255,201,40,.55);border-radius:var(--bf-r-panel);overflow:hidden;background:var(--mk-card);box-shadow:var(--bf-e2-light)}
.home .sesscard .top{padding:14px;background:linear-gradient(170deg,var(--bf-now-bg),var(--mk-card));border-bottom:1px solid var(--mk-card-3)}
.home .sesscard .t{font-size:18px;font-weight:var(--bf-w-black);letter-spacing:-.035em;margin-top:9px}
.home .sesscard .d{font-size:12px;color:var(--mk-fg-2);margin-top:7px;line-height:1.45}
.home .sesscard .act{padding:13px 14px}
.home .habitrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.home .habitrow .ic{width:32px;height:32px;border-radius:11px;background:var(--mk-card-3);display:grid;place-items:center}
.home .habitrow .ic svg{width:15px;height:15px;color:var(--mk-fg-2)}
.home .habitrow b{font-size:12.5px}
.home .habitrow .sub{font-size:10.5px;color:var(--mk-fg-2);margin-top:2px}
.home .habitrow .box{width:34px;height:34px;border-radius:12px;border:1.5px solid var(--mk-edge);display:grid;place-items:center}
.home .habitrow .box svg{width:15px;height:15px;color:var(--mk-fg-3)}
/* ---------------------------------------------------- progress example */.home .thennow{display:grid;margin-top:8px}
.home .tnrow{display:flex;gap:12px;align-items:center;padding-block:11px;border-bottom:1px solid var(--mk-card-3)}
.home .tnrow:last-child{border-bottom:0}
.home .tnrow .k{font-size:12.5px;font-weight:var(--bf-w-bold);flex:1}
/* An axis of time: "then" stays on the earlier side in every language, so
   the CONTAINER is LTR. Each label inside it is still prose and follows its
   own script -- otherwise "42.5 ק״ג" comes out with the unit on the wrong
   side of the number. */
.home .tnv{display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums;direction:ltr}
.home .tnv > span{unicode-bidi:plaintext}
.home .tnv .a{font-size:12.5px;font-weight:var(--bf-w-bold);color:var(--mk-fg-3)}
.home .tnv .arrow{color:var(--mk-fg-3)}
.home .tnv .b{font-size:16px;font-weight:var(--bf-w-black);letter-spacing:-.03em}
.home .weeks{display:flex;gap:5px;align-items:flex-end;margin-top:14px;direction:ltr}
.home .weeks .wk{flex:1;display:flex;flex-direction:column-reverse;gap:3px}
.home .weeks i{height:11px;border-radius:3px;display:block;background:var(--mk-line-2)}
.home .weeks i.done{background:var(--bf-done)}
.home .weeks i.now{background:var(--bf-now)}
.home .wknote{font-size:11.5px;color:var(--mk-fg-2);margin-top:12px;line-height:1.5}
/* ------------------------------------------- target against actual
   The price-justification section. The bar is what happened, the notch is
   what was planned. Neither ever turns red: a hard week is information,
   not a failure, and the decisions underneath are the product. */.home .tva{display:grid;gap:14px}
.home .tvarow{display:grid;grid-template-columns:minmax(120px,1fr) minmax(90px,2fr) auto;gap:12px;align-items:center}
.home .tvarow .lbl{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.home .tvarow .lbl svg{width:16px;height:16px;color:var(--bf-blue-300);flex:none}
.home .tvarow .lbl b{font-weight:var(--bf-w-bold);overflow-wrap:anywhere}
.home .tvtrack{position:relative;height:10px;border-radius:var(--bf-r-full);background:rgba(159,176,204,.2);overflow:visible}
.home .tvfill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--bf-r-full);background:var(--bf-blue-600)}
.home .tvfill.over{background:var(--bf-done)}
.home .tvtarget{position:absolute;top:-4px;width:2px;height:18px;border-radius:2px;background:var(--bf-on-deep-1)}
/* "2 of 3" is a sentence, not an axis. Forcing it LTR re-bases the bidi
   algorithm on Hebrew prose, and "2 מתוך 3" then reads as "3 out of 2".
   plaintext lets the run follow its own first strong character, which is
   right in all three languages. */
.home .tvnum{font-size:15px;font-weight:var(--bf-w-black);letter-spacing:-.02em;white-space:nowrap;unicode-bidi:plaintext}
.home .tvnum small{font-size:11px;font-weight:var(--bf-w-semi);color:var(--bf-on-deep-2)}
.home .tvkey{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:11.5px;color:var(--bf-on-deep-2)}
.home .tvkey span{display:inline-flex;align-items:center;gap:7px}
.home .tvkey i{width:14px;height:8px;border-radius:3px;background:var(--bf-blue-600);display:block}
.home .tvkey i.t{width:2px;height:14px;border-radius:2px;background:var(--bf-on-deep-1)}
@media (max-width:560px){
.home .tvarow{grid-template-columns:1fr auto;row-gap:8px}
.home .tvarow .tvtrack{grid-column:1/-1;order:3}
}
.home .decisions{display:grid;gap:9px;margin-top:26px}
.home .dec{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:12px 14px;border-radius:var(--bf-r-card);border:1px solid var(--bf-edge-deep);background:rgba(255,255,255,.04);font-size:13px}
.home .dec svg{width:16px;height:16px;color:var(--bf-on-deep-2)}
.home .dec b{font-weight:var(--bf-w-semi)}
.home .dec .tick{color:var(--bf-done);font-weight:var(--bf-w-black)}
.home .deckey{font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--bf-on-deep-3);margin-bottom:10px}
.home .coachsays{border:1px solid rgba(45,104,250,.34);background:rgba(45,104,250,.1);border-radius:var(--bf-r-card);padding:15px;margin-top:26px;display:flex;gap:12px;align-items:flex-start}
.home .coachsays .av{width:30px;height:30px;border-radius:11px;background:var(--bf-grad-blue);color:#fff;display:grid;place-items:center;font-weight:var(--bf-w-black);font-size:12px;flex:none}
.home .coachsays .k{font-size:9.5px;font-weight:var(--bf-w-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--bf-blue-300);margin-bottom:6px}
.home .coachsays p{font-size:13px;line-height:1.55;color:var(--bf-on-deep-1)}
/* ---------------------------------------------------------- coach
   Two columns without a photograph: his own sentence on one side, the
   argument on the other, and the facts full width underneath. When there is
   a real photograph of David it takes the left column and the quote moves
   across. */
.home .coachgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;margin-top:44px;align-items:start}
.home .coachfacts{grid-column:1/-1}
@media (max-width:900px){
.home .coachgrid{grid-template-columns:1fr;gap:28px}
}
.home .coachquote{
  margin:0;
  font-family:var(--bf-font-display);font-weight:var(--bf-w-bold);
  font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-.03em;color:#fff;max-width:26ch;
}
html[lang="he"] .home .coachquote{font-family:"Heebo",system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.45}
.home .coachbody{font-size:14px;color:var(--bf-on-deep-2);margin-top:20px;line-height:1.6;max-width:52ch}
.home .coachfacts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:18px 48px;margin-top:36px;padding-top:24px;border-top:1px solid var(--bf-edge-deep)}
@media (max-width:760px){
.home .coachfacts{grid-template-columns:repeat(2,1fr);gap:20px 24px}
}
.home .coachfacts div{font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--bf-on-deep-3)}
.home .coachfacts b{display:block;margin-top:8px;font-size:20px;font-weight:var(--bf-w-black);letter-spacing:-.03em;text-transform:none;color:#fff}
.home .coachfacts b.sm{font-size:20px}
/* No bidi isolation on the languages fact: .coachfacts b is display:block,
   which already establishes its own paragraph, and each locale's value
   begins with a strong character of that locale's own direction. Measured
   per glyph in all three -- the order is the same with isolation, without
   it, and inline. The rule that used to be here did nothing, and its
   comment described a reordering that cannot happen. */
/* ---------------------------------------------------------- how it works
   A journey, not a grid of six cards: one rail, six stations, the fifth
   (the week that repeats) the only one that is raised. The rail runs down
   the number column; each number sits on it as a station. */
.home .path{position:relative;display:grid;gap:0;max-width:760px;margin-top:44px;padding:0;list-style:none}
.home .step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:20px;padding-block:0 30px}
.home .step:last-child{padding-bottom:0}
/* The rail is drawn per station, from under this number to the next one,
   so it starts at step one and stops at step six. */
.home .step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:19px;top:40px;bottom:0;width:2px;background:var(--mk-edge)}
.home .step .num{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mk-card);border:1.5px solid var(--mk-edge);color:var(--mk-fg-2);font-weight:var(--bf-w-black);font-size:14px;font-variant-numeric:tabular-nums}
.home .step h3{font-size:17px;letter-spacing:-.02em;margin-top:8px}
.home .step p{font-size:14.5px;color:var(--mk-fg-2);margin-top:6px;line-height:1.6;max-width:60ch}
.home .step .who{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:var(--bf-r-full);background:var(--mk-card-3);font-size:10.5px;font-weight:var(--bf-w-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--mk-fg-2)}
html[lang="he"] .home .step .who{letter-spacing:.02em;font-size:11.5px}
/* Step five is the week that repeats, and the reason the service is not a
   programme download. It is the only step that carries emphasis. */
.home .step.key .num{background:var(--bf-blue-600);border-color:var(--bf-blue-600);color:#fff;box-shadow:0 0 0 6px var(--mk-accent-bg)}
.home .step.key .who{background:var(--mk-accent-bg);color:var(--mk-accent-fg)}
/* ---------------------------------------------------------- who it is for */.home .forgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media (max-width:980px){
.home .forgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.home .forgrid{grid-template-columns:1fr}
}
.home .forcard{padding:22px;border-radius:var(--bf-r-panel);background:var(--mk-card);border:1px solid var(--mk-edge)}
.home .forcard .q{font-size:15px;font-weight:var(--bf-w-bold);letter-spacing:-.015em;line-height:1.4}
.home .forcard p{font-size:13.5px;color:var(--mk-fg-2);margin-top:11px;line-height:1.6}
/* ---------------------------------------------------------- what you get */.home .getgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media (max-width:1040px){
.home .getgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.home .getgrid{grid-template-columns:1fr}
}
.home .get{padding:20px;border-radius:var(--bf-r-panel);border:1px solid var(--bf-edge-deep);background:rgba(255,255,255,.03)}
.home .get .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(45,104,250,.16);margin-bottom:14px}
.home .get .ic svg{width:18px;height:18px;color:var(--bf-blue-300)}
.home .get b{display:block;font-size:14.5px;letter-spacing:-.015em}
.home .get p{font-size:13px;color:var(--bf-on-deep-2);margin-top:8px;line-height:1.55}
/* ---------------------------------------------------------- pricing
   One price per card, large, in the display currency. Under it, one line:
   the offer label, the regular price struck through, and what that saves.
   Nothing counts down and nothing says how many are left. */.home .offerrow{display:flex;gap:10px 14px;align-items:center;margin-top:28px;flex-wrap:wrap}
.home .offertag,.home .foundtag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:var(--bf-r-full);border:1px solid rgba(255,201,40,.55);background:var(--bf-now-bg);font-size:12px;font-weight:var(--bf-w-bold);color:var(--bf-now-ink)}
.home .offertag svg,.home .foundtag svg{width:13px;height:13px}
.home .offerrow .note{font-size:13px;color:var(--mk-fg-2)}
.home .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;align-items:stretch}
@media (max-width:980px){
.home .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:22px}
}
.home .plan{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px 26px 24px;border-radius:var(--bf-r-hero);border:1px solid var(--mk-edge);background:var(--mk-card);transition:border-color var(--bf-dur-2) var(--bf-ease-out),transform var(--bf-dur-2) var(--bf-ease-out)}
.home .plan:hover{border-color:var(--bf-blue-300)}
.home .plan.best{border:1.5px solid var(--bf-blue-600);box-shadow:var(--bf-e3-light);background:linear-gradient(180deg,var(--mk-accent-bg),var(--mk-card) 46%)}
@media (min-width:981px){.home .plan.best{transform:translateY(-6px)}}
.home .plan .flag{position:absolute;top:-12px;inset-inline-start:24px;padding:5px 12px;border-radius:var(--bf-r-full);background:var(--bf-blue-600);color:#fff;font-size:11px;font-weight:var(--bf-w-bold);letter-spacing:.01em}
.home .plan h3{font-size:20px;letter-spacing:-.02em}
.home .plan .native{font-size:12px;color:var(--mk-fg-3);margin-top:3px}
.home .plan .for{font-size:13.5px;color:var(--mk-fg-2);margin-top:9px;line-height:1.5;min-height:3em}
.home .pricebox{padding:18px 0 4px;border-top:1px solid var(--mk-line-2)}
.home .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.home .price .num{unicode-bidi:isolate;direction:ltr;font-family:var(--bf-font-display);font-weight:var(--bf-w-bold);font-size:46px;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--mk-fg-1)}
html[lang="he"] .home .price .num{font-family:"Heebo",system-ui,sans-serif;font-weight:800}
.home .price .per{font-size:14px;font-weight:var(--bf-w-semi);color:var(--mk-fg-2);unicode-bidi:plaintext}
.home .was{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:12px;font-size:12.5px;color:var(--mk-fg-2)}
.home .was[hidden]{display:none}
.home .was .dot{color:var(--mk-fg-3)}
.home .was .norm{unicode-bidi:plaintext}
.home .was s,.home .was em{font-style:normal;text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--mk-fg-3);unicode-bidi:isolate;direction:ltr}
.home .offerchip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--bf-r-full);background:var(--bf-now-bg);border:1px solid rgba(255,201,40,.5);color:var(--bf-now-ink);font-size:11.5px;font-weight:var(--bf-w-bold)}
.home .savechip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--bf-r-full);background:var(--bf-done-bg);color:var(--bf-done-ink);font-size:11.5px;font-weight:var(--bf-w-bold)}
.home .savechip[hidden]{display:none}
.home .money{unicode-bidi:isolate;direction:ltr}
html[data-money-pending] [data-money]{visibility:hidden}
.home .plan ul{display:grid;gap:10px}
.home .plan li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.5;color:var(--mk-fg-1)}
.home .plan li svg{width:16px;height:16px;color:var(--bf-done);margin-top:3px}
.home .plan .cta{margin-top:auto;padding-top:4px}
.home .plan .cta .btn{min-height:48px;font-size:15px}
.home .plan .foot{font-size:11.5px;color:var(--mk-fg-3);line-height:1.5;text-align:center}
.home .curnote{margin-top:18px;font-size:13px;color:var(--mk-fg-2);text-align:center}
.home .curnote[hidden]{display:none}
.home .pricefoot{display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;margin-top:22px;font-size:13px;color:var(--mk-fg-2)}
.home .pricefoot span{display:inline-flex;align-items:center;gap:8px}
.home .pricefoot svg{width:15px;height:15px;color:var(--bf-done);flex:none}
.home .addon{margin-top:22px;padding:18px;border-radius:var(--bf-r-panel);background:var(--mk-card-2);border:1px solid var(--mk-edge)}
.home .addon .k{font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--mk-fg-3);margin-bottom:8px}
html[lang="he"] .home .addon .k{letter-spacing:.04em}
.home .addon p{font-size:13.5px;color:var(--mk-fg-2);line-height:1.6}
.home .addon b{color:var(--mk-fg-1)}
/* ---------------------------------------------------------- trust row
   The trust row has no heading of its own: it is the end of the pricing
   argument, on the same paper, so it takes no second band padding. */
.home #pricing:has(+ #trust){padding-bottom:0}
.home #pricing + #trust{padding-top:36px}
.home #pricing + #trust .trustrow{margin-top:0}
/* ---- */.home .trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media (max-width:900px){
.home .trustrow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
.home .trustrow{grid-template-columns:1fr}
}
.home .tcard{padding:20px;border-radius:var(--bf-r-panel);border:1px solid var(--mk-edge);background:var(--mk-card)}
.home .tcard b{display:block;font-size:14px;letter-spacing:-.01em}
.home .tcard p{font-size:13px;color:var(--mk-fg-2);margin-top:8px;line-height:1.55}
.home .tcard .lnk{display:inline-flex;align-items:center;min-height:var(--bf-tap);min-width:var(--bf-tap);gap:6px;margin-top:12px;font-size:13px;font-weight:var(--bf-w-bold);color:var(--mk-link)}
.home .tcard .lnk svg{width:14px;height:14px}
html[dir="rtl"] .home .tcard .lnk svg{transform:scaleX(-1)}
/* ---------------------------------------------------------- lead form
   The conversion section is ONE deep composition, not a white slab dropped
   into a navy band. The form is an elevated navy panel (navy-800 on the
   navy-900 band) with sunk navy-900 fields: the Northlight "Fields · deep"
   control, blue on interaction, coral only on a real error. The copy that
   argues for the form -- the assurances, the founding price, the email
   route -- sits beside it as one quiet rail with dividers, not as a stack
   of boxes. Desktop: head and rail on the start side, panel on the end
   side. Below 1000px: head, panel, rail, in that order, so the form is
   the next thing after the promise. */
.home .convgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head panel" "side panel";grid-template-rows:auto 1fr;column-gap:64px;row-gap:40px;align-items:start}
.home .convhead{grid-area:head}
.home .convhead .lede{max-width:44ch}
.home .formpanel{grid-area:panel}
.home .convside{grid-area:side;position:sticky;top:104px}
@media (max-width:999px){
.home .convgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "panel" "side";grid-template-rows:none;row-gap:32px}
.home .convside{position:static}
}

/* ---- the panel */
.home .formpanel{
  color-scheme:dark;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 180px),var(--bf-navy-800);
  border:1px solid var(--bf-edge-deep);border-radius:var(--bf-r-hero);
  padding:8px 32px 32px;box-shadow:var(--bf-e3);
}
@media (max-width:599px){
.home .formpanel{padding:4px 18px 22px;border-radius:var(--bf-r-panel);margin-inline:-4px}
}

/* ---- groups: three short steps instead of twelve fields in a wall */
.home .fgroup{border:0;margin:0;padding:24px 0 26px;min-width:0}
.home .fgroup + .fgroup{border-top:1px solid var(--bf-edge-deep-soft)}
.home .fgroup legend{display:flex;align-items:center;gap:10px;float:left;width:100%;margin:0 0 18px;padding:0;font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--bf-on-deep-2)}
html[lang="he"] .home .fgroup legend{letter-spacing:.03em;font-size:12.5px}
/* Not dead: the fields grid is its own formatting context, and a formatting
   context sits BESIDE a float rather than under it -- without the clear it
   is pushed sideways by the legend and runs off a phone. */
.home .fgroup legend + *{clear:both}
.home .fgroup .gn{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--bf-edge-deep);background:var(--bf-navy-900);color:var(--bf-on-deep-1);font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}

.home .fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
@media (max-width:599px){
.home .fields{grid-template-columns:1fr;gap:16px}
}
.home .f{display:flex;flex-direction:column;gap:8px;min-width:0}
.home .f.full{grid-column:1/-1}
.home .f label{font-size:13.5px;font-weight:var(--bf-w-semi);color:var(--bf-on-deep-1);line-height:1.3}
.home .f label .opt{font-weight:var(--bf-w-regular);color:var(--bf-on-deep-3);margin-inline-start:2px}
.home .f label .req{color:var(--bf-blue-300);font-weight:var(--bf-w-bold)}

/* ---- the control: sunk navy, 48px, blue on focus */
.home .f input,.home .f select,.home .f textarea{
  width:100%;min-height:48px;padding:12px 14px;margin:0;
  font:inherit;font-size:15px;line-height:1.35;color:var(--bf-on-deep-1);
  background-color:var(--bf-navy-900);
  /* #56698f is 3.15:1 on the navy-800 panel and 3.42:1 on the field itself:
     an empty control has to be findable by its edge alone (WCAG 1.4.11),
     and the system's #22304f hairline is 1.3:1. */
  border:1px solid #56698f;border-radius:var(--bf-r-ctl);
  box-shadow:inset 0 1px 2px rgba(3,7,18,.35);
  transition:border-color var(--bf-dur-1) var(--bf-ease-out),box-shadow var(--bf-dur-1) var(--bf-ease-out),background-color var(--bf-dur-1) var(--bf-ease-out);
}
@media (max-width:599px){
/* 16px or iOS zooms the page on focus. */
.home .f input,.home .f select,.home .f textarea{font-size:16px}
}
.home .f input::placeholder,.home .f textarea::placeholder{color:var(--bf-on-deep-3);opacity:1}
.home .f input:hover,.home .f select:hover,.home .f textarea:hover{border-color:#6a7fa8}
.home .f input:focus,.home .f select:focus,.home .f textarea:focus,
.home .f input:focus-visible,.home .f select:focus-visible,.home .f textarea:focus-visible{
  outline:none;border-color:var(--bf-blue-300);background-color:var(--bf-navy-950);
  box-shadow:0 0 0 3px rgba(45,104,250,.42);
}
.home .f textarea{min-height:120px;resize:vertical}
.home .f select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239fb0cc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
}
html[dir="rtl"] .home .f select{background-position:left 14px center}
/* An unanswered question reads quieter than an answer. #plan is excluded:
   its empty value, "Not sure yet", is a real answer, not a prompt. */
.home .f select:not(#plan):has(option[value=""]:checked){color:var(--bf-on-deep-3)}
.home .f select option{background:var(--bf-navy-900);color:var(--bf-on-deep-1)}
.home .f input:disabled,.home .f select:disabled,.home .f textarea:disabled{opacity:.5;cursor:not-allowed}
/* Autofill paints its own pale yellow over the control. Paint it back. */
.home .f input:-webkit-autofill,.home .f input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--bf-on-deep-1);caret-color:var(--bf-on-deep-1);
  box-shadow:0 0 0 100px var(--bf-navy-900) inset;transition:background-color 9999s 0s;
}
.home .f input:-webkit-autofill:focus{box-shadow:0 0 0 100px var(--bf-navy-950) inset,0 0 0 3px rgba(45,104,250,.42)}

/* The error spans are shown by bekefit.js, which sets display:flex inline on
   the one field that failed. Hidden here is the resting state, including
   with JavaScript off, where the browser's own required-field messages do
   the work instead. The icon is a mask on ::before because the script
   rewrites the span's text. */
.home .err{display:none;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.4;color:#ffb49c}
.home .err::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center/contain no-repeat}
.home .f.bad input,.home .f.bad select,.home .f.bad textarea{border-color:var(--bf-attention);box-shadow:0 0 0 3px color-mix(in srgb, var(--bf-attention) 16%, transparent)}
/* A field that is wrong AND focused must still say which one has focus:
   the script focuses the first bad field, and a keyboard user then moves
   between red fields. Coral edge, blue ring. */
.home .f.bad input:focus,.home .f.bad select:focus,.home .f.bad textarea:focus{border-color:var(--bf-attention);box-shadow:0 0 0 3px rgba(45,104,250,.55)}
.home .consent.bad input{border-color:var(--bf-attention)}
.home .consent.bad label{color:#ffb49c}
/* Honeypot. Clipped to a point rather than parked off-screen, for the same
   reason as the skip link above. Never shown, never announced. */
.home .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- consent, submit, banner */
.home .formclose{border-top:1px solid var(--bf-edge-deep-soft);padding-top:22px}
.home .consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:13.5px;color:var(--bf-on-deep-2);line-height:1.55}
.home .consent label{cursor:pointer;padding-block:1px}
.home .consent input{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;width:22px;height:22px;flex:none;cursor:pointer;
  border:1.5px solid #6a7fa8;border-radius:7px;background:var(--bf-navy-900) center/14px 14px no-repeat;
  transition:background-color var(--bf-dur-1) var(--bf-ease-out),border-color var(--bf-dur-1) var(--bf-ease-out);
}
.home .consent input:hover{border-color:var(--bf-blue-300)}
.home .consent input:checked{
  background-color:var(--bf-blue-600);border-color:var(--bf-blue-600);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.home #e-consent{margin-top:8px;padding-inline-start:34px}
.home .consent a{color:var(--bf-blue-300);text-decoration:underline}
.home .formfoot{margin-top:22px;display:grid;gap:12px}
.home .formfoot .btn{min-height:54px;font-size:16px}
.home .formfoot .btn:disabled{opacity:.62;cursor:progress;box-shadow:none}
.home .formmsg{font-size:13.5px;line-height:1.5;padding:12px 14px;border-radius:var(--bf-r-ctl)}
.home .formmsg:empty{display:none;padding:0}
.home .formmsg.bad:not(:empty){background:color-mix(in srgb, var(--bf-attention) 10%, transparent);color:#ffb49c;border:1px solid color-mix(in srgb, var(--bf-attention) 42%, transparent)}
.home #turnstile-slot:not(:empty){margin-top:18px}

/* ---- success: the same panel, answered */
.home .success{display:none;text-align:center;padding:44px 8px 24px}
.home .success[data-show="true"]{display:block}
.home .success:focus{outline:none}
.home .success .tick{width:60px;height:60px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:rgba(52,217,166,.12);border:1px solid rgba(52,217,166,.4);color:var(--bf-done)}
.home .success .tick svg{width:28px;height:28px}
.home .success h3{font-size:22px;letter-spacing:-.02em}
.home .success p{margin:12px auto 0;max-width:46ch;color:var(--bf-on-deep-2);font-size:15px;line-height:1.6}
.home .success .btn{margin-top:24px}

/* ---- the rail beside it */
.home .assure{list-style:none;margin:0;padding:0;display:grid}
.home .assure li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding-block:15px;font-size:14.5px;line-height:1.5;color:var(--bf-on-deep-2)}
.home .assure li + li{border-top:1px solid var(--bf-edge-deep-soft)}
.home .assure li:first-child{padding-top:0}
.home .assure svg{width:19px;height:19px;margin-top:2px;color:var(--bf-blue-300)}
.home .offerside{margin-top:12px;padding-top:24px;border-top:1px solid var(--bf-edge-deep)}
.home .conv .foundtag{background:rgba(255,201,40,.1);border-color:rgba(255,201,40,.42);color:var(--bf-now);font-size:11px;letter-spacing:var(--bf-ls-caps);text-transform:uppercase}
html[lang="he"] .home .conv .foundtag{letter-spacing:.02em;font-size:12px}
.home .offerside p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--bf-on-deep-1)}
.home .offerside p.s{margin-top:8px;font-size:13px;color:var(--bf-on-deep-3)}
.home .contact{display:flex;align-items:center;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--bf-edge-deep-soft);font-size:14px;color:var(--bf-on-deep-2)}
.home .contact svg{width:18px;height:18px;color:var(--bf-on-deep-3)}
.home .contact a{display:inline-flex;align-items:center;min-height:var(--bf-tap);color:var(--bf-blue-300);text-decoration:underline;text-underline-offset:3px}
/* ---------------------------------------------------------- phone lists
   On a phone, eight "what you get" cards and four trust cards stacked one
   under another are a scroll of boxes. There they become lists: icon or
   title on the start side, a divider between rows, no box around each. */
@media (max-width:599px){
.home .getgrid{gap:0;margin-top:28px}
.home .get{display:grid;grid-template-columns:36px 1fr;column-gap:14px;padding:18px 0;border:0;border-radius:0;background:none;border-top:1px solid var(--bf-edge-deep-soft)}
.home .get:first-child{border-top:0;padding-top:0}
.home .get .ic{grid-row:span 2;margin:0}
.home .trustrow{gap:0}
.home .tcard{padding:18px 0;border:0;border-radius:0;background:none;border-top:1px solid var(--mk-edge)}
.home .tcard:first-child{border-top:0;padding-top:0}
.home .tcard .lnk{margin-top:4px}
}
/* ---------------------------------------------------------- faq */.home .faq{display:grid;gap:10px;margin-top:38px}
.home .qa{border:1px solid var(--mk-edge);border-radius:var(--bf-r-card);background:var(--mk-card);overflow:hidden}
.home .qa summary{
  list-style:none;cursor:pointer;padding:16px 18px;min-height:var(--bf-tap);
  display:flex;align-items:center;gap:12px;font-size:15px;font-weight:var(--bf-w-bold);
}
.home .qa summary::-webkit-details-marker{display:none}
.home .qa summary::after{content:"";flex:none;margin-inline-start:auto;width:10px;height:10px;border-inline-end:2px solid var(--mk-fg-3);border-block-end:2px solid var(--mk-fg-3);transform:rotate(45deg);transition:transform var(--bf-dur-2) var(--bf-ease-out)}
.home .qa[open] summary::after{transform:rotate(-135deg)}
.home .qa .a{padding:0 18px 18px;font-size:14px;color:var(--mk-fg-2);line-height:1.65}
/* ---------------------------------------------------------- final + footer */.home .final{text-align:center}
.home .final h2{max-width:22ch;margin-inline:auto}
.home .final h2 span{display:block;color:var(--bf-blue-300)}
.home .final .lede{margin-inline:auto;text-align:center}
.home .final .ctas{justify-content:center}
.home .ctas{margin-top:34px}
.home .final .fine{margin-top:18px;font-size:12.5px;color:var(--bf-on-deep-3)}
.home footer{background:var(--bf-navy-950);color:var(--bf-on-deep-2);padding-block:54px 34px;border-top:1px solid var(--bf-edge-deep)}
.home .footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
@media (max-width:860px){
.home .footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.home .footgrid{grid-template-columns:1fr}
}
.home footer h2,html[lang="he"] .home footer h2{font-family:inherit;font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--bf-on-deep-3);margin-bottom:14px;line-height:1.4}
.home footer ul{display:grid;gap:0;font-size:14px}
.home footer ul a{display:inline-flex;align-items:center;min-height:var(--bf-tap);min-width:var(--bf-tap)}
.home footer a:hover{color:#fff;text-decoration:underline}
.home footer .tag{margin-top:14px;font-size:13.5px;max-width:38ch;line-height:1.6}
.home .social{display:flex;gap:10px;margin-top:16px}
.home .social a{width:var(--bf-tap);height:var(--bf-tap);border-radius:var(--bf-r-ctl);border:1px solid var(--bf-edge-deep);display:grid;place-items:center;color:var(--bf-on-deep-2)}
.home .social a:hover{border-color:var(--bf-blue-300);color:var(--bf-blue-300)}
.home .social svg{width:19px;height:19px}
.home .footbot{margin-top:38px;padding-top:22px;border-top:1px solid var(--bf-edge-deep);display:grid;gap:7px;font-size:12px;color:var(--bf-on-deep-3)}
/* Sticky CTA: a thumb-reach button on phones only. It is blue, like every
   other call to action on the page, and it sits above the home indicator
   rather than on top of it. */
.home .sticky{position:fixed;inset-inline:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:var(--bf-z-sticky);display:none}
.home .sticky .btn{width:100%;box-shadow:var(--bf-e3)}
.home .sticky[data-show="true"]{display:block}
@media (min-width:760px){
.home .sticky{display:none !important}
}
/* The reserve goes on the FOOTER, which is where the page actually ends.
   On <main> it left the legal line and the copyright parked under a button
   that cannot be scrolled out of the way. */
@media (max-width:759px){
.home footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
/* ------------------------------------------------ testimonials (dormant)
   Styled, and rendered by nothing until src/testimonials.json holds a real,
   sourced quote. See tools/build.py: the section is absent from the HTML
   rather than present and empty, so there is no placeholder to mistake for
   a client. */.home .tquotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
@media (max-width:980px){
.home .tquotes{grid-template-columns:1fr}
}
.home .tquote{margin:0;padding:22px;border-radius:var(--bf-r-panel);border:1px solid var(--mk-edge);background:var(--mk-card)}
.home .tquote blockquote{margin:0;font-size:15px;line-height:1.6}
.home .tquote figcaption{margin-top:14px;font-size:13px;font-weight:var(--bf-w-bold)}
.home .tquote figcaption span{font-weight:var(--bf-w-regular);color:var(--mk-fg-3)}

/* =================================================================
   The page's own base. Everything here is a homepage override of a
   shared rule in bekefit.css, which is why each one carries .home:
   without it, the client app and the console would inherit the
   redesign from a homepage pull request.
   ================================================================= */
body.home{font-family:var(--bf-font-sans);color:var(--mk-fg-1);background:var(--mk-card)}
html[lang="he"] body.home{font-family:"Heebo",system-ui,sans-serif}

.home h1,.home h2,.home h3,.home h4{line-height:var(--bf-lh-tight);letter-spacing:var(--bf-ls-head);text-wrap:balance}
.home h2{font-family:var(--bf-font-display);font-weight:var(--bf-w-bold);font-size:var(--bf-t-h1);letter-spacing:var(--bf-ls-display);margin-bottom:0}
html[lang="he"] .home h2{font-family:"Heebo",system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.22}

/* THE BANDS ARE THE PAGE'S RHYTHM, AND THE RHYTHM SURVIVES THE THEME.
   The page alternates paper, mist, two tints and two inks so that two light
   product sections in a row still read as two different places. That is the
   design rather than a theme leak -- and in the dark theme it is an
   alternation of darks, with the polarity turned over: the bands that were
   lightest are deepest, and the two INK bands become the two raised ones. */
.home .band-paper{background:var(--mk-band-paper);color:var(--mk-band-fg)}
.home .band-mist{background:var(--mk-band-mist);color:var(--mk-band-fg)}
/* Tints: the Today band leans blue, the Progress band leans mint. */
.home .band-tint-blue{background:var(--mk-band-tint-blue);color:var(--mk-band-fg)}
.home .band-tint-mint{background:var(--mk-band-tint-mint);color:var(--mk-band-fg)}
.home .band-ink{background:var(--mk-band-ink);color:var(--bf-on-deep-1)}
.home .band-ink-2{background:var(--mk-band-ink-2);color:var(--bf-on-deep-1)}
.home .band-ink h1,.home .band-ink h2,.home .band-ink h3,.home .band-ink h4,
.home .band-ink-2 h1,.home .band-ink-2 h2,.home .band-ink-2 h3,.home .band-ink-2 h4{color:#fff}

.home .kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:var(--bf-t-micro);font-weight:var(--bf-w-bold);
  letter-spacing:var(--bf-ls-caps);text-transform:uppercase;color:var(--mk-fg-3);
}
.home .kicker::before{content:none}
.home .kicker svg{width:15px;height:15px;color:var(--mk-link)}
.home .band-ink .kicker,.home .band-ink-2 .kicker{color:var(--bf-on-deep-2)}
.home .band-ink .kicker svg,.home .band-ink-2 .kicker svg{color:var(--bf-blue-300)}
html[lang="he"] .home .kicker{letter-spacing:.04em}

.home .lede{margin-top:16px;color:var(--mk-fg-2);font-size:clamp(15px,1.4vw,17px);max-width:62ch;font-weight:400}
.home .band-ink .lede,.home .band-ink-2 .lede{color:var(--bf-on-deep-2)}

/* Focus on a deep surface is gold, because blue on navy is the one pair
   that disappears. */
.home .band-ink :focus-visible,
.home .band-ink-2 :focus-visible,
.home .hero :focus-visible,
.home .hdr :focus-visible,
.home footer :focus-visible{outline:2px solid var(--bf-now);outline-offset:2px}
/* But a deep SECTION can hold a light island -- the product example cards
   are white, sitting inside deep bands -- and a gold ring on white is about
   1.6:1, which is not a focus ring. Inside anything light, focus goes back
   to blue. The rule above is a descendant selector, so this one has to
   exist. (The lead form is deep all the way through: its text controls
   carry their own blue ring, above, and its buttons keep the gold.) */
.home .lcard :focus-visible,
.home .pcard :focus-visible{outline-color:var(--bf-blue-600)}

/* Links on this page are styled by the component they sit in, so the browser
   underline is cleared here rather than in the shared sheet, where the legal
   pages rely on underlined links to look like links. */
.home a{text-decoration:none}
.home .qa .a a,.home .consent a,.home .contact a,.home .footbot a{text-decoration:underline}

/* The ghost button on a deep surface. bekefit.css styles .band-ink .btn-o
   for 404 and the legal pages; the hero is a deep surface too, and it is a
   homepage element, so its rule lives here. */
.home .hero .btn-o,.home .band-ink .btn-o{color:#fff;border-color:var(--bf-edge-deep);background:rgba(255,255,255,.04)}
.home .hero .btn-o:hover,.home .band-ink .btn-o:hover{border-color:var(--bf-blue-300);color:var(--bf-blue-300);background:rgba(255,255,255,.07)}
.home [data-offer][hidden]{display:none}
/* A contact the Settings page controls (assets/js/site-config.js) is hidden
   until the live value says it exists, whatever display its own rule sets. */
.home [data-site-show][hidden]{display:none}
.home .plan .btn-o{border:1.5px solid var(--mk-line-2)}