/* עמוד המכירה של "לעבוד עם Claude עמוק באתר" (נבנה מ-claude-deep-guide/site/index.html). הטוקנים והבסיס ב-site.css */
.field{position:fixed;inset:-20vmax;z-index:0;pointer-events:none;filter:blur(100px)}
.field i{position:absolute;border-radius:50%;width:52vmax;height:52vmax;opacity:.6;animation:drift 40s ease-in-out infinite alternate}
.field i:nth-child(1){background:var(--glow-a);top:2%;right:4%}
.field i:nth-child(2){background:var(--glow-b);bottom:4%;left:2%;animation-duration:48s}
.field i:nth-child(3){background:var(--glow-c);bottom:18%;right:26%;width:38vmax;height:38vmax;animation-duration:56s}
@keyframes drift{to{transform:translate3d(6vmax,-5vmax,0) scale(1.08)}}

.wrap{position:relative;z-index:1;max-width:1160px;margin:0 auto;padding-inline:24px}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}

/* ── סרגל עליון ── */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px 9px 18px}
.mark{display:block;line-height:0}.mark img{height:21px;width:auto;filter:var(--logo-filter)}
.nav{display:flex;gap:26px;font-size:15px;color:var(--ink-2)}
.nav a{text-decoration:none;transition:color .2s}.nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:16px;text-decoration:none;border-radius:var(--r-md);padding:13px 22px;border:1px solid transparent;cursor:pointer;transition:transform .1s ease-out,opacity .2s}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--solid);color:var(--on-solid)}
.btn.ghost{background:var(--glass-2);border-color:var(--line)}
.btn.sm{padding:8px 15px;font-size:15px}
.btn .arr{font-size:1.15em;line-height:1}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── פתיחה ── */
.hero{padding-block:64px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-2);margin:0 0 26px}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
h1{font-size:clamp(46px,8.6vw,118px);line-height:.96;letter-spacing:-.048em;font-weight:700;margin:0;text-wrap:balance}
h1 .dim{color:var(--ink-3)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin:34px 0 56px}
.lead{font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--ink-2);font-weight:300;margin:0;max-width:34ch}
.lead strong{color:var(--ink);font-weight:500}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* ── חלון Claude ── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;margin-bottom:14px}
.step{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px;border:0;background:transparent;border-radius:var(--r-md);cursor:pointer;text-align:start;overflow:hidden;color:var(--ink-3);transition:background .25s,color .25s}
.step:hover{color:var(--ink)}
.step .k{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--line);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.step .l{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.on{background:var(--glass-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.step.on .k{background:var(--solid);color:var(--on-solid);border-color:transparent}
.step .p{position:absolute;inset-inline:10px;bottom:4px;height:2px;border-radius:2px;background:var(--line);opacity:0}
.step .p i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:right;transform:scaleX(0);border-radius:2px}
.step.on .p{opacity:1}

.win{border-radius:var(--r-lg);overflow:hidden;background:var(--app);box-shadow:var(--shadow-win)}
.chrome{display:flex;align-items:center;gap:14px;height:42px;padding-inline:14px;border-bottom:1px solid var(--line);background:var(--app-side);direction:ltr}
.dots{display:flex;gap:7px}.dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.tabs{display:flex;gap:2px;padding:3px;border-radius:7px;background:var(--bubble);font-size:12.5px}
.tabs span{padding:3px 11px;border-radius:5px;color:var(--ink-3)}.tabs span.on{background:var(--app);color:var(--ink);font-weight:500}
.path{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.body{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,1fr);min-height:440px}
.side{background:var(--app-side);border-inline-start:1px solid var(--line);padding:16px 12px;font-size:13.5px;color:var(--ink-3)}
.side .proj{padding:7px 10px;border-radius:6px;background:var(--bubble);color:var(--ink);font-weight:500;margin-bottom:12px}
.side .s{padding:6px 10px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .s.on{color:var(--ink)}
.chat{display:flex;flex-direction:column;padding:24px 26px 18px;min-width:0;border-inline-start:1px solid var(--line)}
.msgs{flex:1;display:flex;flex-direction:column;gap:14px}
.u{align-self:flex-start;max-width:88%;background:var(--bubble);padding:11px 15px;border-radius:12px 12px 12px 4px;font-size:15.5px;line-height:1.5}
.tool{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass-2);min-width:0}
.tool .nm{font-weight:600;font-family:var(--mono);color:var(--ink)}
.tool code{font-family:var(--mono);color:var(--ink-2);direction:ltr;unicode-bidi:isolate;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1;text-align:left}
.tool .st{flex:none;width:16px;height:16px;display:grid;place-items:center}
.tool .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .7s linear infinite}
.tool .ok{color:var(--ok)}
@keyframes spin{to{transform:rotate(360deg)}}
.c{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.6}
.c svg{margin-top:4px;color:var(--accent)}
.c .w{transition:opacity .25s ease}
.input{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink-3);background:var(--glass-2)}
.input .send{width:26px;height:26px;border-radius:6px;background:var(--solid);color:var(--on-solid);display:grid;place-items:center}
.pv{position:relative;padding:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--glow-b) 30%,var(--app-side)),color-mix(in srgb,var(--glow-a) 22%,var(--app-side)));border-inline-start:1px solid var(--line);display:grid;place-items:center;min-width:0;overflow:hidden}
.pv .cap{position:absolute;top:14px;inset-inline-end:16px;font-size:12px;color:var(--ink-2);font-family:var(--mono);direction:ltr}
.in{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* תצוגות בצד החלון */
.card{width:100%;max-width:340px;background:var(--app);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:16px}
.term{font-family:var(--mono);font-size:12.5px;line-height:1.9;direction:ltr;text-align:left;background:#16161b;color:#d8d8e0;border-color:transparent}
.term .g{color:#62d79a}.term .d{color:#8a8a99}
.site .nav2{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;margin-bottom:12px;direction:ltr}
.site .nav2 i{width:44px;height:16px;border-radius:4px;background:#2f5d50}
.site .heroc{height:86px;border-radius:7px;background:linear-gradient(135deg,#e6e2d8,#dfe6e0);display:flex;align-items:end;padding:10px;font-size:13px;font-weight:600;color:#1f2b26}
.site .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.site .grid i{height:52px;border-radius:6px;background:#ece7de}.site .grid i:nth-child(2){background:#e1e7e2}.site .grid i:nth-child(3){background:#e7e2ec}
.badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;padding:4px 9px;border-radius:5px;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);font-weight:500}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:380px}
.opt{background:var(--app);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:11px;color:var(--ink-3)}
.opt b{display:block;font-size:12px;color:var(--ink);margin-bottom:8px}
.opt i{display:block;height:13px;border-radius:3px;border:1px solid var(--line);margin-bottom:6px;background:var(--glass-2)}
.opt s{display:block;height:17px;border-radius:3px;background:#2f5d50;text-decoration:none}
.opt.b2 s{border-radius:0;background:#1e3b33}.opt.b3 s{border-radius:9px;background:#c9a27a}
.opt.sel{outline:2px solid var(--accent);outline-offset:2px}
.opt.sel b:after{content:" · נבחרה";color:var(--accent-ink);font-weight:500}
.list{list-style:none;margin:0;padding:0;font-size:14px}
.list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list .ck{width:18px;height:18px;border-radius:5px;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}
.list code{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-inline-start:auto;direction:ltr}
.live{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--ok)}
.live:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
.under{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:16px;font-size:15px;color:var(--ink-2);min-height:3.2em}
.under b{color:var(--ink);font-weight:600}
.under .tagc{flex:none;font-size:13px;color:var(--ink-3)}

/* ── מספרים ── */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-block:110px 0;border-top:1px solid var(--line)}
.rail div{padding:26px 0 0;padding-inline-end:20px}
.rail div+div{padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.rail b{display:block;font-size:clamp(40px,5vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.rail span{display:block;margin-top:10px;font-size:15px;color:var(--ink-2)}

section{margin-top:140px}
.kicker{font-size:13.5px;font-weight:600;color:var(--accent-ink);margin:0 0 14px;letter-spacing:.02em}
.h2{font-size:clamp(32px,4.2vw,54px);line-height:1.04;letter-spacing:-.038em;font-weight:700;margin:0 0 18px;text-wrap:balance}
.sub{color:var(--ink-2);font-weight:300;font-size:19px;max-width:56ch;margin:0 0 44px}

/* ── משפט גדול ── */
.say{font-size:clamp(30px,4.6vw,60px);line-height:1.12;letter-spacing:-.035em;font-weight:600;margin:0;max-width:22ch;text-wrap:balance}
.say span{color:var(--ink-3)}

/* ── רן ── */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}
.story p.t{margin:0 0 16px;color:var(--ink-2);font-size:18px;max-width:46ch}
.sig{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:15px}
.sig i{width:40px;height:40px;border-radius:50%;background:var(--solid);color:var(--on-solid);display:grid;place-items:center;font-style:normal;font-weight:600}
.sig small{display:block;color:var(--ink-3);font-size:13.5px}
.built{display:grid;gap:10px}
.built .glass{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:20px 22px}
.ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.built h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.built p{margin:2px 0 0;font-size:15px;color:var(--ink-2)}
.built .note{font-size:13.5px;color:var(--ink-3);margin:6px 2px 0}

/* ── תוכן הקורס ── */
.sy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:28px;align-items:start}
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:baseline;width:100%;padding:18px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:start;cursor:pointer;transition:background .2s}
.row .n{font-family:var(--mono);font-size:13.5px;color:var(--ink-3);transition:color .2s}
.row .h{display:block;margin:0;font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);transition:color .2s}
.row .d{display:block;grid-column:2/4;margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease,margin .3s}
.row .tm{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;direction:ltr}
.row:hover .h{color:var(--ink)}
.row.on .n{color:var(--accent-ink)}
.row.on .h{color:var(--ink);font-weight:600}
.row.on .d{max-height:6em;opacity:1;margin-top:6px}
.sy-foot{display:flex;justify-content:space-between;padding:16px 4px;font-size:15px;color:var(--ink-2)}
.stage{position:sticky;top:96px;padding:8px}
.stage .frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--app-side)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.stage .meta{display:flex;justify-content:space-between;gap:12px;padding:14px 8px 6px;font-size:14px;color:var(--ink-2)}
.stage .meta b{color:var(--ink);font-weight:600}

/* ── מה מקבלים ── */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.box{padding:28px 30px;min-width:0}
.box h3{margin:0 0 14px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.checks{margin:0;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.checks li:first-child{border-top:0}
.checks svg{margin-top:5px;color:var(--accent)}
.checks b{color:var(--ink);font-weight:500}

/* ── מסלולים ── */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.plan{position:relative;padding:34px;display:flex;flex-direction:column;gap:22px;min-width:0;border-radius:var(--r-lg)}
.plan .head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em}
.plan .what{margin:-14px 0 0;font-size:15px;color:var(--ink-2)}
.price{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.price b{font-size:72px;line-height:.9;font-weight:700;letter-spacing:-.05em}
.price span{font-size:22px;color:var(--ink-2)}
.price small{font-size:14px;color:var(--ink-3);margin-inline-start:6px}
.plan .checks{flex:1}
.plan .btn{width:100%;padding-block:16px;font-size:17px}
.plan.pro{background:var(--solid);color:var(--on-solid);box-shadow:0 30px 70px -30px rgba(20,20,40,.55)}
.plan.pro .what,.plan.pro .price span,.plan.pro .price small,.plan.pro .checks li{color:var(--on-solid-2)}
.plan.pro .checks li{border-color:var(--on-line)}
.plan.pro .checks b{color:var(--on-solid)}
.plan.pro .btn{background:var(--on-solid);color:var(--solid)}
.tag{font-size:12.5px;font-weight:600;background:var(--accent);color:#fff;padding:5px 10px;border-radius:var(--r-sm)}
.fine{margin:18px 2px 0;font-size:14.5px;color:var(--ink-3)}

/* ── שאלות ── */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 2px;font-size:18px;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"";flex:none;width:11px;height:11px;border-inline-start:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);transform:rotate(-45deg) translateY(-3px);transition:transform .25s ease}
.qa details[open] summary:after{transform:rotate(135deg) translateY(-3px)}
.qa details p{margin:-8px 2px 22px;color:var(--ink-2);max-width:62ch}

.final{margin-top:150px;text-align:center;padding:72px 28px}
.final .h2{font-size:clamp(34px,5vw,64px);margin-inline:auto;max-width:18ch}
.final .sub{margin-inline:auto}
.final .cta{justify-content:center}
footer{position:relative;z-index:1;margin-top:60px;padding-block:28px 44px;border-top:1px solid var(--line);color:var(--ink-3);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer img{height:16px;width:auto;filter:var(--logo-filter);opacity:.75}

@media (max-width:980px){
  .body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .side{display:none}
  .chat{border-inline-start:0}
}
@media (max-width:860px){
  .nav{display:none}
  .hero{padding-block:36px 0}
  .hero-row{grid-template-columns:1fr;gap:24px;margin:26px 0 40px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .body{grid-template-columns:1fr;min-height:0}
  .chat{min-height:330px}
  .pv{border-inline-start:0;border-top:1px solid var(--line);min-height:250px}
  .under{flex-direction:column;gap:4px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:80px}
  .rail div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .rail div:nth-child(n+3){margin-top:22px;border-top:1px solid var(--line)}
  section{margin-top:104px}
  .story,.sy,.faq{grid-template-columns:1fr;gap:28px}
  .stage{position:relative;top:0;order:-1}
  .two,.plans{grid-template-columns:1fr}
  .final{margin-top:110px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .chat{padding:18px 16px 14px}
  .tabs,.path{display:none}
  .step{padding:10px}
  .box,.plan{padding:24px 20px}
  .price b{font-size:60px}
  .opts{gap:6px}.opt{padding:7px}
}
@media (prefers-reduced-motion:reduce){
  .field i,.tool .spin{animation:none}
  .in{animation:none}
  html{scroll-behavior:auto}
}