/* =========================================================
   Infinity - the Dedicated Expert page, Israel edition
   Loaded by israel.html AFTER styles.css. Everything visual comes from styles.css
   section 2 TOKENS: this file defines no raw colour, and it changes no token that
   index.html reads. What it holds:
     1 the Hebrew webfont, self-hosted, put in front of Sora and Manrope for Hebrew glyphs only
     2 the RTL dressing of the shared components, in logical properties
     3 the four components the Israeli copy has and the Dubai page does not
     4 the original centred composition
     5 the breakpoints
     6 the September redesign, including responsive start-aligned text
   Directional CSS is logical throughout (inline-start / inline-end), so any block
   here can be dropped into the LTR page later without edits.
   ========================================================= */

/* ---------- 1. HEBREW FONT (Assistant, Hebrew subset, three static weights) ---------- */
@font-face{font-family:'Assistant';src:url('assets/fonts/assistant-hebrew-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Assistant';src:url('assets/fonts/assistant-hebrew-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Assistant';src:url('assets/fonts/assistant-hebrew-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}

/* The Hebrew face rides in front of the two brand faces. Its unicode-range is Hebrew only, so
   Latin runs ("Infinity", "AI", "WhatsApp", the price) still render in Sora and Manrope.
   Scoped to this page: styles.css keeps its own --font-display and --font-body for index.html. */
:root{
  --font-hebrew:'Assistant';
  --font-display:var(--font-hebrew),'Sora',system-ui,sans-serif;
  --font-body:var(--font-hebrew),'Manrope',system-ui,sans-serif;
}

/* ---------- 2. RTL DRESSING of the shared components ---------- */
/* Hebrew has no case and takes no tracking: the Latin display tweaks are switched off. */
h1,h2,h3,.cta-final h2,.fact-value,.compare-tag{letter-spacing:0;}
.skip-link{left:auto;inset-inline-start:var(--gutter);}
/* the hero's glow and hairline circle sit behind the offer card, which is on the inline-end side */
.hero{
  background:
    radial-gradient(ellipse 50% 60% at 20% 40%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%),
    var(--ink);
}
.hero::before{right:auto;inset-inline-end:-140px;}
/* steps: the path runs from inline-start (where the numbers sit is section 4) */
.steps{grid-template-columns:repeat(3,1fr);}
.steps::before{background:linear-gradient(to left,var(--gold) 0%,color-mix(in srgb,var(--gold) 75%,transparent) 60%,color-mix(in srgb,var(--gold) 20%,transparent) 100%);}
.step-text{color:var(--text);}
/* the float mirrors to the inline-end corner */
.wa-float{right:auto;inset-inline-end:22px;}
.nowrap{white-space:nowrap;}

/* ---------- 3. THE ISRAELI COMPONENTS ---------- */
/* the pain band: three lines, each led by a brand chip (the chip is styles.css section 11) */
.pain-band{display:grid;gap:18px;max-width:820px;}
.pain-line{display:flex;align-items:flex-start;gap:16px;max-width:none;color:var(--muted);}
.pain-line .package-chip{width:40px;height:40px;border-radius:10px;}
.pain-line .package-chip svg{width:20px;height:20px;}
.pain-line strong{color:var(--text);}
.pain-band + .compare-grid{margin-top:48px;}
/* package cells carry a line of copy under the heading here, the chip over both (section 4) */
.package-cell{flex-direction:column;align-items:center;}
.package-text p{margin-top:6px;color:var(--muted);}
/* the reassurance line under the pricing card */
.pricing-assure{margin:32px auto 0;max-width:640px;text-align:center;}
.pricing-assure p{max-width:none;color:var(--muted);}
.pricing-assure strong{color:var(--text);}
/* the question left open under the FAQ */
.faq-ask{margin-top:28px;color:var(--muted);}
.link-quiet{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.link-quiet:hover{color:var(--gold-2);}

/* the examples carousel (markup: israel.html section 5b; behaviour: script.js section 2). Rebuilt 2026-11-01 on the owner's
   second complaint about the loop: the track is a clipped stage, not a scroll container, and every card is a grid item in
   the one cell that script.js moves by transform to its slot on the ring. The card count per view and the peek of the next
   card are the custom properties, set again per breakpoint in section 5. Logical properties only, so the same rules serve
   the LTR page later. Motion: the script eases the transforms itself, on one clock for every card, and not at all under
   reduced motion. */
.slider{--slider-gap:20px;--slider-per-view:3;--slider-peek:0px;position:relative;}
.slider-track{display:grid;overflow-x:clip;overflow-y:visible;touch-action:pan-y;}
.slider-card{
  grid-area:1/1;
  justify-self:start;
  inline-size:calc((100% - var(--slider-peek) - (var(--slider-per-view) - 1) * var(--slider-gap)) / var(--slider-per-view));
  min-inline-size:0;
  display:flex;
  will-change:transform;
}
/* the card face is the button: the whole card activates */
.example-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  padding:16px 16px 22px;
  text-align:center;
  border-color:var(--line-gold);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.example-card:focus-visible{border-radius:var(--radius-lg);}
/* the business type IS the card, so it is the face's title: nothing else is written on the face */
.example-type{font-family:var(--font-display);font-size:var(--size-h3);font-weight:700;line-height:1.25;color:var(--text);padding-inline:6px;}
/* the cue is a gold pill at the foot of the face, filled when the face is hovered */
.example-cue{margin-block-start:auto;display:inline-flex;align-items:center;justify-content:center;align-self:center;min-block-size:40px;padding:8px 20px;border:1px solid var(--line-gold);border-radius:999px;font-size:var(--size-small);font-weight:700;line-height:1;color:var(--gold);transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.example-card:hover .example-cue,.example-card:focus-visible .example-cue{background:var(--gold);color:var(--ink);border-color:var(--gold);}
/* the card's image: one replaceable file per card (docs/card-images.md), every one at 16:10, so a swap moves nothing */
.example-image{order:-2;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);}
/* the controls: the FAQ chevron turned along the inline axis, mirrored by :dir() and by nothing physical */
.slider-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-block-start:34px;}
.slider-btn{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-gold-strong);
  border-radius:50%;
  background:var(--ink);
  color:var(--gold);
  box-shadow:0 12px 28px -18px var(--gold);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .2s ease;
}
.slider-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-1px);}
.slider-btn:active{transform:none;}
.slider-btn:focus-visible{border-radius:50%;}
.slider-btn svg{width:24px;height:24px;}
.slider-prev svg{transform:rotate(90deg);}
.slider-next svg{transform:rotate(-90deg);}
.slider-prev:dir(rtl) svg{transform:rotate(-90deg);}
.slider-next:dir(rtl) svg{transform:rotate(90deg);}
/* the dots say "there are more" and each one jumps to its card: an 8px dot inside a 24px tap box; the
   leading card lights its dot, larger and lit gold, one at a time around the ring (script.js sync) */
.slider-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;}
.slider-dot{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.slider-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--line-gold);transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;}
.slider-dot:hover::before{background:var(--line-gold-strong);}
.slider-dot.is-current::before{background:var(--gold);transform:scale(1.5);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 60%,transparent);}
/* the dialog fills the viewport itself (so a click that lands on it is a click outside the panel) */
.example-modal{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  max-width:none;max-height:none;
  margin:0;
  padding:var(--gutter);
  border:0;
  background:color-mix(in srgb,var(--ink-deep) 84%,transparent);
  color:var(--text);
}
.example-modal[open]{display:grid;place-items:center;}
.example-modal::backdrop{background:transparent;}
body:has(.example-modal[open]){overflow:hidden;}
.example-modal-panel{
  position:relative;
  width:min(680px,100%);
  max-height:100%;
  overflow:auto;
  overscroll-behavior:contain;
  padding:40px;
  border-color:var(--line-gold);
  background:var(--ink-warm);
  box-shadow:var(--shadow-card);
}
.example-modal-close{
  position:absolute;
  inset-block-start:14px;
  inset-inline-end:14px;
  width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  color:var(--muted);
}
.example-modal-close:hover{color:var(--text);}
.example-modal-close:focus-visible{border-radius:50%;}
.example-modal-close svg{width:22px;height:22px;}
/* the dialog: the business type, the paragraph that says what we do for a business like this, and
   then one block per solution. Card 10 carries five of them, so the panel is what scrolls (it owns
   the max-height and the overflow above) and the head scrolls away with the rest. */
.example-modal-title{padding-inline:var(--tap);font-family:var(--font-display);font-size:clamp(24px,2.4vw,30px);font-weight:800;line-height:1.15;color:var(--text);}
/* the owner's own words, kept as a quotation: a gold rule on the inline start, and the line itself
   set apart from the paragraph that answers it */
.example-modal-opening{margin-block:20px 0;padding-inline-start:14px;border-inline-start:2px solid var(--gold);font-style:italic;color:var(--muted);}
.example-modal-intro{margin-block:16px 0;color:var(--muted);}
.example-modal-solutions{display:grid;gap:14px;margin-block-start:26px;}
.example-solution{padding:20px;border:1px solid var(--line-gold);border-radius:var(--radius);background:var(--ink);}
.example-solution-name{font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.35;color:var(--text);}
.example-solution-text{margin-block:8px 0;color:var(--muted);}
/* the call to action of a solution: the live demo, or the same label held inert with its tag */
.example-solution-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:16px;}
.btn-demo{min-block-size:44px;padding:10px 20px;font-size:15px;background:var(--gold);color:var(--ink);border-color:var(--gold);}
.btn-demo:hover{background:var(--gold-2);border-color:var(--gold-2);}
.btn-demo.is-waiting{background:transparent;color:var(--muted);border-color:var(--line);cursor:default;}
.example-soon{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--gold);border:1px solid var(--line-gold);border-radius:999px;padding:4px 12px;}

/* ---------- 4. CENTRED TEXT (asked for on 2026-09-09) ---------- */
/* Every text block on this page reads as centred: the text itself, inherited from main, and every box that
   carries a max-width, which has to sit centred too or only its inside would be. The shared sheet is untouched:
   index.html keeps its start-aligned layout. Left as it is: the header's brand, a mark and not a text block. */
main{text-align:center;}
main p,.section-head h2,.section-head p,.compare-grid figcaption,.pain-band,.faq-wrap{margin-inline:auto;}
.hero-cta-block{align-items:center;}
/* the chip sits over its line instead of beside it */
.pain-line{flex-direction:column;align-items:center;}
.compare-grid figure{align-items:center;}
.compare-tag{align-self:center;}
.compare-loose{justify-content:center;}
/* the path: each number sits in the flow over its text, and the line runs from the first number to the last */
.steps::before{left:auto;right:auto;inset-inline:calc((100% - 64px) / 6);}
.step{padding-block-start:0;}
.step-num{position:static;margin-inline:auto;margin-block-end:18px;}
.offer-card{align-items:center;}
.includes li{justify-content:center;}
.offer-card .btn{align-self:center;}
/* the question centred on its row: the chevron's width and gap are given back on the other side */
.faq-q{text-align:center;padding-inline-start:36px;}
.faq-q span{flex:1;}

/* ---------- 5. RESPONSIVE (the breakpoints of styles.css section 19, mirrored) ---------- */
@media (max-width:900px){
  .hero-copy,.hero-card{width:100%;margin-inline:auto;}
  .steps{grid-template-columns:1fr;}
  /* stacked, each number over its text; the vertical path would run through centred text, so here there is none */
  .steps::before{display:none;}
  .step{padding-block:0 34px;padding-inline:0;}
  .step:last-child{padding-block-end:0;}
  .step-num{margin-block-end:14px;}
}
@media (max-width:1024px){
  .slider{--slider-per-view:2;}
}
@media (max-width:768px){
  .hero::before{right:auto;inset-inline-end:-360px;}
  .wa-float{right:auto;inset-inline-end:16px;}
  .pain-line{gap:12px;}
  /* one card fills the view and the next one peeks in; a swipe carries as many cards as it travelled; the dots take a row
     of their own above the arrows */
  .slider{--slider-per-view:1;--slider-peek:44px;}
  .slider-nav{flex-wrap:wrap;gap:14px 18px;}
  .slider-dots{order:-1;flex-basis:100%;}
  .example-card{padding:24px;}
  .example-modal-panel{padding:28px;}
}

/* ---------- 6. SEPTEMBER DESIGN STUDY: charcoal, brass and engraved surfaces ---------- */
:root{--section:120px;--radius-lg:20px;--size-h2:clamp(34px,3.6vw,52px);}
body{background:var(--ink-deep);}
main{text-align:start;}
h1,h2,h3{text-wrap:balance;}
.section{padding-block:var(--section);}
.section-head{margin-block-end:48px;}
.section-head h2{max-inline-size:23ch;}
.section-head p{line-height:1.75;}
.section-head::before{
  content:'';display:block;inline-size:48px;block-size:3px;
  margin-block-end:24px;background:var(--gold);
}
.section-head--center::before{margin-inline:auto;}
.section-head:not(.section-head--center) h2,
.section-head:not(.section-head--center) p{margin-inline:0;}
.btn{border-radius:12px;min-block-size:56px;padding-block:16px;}
.btn-primary{box-shadow:0 8px 28px -16px var(--gold);}
.site-header .header-inner{padding-block-end:18px;border-block-end:1px solid var(--line);}
.brand-name{font-size:17px;letter-spacing:.12em;}
.wa-float{background:var(--ink-warm);color:var(--gold);border:1px solid var(--line-gold);box-shadow:var(--shadow-card);}
.wa-float:hover{background:var(--ink);color:var(--gold-2);}

/* Texture belongs to the surface. */
main .story{
  background-color:var(--ink-deep);
  background-image:
    radial-gradient(ellipse at 28% 9%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 28%),
    repeating-linear-gradient(90deg,transparent 0 95px,color-mix(in srgb,var(--text) 2%,transparent) 95px 96px);
}
.hero-copy::before{content:'';display:block;inline-size:56px;block-size:3px;background:var(--gold);margin-block-end:28px;}
.hero .body-lg{line-height:1.7;}
.hero-price{display:block;margin-block-end:8px;font-size:26px;}
.hero-offer{line-height:1.65;}
.hero-cta-block{align-items:flex-start;margin-block-start:30px;}
.hero-card{border:0;border-block-start:1px solid var(--line-gold);border-radius:0;background:transparent;box-shadow:none;}
.fact-value{color:var(--text);font-size:18px;}
.fact-note{font-size:15px;}
.fact{border-color:var(--line);}
.pain-band{gap:0;}
.pain-line{flex-direction:row;align-items:flex-start;gap:20px;padding-block:22px;border-block-end:1px solid var(--line);line-height:1.75;}
.pain-line:last-child{border-block-end:0;}
.pain-line strong{display:block;margin-block-end:6px;font-size:21px;line-height:1.4;}
.package-chip{border:1px solid var(--line-gold);background:var(--ink-warm);border-radius:50%;}
.pain-line .package-chip{border-radius:50%;inline-size:42px;block-size:42px;}
.compare-grid figure{align-items:stretch;border-radius:16px;box-shadow:none;text-align:start;}
.compare-tag{align-self:flex-start;}
.compare-grid figcaption{margin-inline:0;line-height:1.7;}
.compare-grid .is-before{border-color:var(--line);background:var(--ink);}
.compare-grid .is-after{background:var(--ink-warm);border-color:var(--line-gold);}
.compare-loose{justify-content:flex-start;}
.pivot-line{padding-block-start:28px;border-block-start:1px solid var(--line-gold);line-height:1.65;}

/* A photographic material study anchors the service grid. */
#build{background:var(--ink);}
.build-composition{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--ink-deep);}
.system-art{min-inline-size:0;block-size:100%;background:var(--ink-deep);}
.system-art img{inline-size:100%;block-size:100%;object-fit:cover;}
.package-panel{border:0;border-radius:0;background:var(--line);box-shadow:none;}
.package-cell{align-items:flex-start;padding:32px 28px;background:var(--ink-deep);gap:24px;}
.package-cell .package-chip{inline-size:56px;block-size:56px;border-radius:16px;}
.package-cell h3{font-size:24px;}
.package-text p{font-size:17px;line-height:1.7;}
#build .pivot-line{max-inline-size:48ch;}

/* The examples retain their complete markup, order, and interaction geometry. The face since the owner's second review
   (2026-11-01): a warm surface with a gold hairline, the picture framed, and a lift with a gold glow under the pointer. */
#examples{background:var(--ink-deep);}
.example-card{background:linear-gradient(180deg,var(--ink-warm),var(--ink) 62%);border-color:var(--line-gold);box-shadow:0 22px 44px -32px var(--ink-deep),inset 0 1px 0 color-mix(in srgb,var(--gold) 16%,transparent);}
.example-card:hover,.example-card:focus-visible{border-color:var(--line-gold-strong);transform:translateY(-4px);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 24%,transparent),0 28px 54px -30px color-mix(in srgb,var(--gold) 50%,transparent);}
.example-type{font-size:25px;line-height:1.25;}
.example-image{border-radius:12px;box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent);}
.example-modal-panel{text-align:start;}
.example-modal-title{text-align:center;}
.example-modal-opening{line-height:1.7;}
.example-modal-intro{line-height:1.75;}
.example-solution{border-radius:12px;}
.example-solution-text{line-height:1.75;}

#how{background:var(--ink);}
.steps{gap:0;padding-block-start:0;}
.steps::before{display:none;}
.step{padding:12px 36px;border-inline-start:1px solid var(--line-gold);}
.step-num{margin-inline:0;margin-block-end:24px;inline-size:56px;block-size:56px;border:1px solid var(--line-gold);font-size:24px;background:var(--ink-deep);}
.step-text{margin-inline:0;line-height:1.75;font-size:20px;}

#pricing{background-color:var(--ink-deep);background-image:repeating-linear-gradient(90deg,transparent 0 95px,color-mix(in srgb,var(--text) 3%,transparent) 95px 96px);}
.pricing-grid-single{max-inline-size:860px;max-width:860px;}
.offer-card{padding:48px 64px;border:1px solid var(--line-gold);border-block-start:3px solid var(--gold);background:var(--ink);box-shadow:var(--shadow-card);text-align:center;}
.offer-card h3{font-size:26px;color:var(--gold-2);}
.price{font-size:clamp(44px,5vw,64px);margin-block:24px 8px;}
.includes{align-self:stretch;border-block-start:1px solid var(--line);padding-block-start:28px;}
.includes li{justify-content:flex-start;text-align:start;padding-block:6px;gap:16px;}
.offer-card .btn{margin-block-start:24px;}
#faq{background:var(--ink);}
.faq-wrap{max-inline-size:820px;}
.faq-item{border-color:var(--line);}
.faq-item.open{border-color:var(--line-gold);}
.faq-q{padding-block:24px;padding-inline:0;text-align:start;font-size:22px;line-height:1.4;}
.faq-a-inner{padding-block-end:24px;line-height:1.8;}
.faq-ask{text-align:center;margin-block-start:40px;}
.cta-final{background:var(--ink-warm);border-block-start:1px solid var(--line-gold);padding-block:100px;}
.cta-final h2{max-inline-size:18ch;font-size:clamp(38px,4.5vw,62px);}
.site-footer{background:var(--ink-deep);padding-block:56px 90px;}

@media(min-width:1050px){
  .story-copy #top .hero-copy{inline-size:100%;max-inline-size:none;}
  .story-copy #top .hero-copy h1{font-size:clamp(48px,4.2vw,66px);max-inline-size:none;margin-inline:0;line-height:1.06;}
  .story-copy #top .body-lg,.story-copy #top .hero-offer{margin-inline:0;max-inline-size:none;}
  .story-copy #top .hero-grid{gap:32px;}
  .story-copy #top .hero-card{padding:20px 0 0;background:transparent;}
  .story-copy #top .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
  .story-copy #top .fact{padding:0;border:0;}
  .story-copy #top .fact-value{font-size:18px;line-height:1.4;}
  .story-copy #top .fact-note{font-size:14px;line-height:1.5;}
  .story-copy .section .pain-line{flex-direction:row;gap:20px;line-height:1.7;padding-block:20px;}
  .story-copy .section .pain-band{gap:0;}
  .story-copy .section .section-head{margin-block-end:28px;}
  .story-copy .section h2{font-size:clamp(36px,3.2vw,48px);}
  .story-copy #compound .pivot-line{margin-inline:0;text-align:start;max-inline-size:34ch;}
  #faq .container{display:grid;grid-template-columns:1fr 1.6fr;column-gap:80px;}
  #faq .section-head{grid-column:1;}
  #faq .faq-wrap{grid-column:2;inline-size:100%;}
  #faq .faq-ask{grid-column:2;}
}
@media(max-width:1049px){
  :root{--section:88px;}
  .hero{background:var(--ink-deep);padding-block:148px 72px;}
  .hero::before{display:none;}
  .hero h1{font-size:clamp(44px,6vw,62px);line-height:1.08;max-inline-size:15ch;}
  .hero-copy::before{margin-block-end:24px;}
  .hero-grid{gap:36px;}
  .hero-card{padding:20px 0 0;}
  .fact{padding-block:16px;}
  .hero-card .fact:first-child{padding-block-start:0;}
  .build-composition{grid-template-columns:1fr;}
  .system-art{max-block-size:400px;overflow:hidden;}
  .system-art img{aspect-ratio:3/2;}
  .steps{grid-template-columns:1fr;gap:28px;}
  .step{display:grid;grid-template-columns:48px 1fr;column-gap:20px;padding-block:0;padding-inline:0;border:0;}
  .step-num{inline-size:48px;block-size:48px;margin:0;}
  .step-text{max-inline-size:none;font-size:19px;}
}
@media(max-width:600px){
  :root{--section:72px;--gutter:22px;}
  .site-header{padding-block:18px;}
  .brand-name{font-size:15px;}
  .brand-mark{block-size:36px;}
  .hero{padding-block-start:130px;}
  .hero .body-lg{font-size:19px;line-height:1.65;}
  .hero-offer{font-size:17px;}
  .hero-price{font-size:26px;}
  .hero-cta-block .btn{inline-size:100%;padding-inline:12px;font-size:15px;}
  .hero-card .fact-value{font-size:19px;}
  .section-head{margin-block-end:32px;}
  .section-head h2{font-size:36px;line-height:1.15;}
  .section-head--center{text-align:start;}
  .section-head--center::before{margin-inline:0;}
  .section-head p{font-size:19px;line-height:1.7;}
  .pain-line{gap:14px;font-size:17px;}
  .pain-line strong{font-size:20px;}
  .pain-line .package-chip{inline-size:34px;block-size:34px;}
  .pain-line .package-chip svg{inline-size:17px;block-size:17px;}
  .compare-grid{gap:16px;}
  .compare-grid figure{padding:24px;}
  .build-composition{border-radius:16px;}
  .package-panel{grid-template-columns:1fr;}
  .package-cell{flex-direction:row;gap:18px;padding:28px 22px;}
  .package-cell .package-chip{inline-size:40px;block-size:40px;border-radius:12px;}
  .package-cell h3{font-size:23px;}
  .package-text p{font-size:17px;}
  .pivot-line{text-align:start;font-size:20px;}
  .example-type{font-size:23px;}
  .example-modal{padding-block:24px 88px;}
  .example-solution{padding:16px;}
  .example-solution-name{font-size:17px;}
  .offer-card{padding:32px 22px;border-radius:16px;}
  .offer-card .btn{inline-size:100%;padding-inline:10px;font-size:15px;}
  .includes li{font-size:17px;line-height:1.65;}
  .faq-q{font-size:21px;}
  .cta-final{padding-block:72px;}
  .cta-final h2{text-align:center;}
  .wa-float{inline-size:48px;block-size:48px;min-block-size:48px;padding:0;justify-content:center;}
  .wa-float span{display:none;}
}

/* ---------- 7. CONNECTED SYSTEMS: diagrams and integrated service illustrations ---------- */
.story-copy #problem .compare-grid{gap:24px;}
.story-copy #problem .compare-grid figure{padding:26px;gap:20px;overflow:hidden;}
.compare-grid .compare-tag{font-size:16px;letter-spacing:0;font-weight:600;}
.compare-grid .is-after{background:var(--ink-deep);box-shadow:inset 0 1px 0 var(--line-gold),0 24px 60px -40px var(--ink-deep);}
.compare-grid .is-before{background:var(--ink);}
.story-copy #problem .compare-grid figcaption{font-size:17px;max-inline-size:48ch;}
.compare-grid figcaption strong{display:block;font-size:22px;margin-block-end:4px;}
.compare-grid .compare-loose,.compare-grid .compare-block{
  position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);gap:68px 28px;min-block-size:230px;
  padding:18px 4px;border:0;border-radius:0;overflow:visible;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--gold) 6%,transparent),transparent 70%);
}
.compare-grid .compare-loose{background:none;}
.system-wires{position:absolute;inset:0;inline-size:100%;block-size:100%;fill:none;stroke:var(--gold);stroke-width:1;opacity:.65;}
.compare-loose .system-wires{stroke:var(--muted);stroke-dasharray:3 7;opacity:.25;}
.system-core{position:absolute;inset-inline-start:calc(50% - 34px);inset-block-start:calc(50% - 34px);inline-size:68px;block-size:68px;filter:drop-shadow(0 0 16px var(--line-gold));}
.system-core rect{fill:var(--ink-warm);stroke:var(--gold);stroke-width:1;}
.system-core path{fill:none;stroke:var(--gold);stroke-width:1.5;}
.system-core circle{fill:var(--gold);stroke:var(--ink-warm);stroke-width:3;}
.story-copy #problem .compare-loose span,.story-copy #problem .compare-block span,
.compare-grid .compare-loose span,.compare-grid .compare-block span{
  position:relative;z-index:1;display:flex;justify-content:center;align-items:center;
  margin:0;padding:12px 8px;min-block-size:46px;min-height:0;
  border:1px solid var(--line-gold);border-radius:12px;
  background:var(--ink-warm);color:var(--text);font-size:15px;
  box-shadow:0 8px 20px -12px var(--ink-deep);
}
.story-copy #problem .compare-loose span{background:var(--ink-2);border-color:var(--line);color:var(--muted);}
.compare-loose span:nth-of-type(1){transform:translateY(7px) rotate(4deg);}
.compare-loose span:nth-of-type(2){transform:translateY(-5px) rotate(-5deg);}
.compare-loose span:nth-of-type(3){transform:translateY(10px) rotate(3deg);}
.compare-loose span:nth-of-type(4){transform:translateY(-5px) rotate(-4deg);}
.compare-loose span:nth-of-type(5){transform:translateY(6px) rotate(4deg);}
.compare-loose span:nth-of-type(6){transform:translateY(-9px) rotate(-3deg);}
#build{background:var(--ink-deep);overflow:hidden;}
#build .section-head{margin-block-end:0;position:relative;z-index:1;}
.build-composition{display:block;position:relative;border:0;border-radius:0;background:none;overflow:visible;}
.system-art{inline-size:min(760px,100%);block-size:330px;max-block-size:none;margin-inline:auto;position:relative;overflow:hidden;
  mask-image:radial-gradient(ellipse 53% 49% at 50% 47%,var(--ink-deep) 22%,transparent 100%);
}
.system-art img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center 58%;opacity:.7;}
.package-panel{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-block-start:-30px;border:0;background:none;overflow:visible;}
.package-panel::before{content:'';position:absolute;inset-inline:12.5%;inset-block-start:-30px;block-size:1px;background:var(--line-gold);}
.package-cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px 24px 30px;border:1px solid var(--line);border-radius:18px;background:var(--ink);box-shadow:0 24px 46px -36px var(--ink-deep);transition:border-color .25s ease,background-color .25s ease;}
.package-cell::before{content:'';position:absolute;inset-inline-start:50%;inset-block-start:-30px;block-size:29px;inline-size:1px;background:var(--line-gold);}
.package-cell:hover{border-color:var(--line-gold);background:var(--ink-2);}
.package-cell .package-chip{display:none;}
.service-graphic{inline-size:100%;block-size:auto;aspect-ratio:12/7;margin-block:0 24px;overflow:visible;}
.graphic-surface{fill:var(--ink-deep);stroke:var(--line-gold);stroke-width:1;}
.graphic-line{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.graphic-path{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.7;}
.graphic-gold{fill:var(--ink-warm);stroke:var(--gold);stroke-width:1;}
.graphic-accent,.graphic-dot{fill:var(--gold);}
.package-cell h3{font-size:24px;line-height:1.25;min-block-size:2.5em;}
.package-text p{margin-block-start:14px;font-size:17px;line-height:1.75;}
#build .pivot-line{margin-block-start:48px;border:0;padding:0;max-inline-size:50ch;text-align:center;}
@media(min-width:1050px){
  .story-copy #problem .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
  .story-copy #problem .compare-grid figure{padding:22px 18px;}
  .story-copy #problem .compare-grid .compare-loose,.story-copy #problem .compare-grid .compare-block{gap:72px 12px;min-block-size:224px;}
  .story-copy #problem .compare-grid .compare-tag{min-block-size:2.8em;display:flex;align-items:center;font-size:15px;}
  .story-copy #problem .compare-loose span,.story-copy #problem .compare-block span{font-size:13px;padding:10px 3px;}
}
@media(max-width:1049px){
  .package-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .package-panel::before{inset-inline:25%;}
  .package-cell:nth-child(n+3)::before{display:none;}
  .package-cell h3{min-block-size:0;}
}
@media(max-width:600px){
  .story-copy #problem .compare-grid figure{padding:24px 20px;}
  .compare-grid .compare-loose,.compare-grid .compare-block{gap:66px 14px;min-block-size:218px;}
  .system-art{block-size:220px;margin-block:12px 0;}
  .package-panel{grid-template-columns:1fr;gap:20px;margin-block-start:-18px;}
  .package-panel::before,.package-cell::before{display:none;}
  .package-cell{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;padding:26px 20px;align-items:start;border-radius:16px;}
  .service-graphic{inline-size:100%;margin-block:6px 0;aspect-ratio:1;}
  .package-text h3{font-size:23px;}
  .package-text p{margin-block-start:10px;}
  #build .pivot-line{font-size:20px;}
}
@media(prefers-reduced-motion:no-preference){
  /* the lines connect by clip and scale only, never by stroke-dashoffset: the wires open out from the hub, each service
     graphic's path grows from its own centre */
  .is-revealed .compare-block .system-wires{animation:system-connect 1.4s ease-out both;}
  .package-cell.is-revealed .graphic-path{transform-box:fill-box;transform-origin:center;animation:service-connect 1.1s ease-out both;}
  @keyframes system-connect{from{clip-path:inset(50%);}to{clip-path:inset(0);}}
  @keyframes service-connect{from{transform:scale(0);}to{transform:none;}}
}

/* ---------- 8. THE OPENING: the logo, the line, the chevron ---------- */
/* Rebuilt 2026-10-30 (the owner's third note): the live site's own opening, the intro-art.js network and particles, with
   the DNA site's content: the line and the chevron. Since round 7 (11/02) the logo is the official one, flat (brand.css). */
.brand-intro{position:relative;isolation:isolate;min-block-size:100svh;padding-inline:var(--gutter);text-align:center;overflow:hidden;}
.intro-content{position:relative;z-index:2;inline-size:100%;block-size:100svh;margin-inline:auto;pointer-events:none;}
.intro-brand{position:absolute;inset-block-start:10%;inset-inline:0;inline-size:clamp(300px,38vw,550px);margin:0;margin-inline:auto;font-size:0;line-height:0;color:var(--gold);}
.intro-brand .sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.intro-brand img{display:block;inline-size:100%;block-size:auto;}
.intro-art{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--art-opacity,1);overflow:hidden;mask-image:linear-gradient(90deg,var(--ink) 0%,var(--ink) 12%,transparent 42%,transparent 58%,var(--ink) 88%,var(--ink) 100%);}
.intro-art canvas{position:absolute;inset-block-start:50%;inline-size:max(86vw,140svh);max-inline-size:none;block-size:auto;aspect-ratio:1;transform:translateY(-50%);opacity:.23;filter:blur(5px);}
.intro-network{inset-inline-start:-32vw;}
.intro-art .intro-particles{inset-inline-end:-32vw;transform:translateY(-50%) scaleX(-1);}
@media(max-width:1049px){
  .intro-art canvas{inline-size:120svh;opacity:.18;filter:blur(4px);}
  .intro-network{inset-inline-start:-85svh;}
  .intro-art .intro-particles{inset-inline-end:-85svh;}
}
.intro-line{position:absolute;inset-block-start:60%;inset-inline:0;font-family:var(--font-display);font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.35;text-wrap:balance;color:var(--text);max-inline-size:22ch;margin-inline:auto;}
.intro-scroll{position:absolute;inset-block-end:4%;inset-inline:0;display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;margin-inline:auto;color:var(--gold-dim);pointer-events:auto;}
.intro-scroll svg{inline-size:14px;block-size:14px;}
.intro-scroll:hover{color:var(--gold);}
.brand-intro::before{content:'';position:absolute;z-index:-2;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 42% at 50% 42%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 85%);}
@media(max-width:1049px){
  /* the line carries a shadow so it reads over the network art */
  .intro-brand{inset-block-start:12%;inline-size:clamp(270px,65vw,500px);}
  .intro-line{inset-block-start:60%;font-size:28px;max-inline-size:19ch;text-shadow:0 2px 18px var(--ink-deep),0 0 3px var(--ink-deep);}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ---------- 9. FAQ: closed by default, clear expansion affordances ---------- */
#faq .container{display:block;}
#faq .section-head{text-align:center;margin-block-end:44px;}
#faq .section-head h2,#faq .section-head::before{margin-inline:auto;}
#faq .faq-wrap{inline-size:100%;max-inline-size:860px;display:grid;gap:12px;border:0;}
#faq .faq-item{border:1px solid var(--line);border-radius:16px;background:var(--ink-deep);overflow:hidden;transition:border-color .2s ease,background-color .2s ease;}
#faq .faq-item:hover{border-color:var(--line-gold);}
#faq .faq-item.open{border-color:var(--line-gold);background:var(--ink-warm);}
#faq .faq-q{padding:24px 28px;gap:24px;text-align:start;font-size:22px;line-height:1.4;}
#faq .faq-q:focus-visible{box-shadow:inset 0 0 0 2px var(--gold);border-radius:14px;}
#faq .faq-q .chev{display:none;}
#faq .faq-q::after{content:'+';display:grid;place-items:center;flex:0 0 36px;inline-size:36px;block-size:36px;border:1px solid var(--line-gold);border-radius:50%;color:var(--gold);font-family:var(--font-body);font-size:25px;font-weight:400;line-height:1;}
#faq .faq-item.open .faq-q::after{content:'−';background:var(--gold);color:var(--ink-deep);}
#faq .faq-a{visibility:hidden;}
#faq .faq-item.open .faq-a{visibility:visible;}
#faq .faq-a-inner{padding:0;min-block-size:0;}
#faq .faq-a-inner p{max-inline-size:none;padding-block:0 28px;padding-inline:28px 88px;font-size:18px;line-height:1.8;}
#faq .faq-ask{margin-block-start:32px;}
@media(max-width:600px){
  #faq .section-head{text-align:start;}
  #faq .section-head h2,#faq .section-head::before{margin-inline:0;}
  #faq .faq-q{padding:20px;gap:16px;font-size:20px;}
  #faq .faq-q::after{flex-basis:30px;inline-size:30px;block-size:30px;font-size:23px;}
  #faq .faq-a-inner p{padding-block-end:24px;padding-inline:20px;font-size:17px;}
}

/* ---------- 10. THE REBUILT PAGE'S OWN PIECES (2026-10-30, around the DNA) ---------- */
/* the two paths: by project, or the dedicated team (the team card is the pricing card the page has had since September).
   Since the owner's review of 2026-10-30 the two cards are exactly as wide and as tall as each other: two equal columns,
   and the row stretches both to the taller one */
.path-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;max-inline-size:1120px;margin-inline:auto;}
.path-card{padding:40px 36px;border-color:var(--line);background:var(--ink);}
.path-card h3{font-size:26px;}
.path-card p{margin-block-start:14px;color:var(--muted);line-height:1.7;}
.path-grid .offer-card{margin:0;text-align:start;align-items:stretch;}
.path-grid .offer-card .price{margin-block:18px 0;}
.path-grid .offer-lede{margin-block-start:4px;}
.path-grid .includes li{justify-content:flex-start;}
/* the same door for a business that is only starting (its drawing: section 13) */
.start-here .section-head{margin-block-end:0;}
.start-here .section-head p{max-inline-size:52ch;}
/* the footer's one line about VAT, and nothing beside a price */
.footer-vat{color:var(--muted);}
@media(max-width:1049px){
  .path-grid{grid-template-columns:1fr;}
}

/* ---------- 11. ROUND 5 (2026-10-30): the DNA step by step, the advisor's picture and points, the live example map ---------- */
:root{--map-rest:50svh;}
/* the DNA's five steps, each a lit numeral beside its words (the DNA site's own steps, in short) */
.dna-steps{display:grid;gap:18px;margin-block-start:26px;}
.dna-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;}
.dna-steps b{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:50%;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-family:var(--font-display);font-size:18px;line-height:1;box-shadow:0 0 0 5px var(--ink-deep),0 0 22px color-mix(in srgb,var(--gold) 40%,transparent);}
.dna-steps h3{font-size:20px;line-height:1.3;margin-block-end:4px;}
.dna-steps p{font-size:16px;line-height:1.65;color:var(--muted);max-inline-size:none;margin:0;}
.dna-get{margin-block-start:30px;padding-block-start:22px;border-block-start:1px solid var(--line-gold);}
.dna-get h3{font-size:20px;margin-block-end:10px;}
.dna-get ul{display:grid;gap:8px;}
.dna-get li{position:relative;padding-inline-start:16px;color:var(--muted);line-height:1.6;}
.dna-get li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:7px;block-size:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px color-mix(in srgb,var(--gold) 70%,transparent);}
.dna-get strong{color:var(--text);}
/* the advisor: the picture (the client with a phone, the advisor lit in the middle, the developers at their laptops behind
   him), centred in the advisor's own half of the page since the owner's review, then what he does for you */
.advisor-scene{margin:26px auto 0;max-inline-size:min(100%,520px);color:var(--gold);}
.advisor-scene svg{overflow:visible;inline-size:100%;block-size:auto;}
.advisor-scene .soft{stroke:var(--gold-2);}
.advisor-scene .fill{fill:color-mix(in srgb,var(--gold) 12%,transparent);}
.advisor-scene .halo{fill:color-mix(in srgb,var(--gold) 18%,transparent);}
.advisor-points{display:grid;gap:18px;margin-block-start:28px;}
.advisor-points li{padding-inline-start:18px;border-inline-start:2px solid var(--line-gold);}
.advisor-points h3{font-size:20px;line-height:1.3;margin-block-end:4px;color:var(--gold-2);}
.advisor-points p{margin:0;font-size:16px;line-height:1.65;color:var(--muted);max-inline-size:none;}
/* the example map (rebuilt on the owner's review of 2026-10-30): small inside the map's station, under its words, filling
   the station's own column; at rest behind its veil, which keeps every wheel, trackpad and finger with the page and opens
   the dialog on a click; "נסה בעצמך" is a real button, gold like the demo buttons of the examples' dialog */
.map-mini{margin-block-start:26px;}
.map-label{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--gold);margin-block-end:10px;max-inline-size:none;}
.map-frame{position:relative;border-radius:18px;overflow:hidden;background:var(--text);border:1px solid var(--line-gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 6%,transparent),0 0 60px color-mix(in srgb,var(--gold) 14%,transparent),var(--shadow-card);}
#dna-map{display:block;inline-size:100%;block-size:var(--map-rest);min-block-size:300px;border:0;background:var(--text);}
/* the fold at the frame's bottom, where the engine's info area is cut */
.map-frame::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;block-size:44px;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--text),transparent);}
.map-veil{position:absolute;inset:0;z-index:2;background:transparent;cursor:zoom-in;}
.map-under{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-block-start:18px;}
.map-try{min-block-size:52px;padding-inline:30px;background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 10px 30px -16px var(--gold);}
.map-try:hover{background:var(--gold-2);border-color:var(--gold-2);}
.map-try:active{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(1px);}
.map-cap{font-size:15px;line-height:1.55;color:var(--muted);max-inline-size:none;margin:0;flex:1 1 220px;}
/* the dialog: the map large over most of the screen, its title and a clear close control on top, how to use it underneath */
.map-modal{position:fixed;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:2.5svh 2vw;border:0;background:color-mix(in srgb,var(--ink-deep) 86%,transparent);color:var(--text);}
.map-modal[open]{display:grid;place-items:center;}
.map-modal::backdrop{background:transparent;}
body:has(.map-modal[open]){overflow:hidden;}
.map-modal-panel{display:flex;flex-direction:column;inline-size:min(100%,1480px);block-size:100%;padding:16px 18px 14px;border:1px solid var(--line-gold);border-radius:20px;background:var(--ink-warm);box-shadow:var(--shadow-card);text-align:start;}
.map-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-end:12px;}
.map-modal-titles .map-label{margin-block-end:2px;}
.map-modal-head h3{font-size:clamp(20px,2vw,26px);line-height:1.2;}
.map-modal-close{flex:0 0 auto;display:flex;align-items:center;justify-content:center;inline-size:48px;block-size:48px;border:1px solid var(--line-gold-strong);border-radius:50%;background:var(--ink);color:var(--gold);transition:background-color .18s ease,color .18s ease;}
.map-modal-close:hover{background:var(--gold);color:var(--ink);}
.map-modal-close:focus-visible{border-radius:50%;}
.map-modal-close svg{inline-size:22px;block-size:22px;}
.map-modal-frame{flex:1 1 auto;min-block-size:0;border-radius:14px;overflow:hidden;background:var(--text);border:1px solid var(--line-gold);}
.map-modal-frame iframe{display:block;inline-size:100%;block-size:100%;border:0;background:var(--text);}
.map-modal-foot{display:grid;gap:10px;margin-block-start:12px;}
.map-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;}
.map-tips li{position:relative;padding-inline-start:16px;color:var(--muted);line-height:1.5;font-size:14px;max-inline-size:none;}
.map-tips li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.55em;inline-size:7px;block-size:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px color-mix(in srgb,var(--gold) 70%,transparent);}
.map-modal-foot .map-cap{font-size:13px;}
@media(max-width:900px){
  .map-modal{padding:8px;}
  .map-modal-panel{padding:12px 12px 10px;border-radius:16px;}
  .map-modal-foot{display:none;}
}
@media(min-width:1050px){
  /* the small map fills the station's column under its words, a little under half a screen tall */
  :root{--map-rest:clamp(320px,46svh,480px);}
  .advisor-scene{margin-block-start:34px;}
}

/* ---------- 12. THE OWNER'S REVIEW (2026-10-30): the DNA's subtitle and its invitation, the advisor's picture in motion,
   the example projects, the one-system heading, the drawing of a business that is not open yet ---------- */
/* a station's opening paragraph is its heading's subtitle: larger, right under it, on the heading's own edge (the map's
   since the owner's second review of 2026-11-01; the DNA's own went on that review) */
.section-head .station-sub{margin-block-start:14px;max-inline-size:none;max-width:none;font-family:var(--font-display);font-size:clamp(21px,1.6vw,25px);font-weight:600;line-height:1.55;color:color-mix(in srgb,var(--text) 88%,transparent);}
/* the way to the DNA site: a black-and-gold panel, the whole of it the link, with a double helix that turns at its end */
.dna-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:22px;margin-block-start:30px;padding-block:18px;padding-inline:26px 18px;border:1px solid var(--line-gold);border-radius:18px;background:linear-gradient(110deg,var(--ink-warm),var(--ink) 72%);box-shadow:0 18px 40px -28px var(--ink-deep),inset 0 1px 0 color-mix(in srgb,var(--gold) 18%,transparent);color:var(--text);text-decoration:none;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.dna-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 14%,transparent) 50%,transparent 70%);transform:translateX(100%);transition:transform .9s ease;}
.dna-cta:hover{border-color:var(--line-gold-strong);transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 26%,transparent),0 22px 50px -26px color-mix(in srgb,var(--gold) 50%,transparent);}
.dna-cta:hover::before{transform:translateX(-100%);}
.dna-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.dna-cta-text{display:grid;gap:4px;flex:1 1 auto;min-inline-size:0;}
.dna-cta-title{font-family:var(--font-display);font-size:clamp(20px,1.6vw,24px);font-weight:800;line-height:1.25;color:var(--text);}
.dna-cta-line{font-size:16px;line-height:1.5;color:var(--muted);}
.dna-cta-helix{flex:0 0 auto;display:grid;place-items:center;inline-size:76px;block-size:76px;border-radius:50%;border:1px solid var(--line-gold-strong);background:radial-gradient(circle,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%),var(--ink-deep);color:var(--gold);box-shadow:0 0 24px color-mix(in srgb,var(--gold) 22%,transparent);transition:box-shadow .25s ease;}
.dna-cta:hover .dna-cta-helix{box-shadow:0 0 34px color-mix(in srgb,var(--gold) 45%,transparent);}
.dna-cta-helix svg{inline-size:34px;block-size:56px;overflow:visible;}
/* the gold double helix (the owner's second review, 2026-11-01) in the DNA panel's ring (the one in the doorway of the shop
   of #start went with that drawing on his follow-up the same day, section 13): two strands, each bright for the half turn
   it is in front and dim for the half turn behind, and the rungs between them. It turns by sliding: a helix turning on its
   axis looks exactly like its pattern moving along the axis, so the pattern is drawn a period longer than its window on each
   side and translated by one period, which loops with no seam and moves by transform alone (never stroke-dashoffset, which
   Site Factory's harness rates a layout property) */
.helix-front{stroke:var(--gold);stroke-width:2.6;opacity:.95;}
.helix-back{stroke:var(--gold);stroke-width:2.2;opacity:.42;}
.helix-rung{stroke:var(--gold);stroke-width:1.8;opacity:.6;}
/* the advisor's heading and its gold rule stand in the middle of the advisor's half (the --center head of section 6) */
/* the advisor's picture plays in, each time the page's script starts it (israel.html): the client and the phone, the line
   to the advisor, the advisor lit, the branches out to the developers, the developers at their laptops */
@media(prefers-reduced-motion:no-preference){
  .advisor-scene .client,.advisor-scene .halo,.advisor-scene .advisor,.advisor-scene .developer,.advisor-scene .laptop{transform-box:fill-box;transform-origin:center;}
  .advisor-scene.is-playing .client{animation:adv-rise .45s ease-out both;}
  .advisor-scene.is-playing .halo-client{animation:adv-glow .6s ease-out .15s both;}
  /* the line and the branches grow out of the advisor's end, the scale of a line from its first point being its drawing:
     the line from its right end, the two upper branches from their lower right corner, the two lower from their upper */
  .advisor-scene .link,.advisor-scene .branch{transform-box:fill-box;}
  .advisor-scene .link{transform-origin:100% 50%;}
  .advisor-scene .branch{transform-origin:100% 100%;}
  .advisor-scene .branch:nth-of-type(n+3){transform-origin:100% 0;}
  .advisor-scene.is-playing .link{animation:adv-draw .35s ease-in-out .45s both;}
  .advisor-scene.is-playing .advisor{animation:adv-wake .4s ease-out .65s both;}
  .advisor-scene.is-playing .halo-advisor{animation:adv-glow .7s ease-out .7s both;}
  .advisor-scene.is-playing .branch{animation:adv-draw .4s ease-out calc(1s + var(--i) * .12s) both;}
  .advisor-scene.is-playing .developer{animation:adv-wake .45s ease-out calc(1.25s + var(--i) * .12s) both;}
  .advisor-scene.is-playing .laptop{animation:adv-wake .45s ease-out calc(1.3s + var(--i) * .12s) both;}
  /* one period of the helix: 46 units */
  .dna-cta-helix .helix-turn{animation:helix-run 3.4s linear infinite;}
}
@keyframes adv-rise{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
@keyframes adv-glow{0%{opacity:0;transform:scale(.4);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
@keyframes adv-draw{from{transform:scale(0);}to{transform:none;}}
@keyframes adv-wake{from{opacity:.15;}to{opacity:1;}}
@keyframes helix-run{from{transform:translateY(0);}to{transform:translateY(-46px);}}
/* the examples carousel (script.js section 2): a mouse drags the ring like a finger */
.slider-track.is-dragging{cursor:grabbing;user-select:none;}
.slider-track.is-dragging .example-card{pointer-events:none;}
.slider-track img{-webkit-user-drag:none;}
/* the project card's three examples, each tagged "לדוגמה" with its example price and work days; since the owner's second
   review (2026-11-01) each opens its dialog: the name is the button, the whole item the click target, and a cue says so */
.path-card{display:flex;flex-direction:column;}
.path-examples{display:grid;gap:12px;margin-block-start:24px;}
.path-example{position:relative;padding:16px 18px;border:1px solid var(--line-gold);border-radius:14px;background:linear-gradient(160deg,var(--ink-warm),var(--ink-deep));text-align:start;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.path-example:hover{border-color:var(--line-gold-strong);transform:translateY(-2px);box-shadow:0 14px 30px -22px var(--gold);}
.path-example:has(.path-example-open:focus-visible){outline:2px solid var(--gold);outline-offset:3px;}
.path-example-tag{position:absolute;inset-block-start:14px;inset-inline-end:14px;font-family:var(--font-display);font-size:12px;font-weight:700;line-height:1.4;color:var(--gold);border:1px solid var(--line-gold);border-radius:999px;padding:3px 10px;}
.path-example h4{padding-inline-end:84px;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.3;color:var(--text);}
/* the name is the button, in the heading's own face; its focus ring is the item's (above), so the ring never cuts the name */
.path-example-open{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:start;cursor:pointer;}
.path-example-open:focus-visible{outline:0;}
.path-example p{margin-block-start:6px;margin-inline:0;max-inline-size:none;max-width:none;font-size:15px;line-height:1.6;color:var(--muted);}
.path-example .path-example-terms,.project-modal .path-example-terms{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-block-start:10px;}
.path-example-terms bdi{font-family:var(--font-display);font-size:20px;font-weight:800;line-height:1.2;color:var(--gold-2);}
.path-example-terms span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text);}
.path-example-terms span::before{content:'';inline-size:5px;block-size:5px;border-radius:50%;background:var(--gold);}
.path-example-cue{display:block;margin-block-start:10px;font-size:var(--size-small);font-weight:700;color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
/* the project dialog: the examples' dialog with a tag over the name, the story's two lists, and the item's terms with the
   demo's button at its foot */
.project-modal-tag{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--gold);letter-spacing:0;}
.project-modal .example-modal-title{margin-block-start:6px;padding-inline:0 var(--tap);text-align:start;}
.project-modal-body{margin-block-start:18px;}
.project-modal-body .project-lead{font-size:18px;line-height:1.75;color:var(--text);max-inline-size:none;margin-inline:0;}
.project-modal-body h5{margin-block:22px 10px;font-family:var(--font-display);font-size:17px;font-weight:700;line-height:1.3;color:var(--gold-2);}
.project-modal-body ul{display:grid;gap:8px;}
.project-modal-body li{position:relative;padding-inline-start:16px;color:var(--muted);line-height:1.65;max-inline-size:none;}
.project-modal-body li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:7px;block-size:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px color-mix(in srgb,var(--gold) 70%,transparent);}
.project-modal-terms{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-block-start:26px;padding-block-start:22px;border-block-start:1px solid var(--line-gold);}
.project-modal-terms .path-example-tag{position:static;}
.project-modal-terms .path-example-terms{margin:0;}
.project-modal-terms .example-solution-cta{margin:0;margin-inline-start:auto;}
/* the one-system heading: centred on the page, and wide enough for two lines (it was three in a narrower box) */
#why .section-head h2{max-inline-size:none;max-width:none;}
/* ---------- 13. THE OWNER'S FOLLOW-UP (2026-11-01): #start's drawing, the blueprint and the building ---------- */
/* the business that is not open yet: the words, and beside them drawing 2 of the owner's choosing page
   (review/start-art/round-1.html; his choice of 2026-11-01, "as it is"): a blueprint that unrolls, its walls drawn by a
   pencil, and the building that rises from the plan floor by floor, its windows lighting, trees and a person arriving; a
   14s loop on transform, opacity and clip-path alone, and in reduced motion the finished building, still. The .art-plan
   rules below are the choosing page's, moved over unchanged (the page's own grid on the sheet made the figure's blueprint
   grid of the shop drawing a second grid, so that ::before went with the shop). The figure is 451px wide, the width he saw
   the drawing at there (a third of 1482); the text column yields the few px the row then lacks. It runs only while #start
   is near the screen (script.js section 2b sets data-off-screen). On a phone the drawing sits faintly behind the words. */
.start-here{overflow-x:clip;}
.start-here .section-head h2{max-inline-size:10em;}
.start-row{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:center;align-items:center;column-gap:80px;}
.start-art{margin:0;inline-size:451px;}
.start-art svg{display:block;inline-size:100%;block-size:auto;overflow:visible;}
.start-art[data-off-screen] .art-plan *{animation-play-state:paused;}
.art-plan .ap-thick{fill:color-mix(in srgb,var(--gold-deep) 30%,var(--ink-deep));}
.art-plan .ap-sheet{stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round;}
.art-plan .ap-grid{stroke:color-mix(in srgb,var(--gold) 12%,transparent);stroke-width:.8;}
.art-plan .ap-border{stroke:color-mix(in srgb,var(--gold) 46%,transparent);stroke-width:1;}
.art-plan .ap-thin{stroke:color-mix(in srgb,var(--gold-2) 72%,transparent);stroke-width:1;}
.art-plan .ap-thinring{stroke:color-mix(in srgb,var(--gold-2) 72%,transparent);stroke-width:1;}
.art-plan .ap-dash{stroke-dasharray:4 4;}
.art-plan .ap-plan{stroke:var(--gold-2);stroke-width:1.8;stroke-linecap:round;}
.art-plan .ap-dash2{stroke-dasharray:7 5;}
.art-plan .ap-title{fill:color-mix(in srgb,var(--gold) 9%,transparent);stroke:color-mix(in srgb,var(--gold-2) 72%,transparent);stroke-width:1;}
.art-plan .ap-compass{fill:var(--gold);}
.art-plan .ap-wall{stroke:var(--gold-2);stroke-width:3;stroke-linecap:round;}
.art-plan .ap-shadow{fill:color-mix(in srgb,var(--ink-deep) 62%,transparent);}
.art-plan .ap-face-l{fill:url(#ap-l);}
.art-plan .ap-face-r{fill:url(#ap-r);}
.art-plan .ap-top{fill:color-mix(in srgb,var(--gold-deep) 62%,var(--ink-warm));stroke:var(--gold);stroke-width:1.1;stroke-linejoin:round;}
.art-plan .ap-roofin{fill:color-mix(in srgb,var(--gold-deep) 26%,var(--ink-deep));}
.art-plan .ap-edge{stroke:color-mix(in srgb,var(--gold) 76%,transparent);stroke-width:1.1;}
.art-plan .ap-win{fill:var(--ink-deep);stroke:color-mix(in srgb,var(--gold) 60%,transparent);stroke-width:.9;stroke-linejoin:round;}
.art-plan .ap-door{fill:var(--ink-deep);stroke:var(--gold);stroke-width:1;}
.art-plan .ap-lit{fill:url(#ap-litg);}
.art-plan .ap-mull{stroke:color-mix(in srgb,var(--ink-deep) 70%,transparent);stroke-width:.9;}
.art-plan .ap-awn-a{fill:var(--text);}
.art-plan .ap-awn-b{fill:var(--gold-deep);}
.art-plan .ap-awn-edge{stroke:var(--gold-2);stroke-width:1.2;stroke-linecap:round;}
.art-plan .ap-trunk{stroke:var(--gold-deep);stroke-width:2.6;stroke-linecap:round;}
.art-plan .ap-crown{fill:var(--gold-deep);}
.art-plan .ap-crown-dk{fill:color-mix(in srgb,var(--gold-deep) 62%,var(--ink-warm));}
.art-plan .ap-crown-lit{fill:color-mix(in srgb,var(--gold-2) 64%,transparent);}
.art-plan .ap-p-legs{stroke:var(--gold-2);stroke-width:2.8;stroke-linecap:round;}
.art-plan .ap-p-torso{fill:var(--text);}
.art-plan .ap-p-head{fill:var(--gold-2);}
.art-plan .ap-person{transform:translate(185.4px,207.5px);}
.art-plan .ap-roll-shadow{stroke:color-mix(in srgb,var(--ink-deep) 58%,transparent);stroke-width:14;stroke-linecap:round;}
.art-plan .ap-roll{stroke:url(#ap-rollg);stroke-width:21;stroke-linecap:round;}
.art-plan .ap-roll-lit{stroke:color-mix(in srgb,var(--text) 70%,transparent);stroke-width:3;stroke-linecap:round;}
.art-plan .ap-roll-end{fill:var(--ink-warm);stroke:var(--gold-2);stroke-width:1.2;}
.art-plan .ap-roll-spiral{stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;}
.art-plan .ap-pencil{transform:translate(196.7px,267px) rotate(-62deg);}
.art-plan .ap-p-body{fill:var(--gold);}
.art-plan .ap-p-shade{fill:var(--gold-deep);}
.art-plan .ap-p-wood{fill:var(--text);}
.art-plan .ap-p-lead{fill:var(--ink-deep);}
.art-plan .ap-p-band{fill:var(--muted);}
.art-plan .ap-p-eraser{fill:var(--gold-2);}
@media(prefers-reduced-motion:no-preference){
  .art-plan .ap-all{animation:ap-all 14s linear infinite;}
  .art-plan .ap-paper{animation:ap-paper 14s cubic-bezier(.35,.1,.45,1) infinite;}
  .art-plan .ap-rollwrap{animation:ap-rollwrap 14s cubic-bezier(.35,.1,.45,1) infinite;}
  .art-plan .ap-details{animation:ap-details 14s linear infinite;}
  .art-plan .ap-w0{animation:ap-w0 14s linear infinite;}
  .art-plan .ap-w1{animation:ap-w1 14s linear infinite;}
  .art-plan .ap-w2{animation:ap-w2 14s linear infinite;}
  .art-plan .ap-w3{animation:ap-w3 14s linear infinite;}
  .art-plan .ap-pencil{animation:ap-pencil 14s linear infinite;}
  .art-plan .ap-shadow{animation:ap-shadow 14s linear infinite;}
  .art-plan .ap-f1{animation:ap-f1 14s cubic-bezier(.3,.7,.3,1) infinite;}
  .art-plan .ap-f2{animation:ap-f2 14s cubic-bezier(.3,.7,.3,1) infinite;}
  .art-plan .ap-f3{animation:ap-f3 14s cubic-bezier(.3,.7,.3,1) infinite;}
  .art-plan .ap-awn{animation:ap-awn 14s linear infinite;}
  .art-plan .ap-la{animation:ap-la 14s linear infinite;}
  .art-plan .ap-lb{animation:ap-lb 14s linear infinite;}
  .art-plan .ap-lc{animation:ap-lc 14s linear infinite;}
  .art-plan .ap-pool{animation:ap-pool 14s linear infinite;}
  .art-plan .ap-t1{animation:ap-t1 14s cubic-bezier(.3,1.4,.5,1) infinite;}
  .art-plan .ap-t2{animation:ap-t2 14s cubic-bezier(.3,1.4,.5,1) infinite;}
  .art-plan .ap-t3{animation:ap-t3 14s cubic-bezier(.3,1.4,.5,1) infinite;}
  .art-plan .ap-person{animation:ap-person 14s linear infinite;}
}
@keyframes ap-all{0%,93%{opacity:1}98%,100%{opacity:0}}
@keyframes ap-paper{0%{clip-path:polygon(208.8px 79px,214px 82px,28.7px 195px,23.5px 192px)}11%,100%{clip-path:polygon(208.8px 79px,456.5px 222px,271.2px 335px,23.5px 192px)}}
@keyframes ap-rollwrap{0%{transform:translate(-242.5px,-140px)}11%,100%{transform:none}}
@keyframes ap-details{0%,30%{opacity:0}36%,100%{opacity:1}}
@keyframes ap-w0{0%,13%{transform:scale(0)}17.5%,100%{transform:scale(1)}}
@keyframes ap-w1{0%,17.5%{transform:scale(0)}21.5%,100%{transform:scale(1)}}
@keyframes ap-w2{0%,21.5%{transform:scale(0)}26%,100%{transform:scale(1)}}
@keyframes ap-w3{0%,26%{transform:scale(0)}30%,100%{transform:scale(1)}}
@keyframes ap-pencil{0%,10%{transform:translate(85.9px,183px) rotate(34deg);opacity:0}13%{transform:translate(155.1px,173px) rotate(34deg);opacity:1}17.5%{transform:translate(250.4px,228px) rotate(34deg);opacity:1}21.5%{transform:translate(328.3px,183px) rotate(34deg);opacity:1}26%{transform:translate(233.1px,128px) rotate(34deg);opacity:1}30%{transform:translate(155.1px,173px) rotate(34deg);opacity:1}36%,100%{transform:translate(196.7px,267px) rotate(-62deg);opacity:1}}
@keyframes ap-shadow{0%,36%{opacity:0}60%,100%{opacity:1}}
@keyframes ap-f1{0%,36%{transform:translateY(44px);opacity:0}36.1%{transform:translateY(44px);opacity:1}46%,100%{transform:none;opacity:1}}
@keyframes ap-f2{0%,46%{transform:translateY(38px);opacity:0}46.1%{transform:translateY(38px);opacity:1}55%,100%{transform:none;opacity:1}}
@keyframes ap-f3{0%,55%{transform:translateY(21px);opacity:0}55.1%{transform:translateY(21px);opacity:1}60%,100%{transform:none;opacity:1}}
@keyframes ap-awn{0%,44%{opacity:0}47%,100%{opacity:1}}
@keyframes ap-la{0%,60%{opacity:0}62%,100%{opacity:1}}
@keyframes ap-lb{0%,63%{opacity:0}65%,100%{opacity:1}}
@keyframes ap-lc{0%,66%{opacity:0}68%,100%{opacity:1}}
@keyframes ap-pool{0%,66%{opacity:0}70%,100%{opacity:1}}
@keyframes ap-t1{0%,60%{transform:scale(0)}65%,100%{transform:scale(1)}}
@keyframes ap-t2{0%,62%{transform:scale(0)}67%,100%{transform:scale(1)}}
@keyframes ap-t3{0%,64%{transform:scale(0)}69%,100%{transform:scale(1)}}
@keyframes ap-person{0%,66%{transform:translate(127.4px,241px);opacity:0}67%{transform:translate(127.4px,241px);opacity:1}68.3%{transform:translate(133.2px,236.1px);opacity:1}69.6%{transform:translate(139px,234.3px);opacity:1}70.9%{transform:translate(144.8px,229.4px);opacity:1}72.2%{transform:translate(150.6px,227.6px);opacity:1}73.5%{transform:translate(156.4px,222.7px);opacity:1}74.8%{transform:translate(162.2px,220.9px);opacity:1}76.1%{transform:translate(168px,216px);opacity:1}77.4%{transform:translate(173.8px,214.2px);opacity:1}78.7%{transform:translate(179.6px,209.3px);opacity:1}80%{transform:translate(185.4px,207.5px);opacity:1}100%{transform:translate(185.4px,207.5px);opacity:1}}
@media(max-width:900px){
  .start-row{display:block;position:relative;}
  .start-here .section-head{position:relative;z-index:1;}
  /* the paragraph runs over the faint drawing here, and over its bright parts --muted reads 3.8:1 (Site Factory's QA of
     2026-11-01, on the real pixels): half way to --text it holds 4.5 at every moment of the loop, on each line's 95th
     percentile (qa/story.js) and measured once against the single brightest pixel too. The drawing itself stays as it is. */
  .start-here .section-head p{color:color-mix(in srgb,var(--text) 50%,var(--muted));}
  .start-art{position:absolute;z-index:0;inset-inline-end:var(--gutter);inset-block-start:50%;inline-size:min(60%,280px);transform:translateY(-50%);opacity:.3;pointer-events:none;}
}
@media(max-width:600px){
  .dna-cta{gap:16px;padding-inline:20px 14px;}
  .dna-cta-helix{inline-size:62px;block-size:62px;}
  .dna-cta-helix svg{inline-size:26px;block-size:44px;}
  .path-example h4{font-size:17px;}
}
/* ---------- 14. WITHOUT JAVASCRIPT (Site Factory's QA of 2026-11-01): the words are all there, and nothing here reaches a
   visitor whose script runs. The ring stacks its cards for script.js to place, so here they are a plain grid with their
   stories under them and no arrows or dots; the FAQ's answers stand open; the three projects' stories stand under them; the
   live map needs its engine's script, so its frame steps aside. No text is hidden here, not even a cue that leads nowhere
   without script: the render harness's hiddenWithoutJs rates any of it critical. qa/story.js measures it. ---------- */
@media(scripting:none){
  .slider-track{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--slider-gap);align-items:start;}
  .slider-card{grid-area:auto;inline-size:auto;flex-direction:column;gap:12px;will-change:auto;}
  .slider-nav,.map-frame{display:none;}
  .example-detail[hidden],.path-example-detail[hidden]{display:block;}
  #faq .faq-a{visibility:visible;grid-template-rows:1fr;}
  #faq .faq-q::after{display:none;}
}