/* ==========================================================================
   Tagishoti — landing page
   Palette is the app's design-system palette (app/src/app/theme.css) so the
   landing and the product read as one product.

   Structure: the hero holds one full screen. Everything under it is a flowing
   section sized by its own content, so a section can carry a heading, its copy
   AND a product mockup without any of the three being squeezed.

   Colour strategy is committed, not restrained: the closing section is drenched
   in the accent and the "why" section is near-black. Two high-contrast anchors
   in a warm off-white page, rather than a pink button on beige.
   ========================================================================== */
:root{
  --bg:#FCF6F8;
  --bg-soft:#F7EAEF;
  --ink:#26141B;
  --ink-soft:#75606A;
  --accent:#D6336C;
  --accent-down:#B82458;
  --accent-tint:rgba(214,51,108,.13);
  --accent-soft:#FBE7EF;
  --glow:rgba(214,51,108,.10);
  /* the drenched closing section runs a shade deeper than the button accent:
     white on #D6336C is 4.6:1, which leaves nothing for the secondary line
     under it. On this it is 6.1:1 and the whole block clears AA. */
  --cta-bg:#B82458;
  --dark:#24101A;
  --dark-panel:#331823;
  --dark-ink:#FCF6F8;
  --dark-soft:#D3B4C2;
  --dark-line:#4A2A38;
  --line:#EFDCE4;
  --dash:#DEC2CF;
  --surface:#FFFFFF;
  --surface-2:#FDF7F9;
  --on-accent:#FFFFFF;
  --sticky-bg:rgba(252,246,248,.94);
  --head-bg:rgba(252,246,248,.72);
  --head-bg-solid:rgba(252,246,248,.92);
  --sample-bg:#FFF3BF;
  --sample-ink:#6B4E00;
  /* The pale ground the pricing illustration is drawn on, sampled from the
     file. The handoff band is painted in it so the picture has no edge to
     show — see .handoff. Dark mode cannot match a light illustration, so it
     falls back to the soft surface and lets the feathered edge do the work. */
  --art-ground:#FDECF2;
  --shot-shadow:0 2px 6px rgba(38,20,27,.05), 0 26px 60px -28px rgba(38,20,27,.30);
  --shot-shadow-lift:0 3px 10px rgba(38,20,27,.07), 0 44px 90px -34px rgba(38,20,27,.38);
  --success:#1B7A5E;
  --success-soft:#E1F3EC;
  --sticky-h:0px;
  --head-h:64px;
  --ease:cubic-bezier(.22,1,.36,1);
  /* the phone shell around the step loops. Deliberately outside the theme:
     a handset is a dark object in a lit room and in a dark one alike, so this
     is the one colour the dark-mode block does not restate. */
  --phone-shell:#1C1016;
  /* How much of the section after the argument is left showing when you land
     on the argument from the nav. Enough for its first line — the question —
     to be readable, so there is a reason to keep going. */
  --peek:clamp(124px,19vh,220px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;overflow-x:clip;
  /* an anchor must land below the fixed header, not underneath it */
  scroll-padding-top:calc(var(--head-h) + 18px);
}
body{
  font-family:'Heebo',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.6;overflow-x:clip;
}
h1,h2,h3,.btn,.eyebrow{font-family:'Rubik',sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,44px);width:100%}
.wrap-narrow{max-width:820px}
.sr-only{
  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;
}
.ltr{direction:ltr;unicode-bidi:isolate}
.en{font-family:'Rubik',sans-serif;font-weight:800;direction:ltr;unicode-bidi:isolate}

/* ==========================================================================
   FIXED HEADER
   Translucent and blurred so the page keeps moving underneath it; it gains a
   border and a stronger backdrop only once you have scrolled past the hero
   headline, so it never draws a line across the first screen.
   ========================================================================== */
.site-head{
  position:fixed;inset-inline:0;top:0;z-index:60;
  height:var(--head-h);
  background:var(--head-bg);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.site-head.solid{
  background:var(--head-bg-solid);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(38,20,27,.5);
}
.head-inner{
  height:100%;display:flex;align-items:center;gap:clamp(10px,2vw,22px);
}
.brand{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font:900 1.1rem 'Rubik',sans-serif;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
}
.brand:hover{color:var(--accent-down)}
.brand .eyebrow-mark{width:26px;height:26px;border-radius:8px}

/* anchor nav — every item scrolls, nothing navigates away */
.head-nav{display:flex;align-items:center;gap:clamp(4px,1vw,9px);margin-inline-end:auto}
.head-nav a{
  position:relative;text-decoration:none;
  font:600 .95rem 'Heebo',sans-serif;color:var(--ink-soft);
  padding:8px;border-radius:9px;white-space:nowrap;
  transition:color .18s ease, background .18s ease;
}
.head-nav a:hover{color:var(--ink);background:var(--accent-tint)}
/* The section you are in is lit, not merely darker: it takes the accent tint
   as a ground as well as full ink and a rule under it. One of the three would
   be a hint; together they are an answer to "where am I". */
.head-nav a.current{color:var(--ink);background:var(--accent-tint)}
.head-nav a.current::after{
  content:"";position:absolute;inset-inline:10px;bottom:2px;height:2px;
  background:var(--accent);border-radius:2px;
}
.head-tools{display:flex;align-items:center;gap:8px;flex:none}
.head-cta{
  display:inline-flex;align-items:center;
  font:800 .92rem 'Rubik',sans-serif;text-decoration:none;
  padding:9px 18px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  border:2px solid var(--accent);
  transition:background .16s ease, border-color .16s ease, transform .18s var(--ease);
}
.head-cta:hover{background:var(--accent-down);border-color:var(--accent-down);transform:translateY(-1px)}

/* Desktop only: the header spans the window rather than keeping to the 1120px
   the page columns hold to. The brand goes out to one edge and the tools to the
   other — the right and the left in Hebrew, the left and the right in English,
   which the logical properties already here do on their own — and the room that
   opens between them goes to the nav, whose items were squeezed down to 8px of
   padding and 9px of gap to survive a narrower bar. Below the nav breakpoint
   this reverts to the page column: there is nothing to spread at that width. */
@media (min-width:800px){
  /* Three columns rather than a row: the brand at one edge, the tools at the
     other, and the nav in the middle column, which centres it on the page
     instead of leaving it huddled against the brand. The side columns are
     equal fractions, so the centre stays the centre however wide the brand or
     the tools happen to be. */
  .head-inner{
    max-width:none;padding-inline:clamp(24px,3vw,56px);
    display:grid;grid-template-columns:1fr auto 1fr;
  }
  .brand{justify-self:start}
  .head-nav{gap:clamp(6px,.9vw,16px);margin-inline:0;justify-self:center}
  .head-tools{justify-self:end}
  .head-nav a{padding:8px 12px}
  /* the current-section rule is inset to the link's padding, so it has to
     follow it */
  .head-nav a.current::after{inset-inline:10px}
  .head-tools{gap:12px}
}

/* The hamburger and its panel exist only below the nav breakpoint. That
   breakpoint is set by what the header actually needs, and it moves every time
   a nav item does. It was 940 at three links, 1110 at four, and 1270 at six.

   Measure it in the browser rather than by adding up labels: the desktop
   header is the `1fr auto 1fr` grid below, so the number that matters is where
   its three resolved tracks plus gaps stop fitting the content box — and
   HEBREW is the binding case, not English. At seven links Hebrew stops fitting
   at 1303 and English at 1229, so 1380 kept roughly the ~90px of slack the
   six link version had over its own 1182.

   That nav is three links now - pricing, community, contact - and 1380 was
   dropping a 1366px laptop to a hamburger for a bar needing half the room.

   Re-measured against the grid layout below, and measured at FOUR links, with
   the blog link the content branch adds: that is the wider case, so a number
   that holds there holds for the three we ship today. At four, ENGLISH is the
   binding case rather than Hebrew - the Hebrew labels are shorter than
   Pricing / Blog / Community / Contact. English stops fitting at 698 and
   Hebrew at 672, so 800 keeps the same ~90px of slack the old number was
   chosen for - 104px in English, 120px in Hebrew.

   That is also why the seventh link is labelled הקהילה / Community rather than
   קהילת הוואטסאפ / WhatsApp Community, which the section still says in full:
   the long form needs 1370, and a 1460 breakpoint would drop a 1440px laptop
   to the hamburger. The glyph carries the rest of the name.

   Move this and the matchMedia in site.js together. */
.nav-toggle{display:none}
@media (max-width:799px){
  .head-nav{
    position:fixed;inset-inline:0;top:var(--head-h);
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--head-bg-solid);
    backdrop-filter:blur(16px) saturate(1.6);
    -webkit-backdrop-filter:blur(16px) saturate(1.6);
    border-bottom:1px solid var(--line);
    padding:10px clamp(20px,4vw,44px) 18px;
    margin:0;
    /* Six links at 42px each stand 383px tall. A phone held sideways is 360px
       from top to bottom, so the last one — and on some handsets the last two —
       sat below the screen with no way to reach them: the panel is fixed, so
       the page behind it cannot scroll them into view. It carries its own
       scroll now, bounded by what is actually left under the header. */
    max-height:calc(100svh - var(--head-h));
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 26px 44px -30px rgba(38,20,27,.6);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease, transform .26s var(--ease), visibility .26s;
  }
  .head-nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .head-nav a{padding:12px 12px;font-size:1.02rem;border-radius:11px}
  .head-nav a.current::after{inset-inline:auto;inset-inline-start:12px;width:18px;bottom:8px}
  .nav-toggle{
    display:inline-grid;place-items:center;flex:none;order:9;
    width:38px;height:38px;padding:0;cursor:pointer;
    background:var(--surface);color:var(--ink);
    border:2px solid var(--ink);border-radius:11px;
  }
  .nav-toggle span{
    display:block;width:16px;height:2px;background:currentColor;border-radius:2px;
    position:relative;transition:transform .24s var(--ease), background .1s ease;
  }
  .nav-toggle span::before,.nav-toggle span::after{
    content:"";position:absolute;inset-inline:0;height:2px;background:currentColor;border-radius:2px;
    transition:transform .24s var(--ease);
  }
  .nav-toggle span::before{top:-5px}
  .nav-toggle span::after{top:5px}
  .nav-toggle[aria-expanded="true"] span{background:transparent}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
  .brand{margin-inline-end:auto}
  .head-cta{padding:8px 14px;font-size:.86rem}
}
@media (max-width:560px){
  .head-cta{display:none}   /* the sticky bottom bar already carries the CTA here */
}
@media (prefers-reduced-motion:reduce){
  .head-nav{transition:none}
}

/* ==========================================================================
   SECTIONS
   The hero is the one full-screen pane. Everything below flows: padding sets
   the rhythm and content decides the height.
   ========================================================================== */
.sect{position:relative;padding:clamp(66px,9.5vh,126px) 0;overflow:clip}
.sect-tight{padding-block:clamp(52px,7vh,92px)}

/* Every section opens on a centred head that is free to use the page's width.
   The measure is a ceiling, not a column: short headings sit on one line,
   long ones break where `text-wrap:balance` puts them rather than where a
   narrow box forces them. */
.sect-head{
  max-width:min(100%,62rem);
  margin-inline:auto;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.sect-head .kicker{align-self:center}
.sect-head .sect-lede{margin-inline:auto;text-align:center}

/* the deeper accent, not the button accent: at 12.8px the brighter one is
   under 4.5:1 on the section backgrounds */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font:800 .8rem 'Rubik',sans-serif;letter-spacing:.04em;
  color:var(--accent-down);margin-bottom:14px;
}
.kicker::before{content:"";width:20px;height:2px;background:var(--accent);border-radius:2px}

h2{
  font-size:clamp(1.8rem,4.4vw,3.1rem);font-weight:900;line-height:1.2;
  letter-spacing:-.012em;text-wrap:balance;
}
h2 em{font-style:normal;color:var(--accent)}
.sect-lede{
  font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-soft);
  max-width:52ch;margin-top:16px;
}

/* ---------- shared bits ---------- */
.u{position:relative;white-space:nowrap;display:inline-block;--u-line:var(--accent)}
.u svg{position:absolute;left:2%;bottom:-0.08em;width:96%;height:.16em}
.u svg path{stroke:var(--u-line);stroke-width:7;fill:none;stroke-linecap:round}

/* The dash that joins the two halves of each headline line.

   Both lines are built the same way — a phrase, a dash, a phrase — so the
   headline has one structure rather than a comma on one line and a connector
   on the other. Plain ink, not the accent: it is punctuation holding a shape,
   not decoration.

   The spacing is set here rather than left to the spaces in the markup, so both
   dashes are spaced identically whatever the type size does. The literal spaces
   around it stay in the text for anyone reading it with a screen reader or
   copying it out. */
.h1-dash{
  display:inline-block;
  margin-inline:.08em;
  color:var(--ink-soft);
  font-weight:700;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;align-self:center;
  font-weight:800;font-size:.95rem;letter-spacing:.01em;color:var(--ink-soft);
}
.eyebrow b{color:var(--ink);font-weight:900;font-size:1.05rem}
.eyebrow-mark{
  width:24px;height:24px;border-radius:7px;background:var(--accent);
  display:grid;place-items:center;flex:none;
}
/* The dot sits left of centre, and it stays there in Hebrew. This is the one
   place in the stylesheet that wants a PHYSICAL margin: margin-inline-start
   mirrors with text direction, which flipped the brand mark to dot-right in
   English and left the favicon — a fixed image — contradicting the header on
   half the site. A logo is not text and does not mirror. */
.eyebrow-mark i{width:6px;height:6px;border-radius:50%;background:var(--bg);display:block;
  margin-right:5px;margin-top:2px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.05rem;font-weight:800;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  padding:16px 30px;border:2px solid var(--accent);border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 16px 34px -18px rgba(214,51,108,.85);
  transition:background .15s ease, border-color .15s ease, transform .18s var(--ease), box-shadow .18s ease;
}
.btn:hover{background:var(--accent-down);border-color:var(--accent-down);transform:translateY(-2px);
  box-shadow:0 22px 40px -18px rgba(214,51,108,.9)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.btn:hover svg{transform:translateX(-4px)}
.btn-lg{font-size:clamp(1.05rem,1.9vw,1.2rem);padding:17px 36px}
.cta-block{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.cta-block.center{flex-direction:column;justify-content:center}
.micro{font-size:.9rem;color:var(--ink-soft)}
.micro strong{font-weight:600;color:var(--ink)}

/* ---------- graphic field: a quiet dot grid, used behind mockups ---------- */
.dots{
  position:absolute;pointer-events:none;z-index:0;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  background-size:15px 15px;
  color:var(--dash);opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000,transparent 72%);
}
/* the brand mark is a door; a soft arch of it sits behind the loudest moments */
.arch{
  position:absolute;pointer-events:none;z-index:0;
  border-radius:999px 999px 40px 40px;
  background:var(--glow);
  filter:blur(2px);
}

/* ==========================================================================
   1. HERO — the one full-screen pane
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  padding-top:calc(var(--head-h) + clamp(26px,5vh,64px));
  padding-bottom:calc(clamp(58px,8vh,86px) + var(--sticky-h) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:center;
  overflow:clip;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 76% 56% at 50% 14%, var(--glow), transparent 70%);
}
.hero > .wrap{position:relative;z-index:1}

/* One centred column. The headline is the whole first screen, so it is given
   the page's width and nothing sits beside it competing for attention. */
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;text-align:center;
}
.hero-copy{
  max-width:min(100%,64rem);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;
}
h1{
  /* Stepped down about 12% on desktop — both the vw term and the cap, so the
     reduction holds across the whole desktop range and not only where the cap
     binds. The floor is untouched, so phones are exactly as they were: at 390px
     the floor already wins and the vw term never gets a say. */
  font-size:clamp(2.05rem,4.55vw,3.3rem);
  font-weight:900;line-height:1.2;letter-spacing:-.012em;
  margin-bottom:clamp(18px,2.8vh,28px);text-wrap:balance;
}
/* Wide enough to fall in two lines under the headline rather than a narrow
   stack of four. `balance` then evens the two out. */
.hero-sub{
  font-size:clamp(1.08rem,1.9vw,1.42rem);color:var(--ink-soft);
  line-height:1.8;
  max-width:min(100%,66ch);margin-inline:auto;margin-bottom:clamp(26px,3.6vh,36px);
  overflow-wrap:break-word;text-wrap:balance;
}
.hero .cta-block{justify-content:center}
.hero-sub .pull{
  font-weight:700;color:var(--ink);
  background:var(--accent-tint);padding:1px 7px;border-radius:7px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* The hero screenshot is parked while the copy is being settled, so the first
   screen is words only. Delete `display:none` to bring it back — the markup
   and every rule under it are untouched. */
.hero-media{position:relative;display:none}
.hero-media .dots{inset:-9% -12%}

.scroll-cue{
  position:absolute;bottom:calc(clamp(16px,2.6vh,26px) + var(--sticky-h) + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);z-index:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;color:var(--ink-soft);
  font:600 .92rem 'Heebo',sans-serif;white-space:nowrap;
}
.scroll-cue svg{width:28px;height:28px;stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue:hover{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue svg{animation:bob 1.7s cubic-bezier(.45,0,.55,1) infinite}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}
}

@media (max-width:900px){
  .hero-sub{max-width:46ch}
}
/* Phones. The hero still opens on a full screen, and it carries one button, so
   nothing has to share a row. With the screenshot parked there is nothing
   peeking at the fold either, so the scroll cue stays on and does the inviting. */
@media (max-width:620px){
  .hero{
    padding-top:calc(var(--head-h) + 20px);
    padding-bottom:calc(clamp(30px,4vh,48px) + var(--sticky-h) + env(safe-area-inset-bottom,0px));
  }
  .hero-grid{gap:26px}
  h1{margin-bottom:14px}
  .hero-sub{margin-bottom:20px}
}

/* ==========================================================================
   2. THE ARGUMENT — why you never got seen, and the three moves that change it
   Lives inside the dark section styled under 4. WHY: this was two sections
   making the same case, and the manifesto's treatment is the one that won.
   Everything below is that argument's own furniture — the sources panel, the
   three cards and the closing lines.
   ========================================================================== */

/* The claim's sources. A link cannot carry two destinations, so the word that
   makes the claim opens a panel that holds both. The word itself reads as a
   link — dotted underline rather than solid, the convention for "this opens an
   explanation" rather than "this navigates". */
.src{position:relative;display:inline-block}
.src-word{
  font:inherit;color:var(--accent-down);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:.22em;
  text-decoration-thickness:2px;transition:color .15s var(--ease);
}
.src-word:hover,.src.open .src-word{color:var(--accent)}

.src-pop{
  position:absolute;top:calc(100% + 12px);left:50%;z-index:20;
  width:max(15rem,min(88vw,23rem));
  transform:translateX(-50%) translateY(-5px);
  display:grid;gap:10px;padding:14px;text-align:start;
  background:var(--surface);border:2px solid var(--ink);border-radius:16px;
  box-shadow:var(--shot-shadow-lift);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.src.open .src-pop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* the nib, and an invisible bridge across the gap so the pointer can travel
   from the word to the panel without the panel closing under it */
.src-pop::before{
  content:"";position:absolute;top:-8px;left:50%;margin-left:-7px;
  width:12px;height:12px;background:var(--surface);
  border-inline-start:2px solid var(--ink);border-top:2px solid var(--ink);
  transform:rotate(45deg);border-start-start-radius:3px;
}
.src-pop::after{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}

.src-link{
  display:grid;gap:2px;text-decoration:none;
  padding:8px 10px;border-radius:10px;background:var(--surface-2);
  transition:background .15s var(--ease);
}
.src-link:hover{background:var(--accent-soft)}
.src-title{font:600 .82rem/1.4 'Heebo',sans-serif;color:var(--ink);text-align:start}
.src-meta{font:500 .74rem/1.3 'Heebo',sans-serif;color:var(--ink-soft);text-align:start}

/* on a mouse the panel closes itself when the pointer leaves, so the close
   button would be clutter. On a touch screen it is the only way out. */
.src-close{
  position:absolute;top:5px;inset-inline-end:7px;
  width:30px;height:30px;display:grid;place-items:center;
  font:400 1.5rem/1 'Rubik',sans-serif;color:var(--ink-soft);
  background:none;border:0;cursor:pointer;border-radius:8px;
}
.src-close:hover{color:var(--ink)}
@media (hover:hover){.src-close{display:none}}
@media (hover:none){.src-pop{padding-top:34px}}

/* The three moves. Three cards on one row, identical boxes — the grid stretches
   them to the tallest, so the one with two points sets the height for all.

   The section around them centres its text, which is right for a manifesto and
   wrong for a list: these read from the start of the line. */
.principles{
  list-style:none;text-align:center;
  margin-top:clamp(26px,4.5vh,60px);
  /* two by two: four large cards, each an icon over a line of type big enough
     to be the card. Four across would halve the type to fit. */
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
  max-width:min(100%,58rem);margin-inline:auto;
}
.principles > li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(110px,15vh,150px);
  padding:clamp(20px,2.8vh,32px) clamp(20px,2.2vw,30px);
  border-radius:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shot-shadow);
}
.principles h3{font-size:max(1.12rem,min(1.5rem,1.8vw,3vh));font-weight:900;line-height:1.28;color:var(--ink);text-wrap:balance}

.why-close{margin-top:clamp(18px,3.4vh,48px)}


/* The English of every one-line sentence here runs about a third longer than
   the Hebrew at the same size, so holding the line costs it a few points of
   type rather than costing the section its screen.

   Both carry a floor, for the reason spelled out over the sizes in the block
   below: a bare min() with a vw term in it collapses on a narrow screen. */
[dir=ltr] .why h2{font-size:max(1.8rem,min(1.85rem,2.5vw,4.6vh))}
[dir=ltr] .punch{font-size:max(1.32rem,min(1.62rem,2.2vw,3.8vh))}

/* Tablets: three cards on a row stop being readable long before the phone
   breakpoint, and once they stack the section is taller than a screen — so the
   one-screen promise is dropped here rather than shrinking the type to keep
   it, and every sentence that was holding one line is allowed to wrap. */
/* Short screens: the budget the peek leaves is smaller, but the cards' own
   padding and the gaps around them are not — so on a laptop under ~720px tall
   they are what has to give, or the argument outgrows its budget and pushes
   the question it is supposed to be showing off the bottom. */
@media (max-height:720px) and (min-width:901px){
  #edge{padding-block:clamp(26px,4vh,52px) clamp(32px,5vh,64px)}
  .why-body{margin-top:clamp(10px,1.6vh,20px)}
  .principles{margin-top:clamp(20px,4vh,44px)}
}

@media (max-width:900px){
  .principles{grid-template-columns:1fr;gap:clamp(12px,2vh,18px)}
}
/* The rest of this section's narrow-screen behaviour — the sizes, the wrapping
   and turning the peek off — cannot live here. `.why h2`, `.punch` and `#edge`
   are all declared FURTHER DOWN this file, and at equal specificity the later
   rule wins whether or not the earlier one sits in a media query. Those
   overrides sat here for a while and did nothing at all. They are now in
   "THE ARGUMENT ON NARROW SCREENS", immediately after the block that declares
   them. If you add a rule for this section here, check where its selector is
   declared first. */
@media (max-width:620px){
  /* the word can sit anywhere on a wrapped line, and a panel hung off it would
     run past the screen edge — so on phones it centres on the paragraph
     instead and drops the nib that would then be pointing at nothing */
  /* the popup anchors to the paragraph, which is now .prog .sub - the
     .why-body it used to hang off went with the four cards */
  .prog .sub{position:relative}
  .src{position:static}
  .src-pop{width:min(92vw,23rem);top:calc(100% + 10px)}
  .src-pop::before{display:none}
}

/* ==========================================================================
   3. HOW IT WORKS — five steps, each paired with a picture of that step
   ========================================================================== */
.how{background:var(--bg)}
.how .sect-head{margin-bottom:clamp(38px,6vh,72px)}

.steps{list-style:none;counter-reset:step;display:grid;gap:clamp(46px,7vh,96px)}
.steps > li{
  counter-increment:step;position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(24px,4.5vw,66px);align-items:center;
}
/* alternate which side the product sits on, so the page does not march */
.steps > li:nth-child(even) .step-media{order:-1}
.step-copy{position:relative;padding-inline-start:70px}
.step-copy::before{
  content:counter(step);
  position:absolute;inset-inline-start:0;top:-6px;
  font:900 1.2rem 'Rubik',sans-serif;color:var(--ink);
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--bg);border:2px solid var(--ink);border-radius:50%;
}
.step-copy h3{font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:900;line-height:1.24;margin-bottom:10px}
.step-copy p{color:var(--ink-soft);font-size:clamp(.98rem,1.4vw,1.1rem);max-width:42ch}
.step-media{position:relative}
.step-media .dots{inset:-10% -8%}

/* One picture per step. A screenshot keeps its own proportions rather than
   being cropped to a fixed box — these are screens, and a crop would cut the
   interface in half. The width and height attributes on the tag reserve the
   space before it loads. */
.step-img{
  display:block;width:100%;height:auto;border-radius:20px;
  border:1px solid var(--line);box-shadow:var(--shot-shadow);
}

/* The loops were recorded on a phone, so they are played on one: a dark shell
   with the clip as its screen. Everything is derived from --bezel, which is the
   one number to move, and the shell is sized by the clip rather than the other
   way round — height is what is constrained, because a 502x908 clip left to
   fill the column would stand twice as tall as the copy beside it. Width
   follows the shape, and object-fit only matters in the narrow case where
   max-width wins: it letterboxes rather than squashing the interface. */
.phone{
  --bezel:clamp(8px,1.1vh,11px);
  position:relative;display:block;width:fit-content;margin-inline:auto;
  padding:var(--bezel);
  background:var(--phone-shell);
  border-radius:calc(var(--bezel) * 4.4);
  box-shadow:var(--shot-shadow-lift), inset 0 0 0 1px rgba(255,255,255,.10);
}
.step-video{
  display:block;
  height:min(62vh,520px);width:auto;max-width:100%;object-fit:contain;
  border-radius:calc(var(--bezel) * 3.1);
  background:#000;
}
/* the island sits over the app's own header bar, which is empty across its
   middle, so it covers nothing that carries meaning */
.phone::before{
  content:"";position:absolute;z-index:1;
  top:calc(var(--bezel) + 7px);left:50%;transform:translateX(-50%);
  width:26%;height:8px;border-radius:99px;background:var(--phone-shell);
}
/* the side button. Physically right in both languages: a handset does not
   restack itself for Hebrew, so this is right and not inset-inline-end. Its
   own width is what puts it outside, so it meets the shell rather than
   floating a few pixels off it. */
.phone::after{
  content:"";position:absolute;
  right:-3px;top:27%;
  width:3px;height:9%;border-radius:0 3px 3px 0;background:var(--phone-shell);
}


/* Step 1 is a made animation rather than a screen recording, and it already
   draws its own handset — so it is NOT put inside .phone, which would be a
   phone drawn around a phone.

   The crop is tight to the device, so the clip's own cream background still
   shows in the four corners. Rounding them off here is what removes it; an mp4
   cannot carry transparency, so there is no way to do it in the file.

   The radius has to follow the rendered size, and the clip is sized by its
   height, so it is expressed against that: the device's corner radius measures
   10.9% of its width in the source, and its width is 0.509 of its height —
   which is where 5.55% of the height comes from. --vh holds the height once, so
   the two cannot drift apart. */
.step-video.framed{
  --vh:min(62vh,520px);
  height:var(--vh);
  border-radius:calc(var(--vh) * .0555);
  background:transparent;
  margin-inline:auto;
}

@media (max-width:860px){
  .step-video.framed{--vh:min(58vh,440px)}
  .steps > li{grid-template-columns:1fr;gap:22px}
  .steps > li:nth-child(even) .step-media{order:0}
  .step-copy{padding-inline-start:60px}
  .step-copy::before{width:40px;height:40px;font-size:1.05rem}
  /* one column: the clip no longer competes with copy beside it, but a phone
     drawn on a phone still should not fill the whole screen */
  .step-video{height:min(58vh,440px)}
}

/* ==========================================================================
   4. WHY — the treatment, now worn by the argument in section 2
   Nothing on the page carries .why on its own any more: the section that did
   was merged into #edge, which took this styling with it. Kept as its own
   block because it is a treatment, not one section's rules — the dark ground,
   the centred column and the punch line are what section 2 is now made of.
   ========================================================================== */
/* The argument, in two sections that carry the same case in two voices.

   Neither is near-black any more. The first is the long one — a heading, two
   paragraphs, three cards and a sources panel — and long reading wants a light
   ground, so it takes the warm off-white a step deeper than the hero's. That is
   the separation from the hero without the black.

   The second is four lines, which is short enough to carry a whole field of the
   brand colour the way the closing CTA does. So it does: the argument builds on
   the quiet ground and the turn lands on the loud one, and the seam between
   them is the event rather than a rule drawn across the page.

   The sizes still carry a vh term as well as a vw one. Nothing depends on it
   now that neither is pinned to a screen, but a heading and a punch line that
   each hold one line still want to shrink on a short screen rather than crowd
   it. */
.why{
  background:var(--bg-soft);color:var(--ink);position:relative;
  padding-block:clamp(50px,7.5vh,104px) clamp(64px,10vh,132px);
}
/* This section's column is wider than the page's. The three cards are what
   need it: at the page width the longest title and the longest bullet each
   wrapped, and since the grid stretches every card to the tallest, one card's
   wrapping was setting the height of all three. The paragraphs above them keep
   their own 58ch measure regardless, so nothing here reads wider. */
.why > .wrap{width:100%;max-width:1320px}

/* The argument is sized to leave the turn's first line showing under it. An
   anchor lands its top at scroll-padding-top, so what a screen has left for it
   is the viewport less the header, less that peek — and it centres itself in
   whatever of that its content does not need. Content longer than the budget
   simply pushes past it; the promise degrades rather than clipping. */
/* #edge no longer holds itself to one screen. That existed to leave the turn's
   question peeking under the four cards; the progress meter is taller and makes
   its own case, so the peek is retired here. */
.why .arch{
  width:min(56vw,620px);height:min(56vw,620px);
  inset-inline-end:-8%;top:-16%;
  background:rgba(214,51,108,.10);filter:blur(70px);
}

/* the turn has no cards to push down, so it keeps its padding even */
/* the turn's own top padding comes out of that peek, so it is the smaller half
   of an otherwise even section */
.turn{
  background:var(--cta-bg);color:var(--on-accent);
  padding-block:clamp(44px,6.5vh,92px) clamp(64px,10vh,132px);
}
.turn .arch{
  width:min(70vw,760px);height:min(70vw,760px);
  inset-inline-start:50%;transform:translateX(-50%);top:auto;bottom:-42%;
  background:rgba(255,255,255,.10);filter:blur(0);
}
.turn .why-close{margin-top:0}
.why .arch{
  width:min(56vw,620px);height:min(56vw,620px);
  inset-inline-end:-8%;top:-16%;
  background:rgba(214,51,108,.16);filter:blur(60px);
}
/* the manifesto section is read, not scanned: one centred column down the
   middle of the page, like the closing CTA */
.why .wrap{position:relative;z-index:1;text-align:center}
/* the heading holds one line: it is a question and a question read across two
   lines is two half-questions. Sized against the space rather than by the
   page's h2 scale, so the line survives the column shrinking or the screen
   getting short. */
/* Every size in this section is a min() of a rem cap, a vw term and a vh term,
   so the type shrinks when the column narrows or the screen gets short. That is
   right on a desktop and a trap on a phone: min() takes the SMALLEST, and at
   390px a 3.4vw term is 13px, so the heading rendered at 13px, the card titles
   at 7px and the body at 5px. Each one therefore carries a floor as well. Read
   `max(FLOOR, min(...))` as "shrink to fit, but never past readable". */
.why h2{max-width:none;margin-inline:auto;font-size:max(1.8rem,min(2.5rem,3.4vw,6.4vh));white-space:nowrap}
.why h2 em{color:var(--accent)}
.why-body{max-width:min(100%,58ch);margin:clamp(14px,2.2vh,28px) auto 0;display:grid;gap:clamp(8px,1.4vh,18px)}
.why-body p{color:var(--ink-soft);font-size:max(1.02rem,min(1.14rem,1.35vw,2.25vh));line-height:1.78}
.why-body p strong{color:var(--ink);font-weight:600}

/* the turn. The question is the loud half — it is the one line on the page
   that asks the reader something about themselves — and the answer sits under
   it in the body voice. */
.close-q{
  font-family:'Rubik',sans-serif;font-weight:800;color:var(--on-accent);
  font-size:max(1.22rem,min(1.5rem,2vw,3.4vh));line-height:1.3;
}
.close-a{
  margin-top:clamp(15px,2.5vh,30px);color:rgba(255,255,255,.88);
  font-size:max(1rem,min(1.08rem,1.3vw,2.2vh));line-height:1.72;
}

/* The punch wraps, on purpose. It used to hold one line, which worked while it
   was a short sentence; at seventy characters in Hebrew and ninety-four in
   English it cannot — measured, it overflows its column at every width below
   1366px, and the only way to hold the line would be to shrink the largest
   type on the page into a whisper. So it breaks into two balanced lines
   instead, which is what a sentence this long wants anyway. The line under it
   is still short enough to hold one. */
.punch{
  font-family:'Rubik',sans-serif;font-weight:900;color:var(--on-accent);
  font-size:max(1.5rem,min(2.15rem,2.9vw,5vh));line-height:1.32;
  margin:clamp(20px,3.6vh,50px) auto 0;
  max-width:min(100%,34em);
}
/* The two lines are authored, not wrapped. Left to wrap, the break landed
   between the phrase and the comma after it, and a comma is direction-neutral —
   at an RTL line boundary it gets reordered to the wrong edge and reads as a
   stray mark floating beside the next line. Breaking it here instead means the
   line break does the comma's work and there is no comma to strand. */
.punch-line{display:block}
.punch-line + .punch-line{margin-top:.12em}

/* On the accent field the drawn underline was the accent too — pink on pink,
   which is no underline at all. Here it is white, at the weight the rest of
   the section is read at. One custom property rather than a rule on the stroke,
   because on phones the underline is painted rather than drawn and both ways of
   making it have to take the same colour from the same place. */
.turn .u{--u-line:rgba(255,255,255,.6)}

/* ==========================================================================
   THE ARGUMENT ON NARROW SCREENS
   These belong here, after the block above, and not with the other
   narrow-screen rules further up the file. `.why h2`, `.punch` and `#edge` are
   all declared in this block, and at equal specificity the later rule wins
   whether or not the earlier one is wrapped in a media query. An earlier copy
   of these rules sat up there for weeks doing nothing, which is how sections 2
   and 3 came to render at 5-13px on a phone.
   ========================================================================== */
@media (max-width:900px){
  /* Both lines are sized to hold one line, and there is no width here to hold
     one in. So they wrap and balance, rather than being shrunk into a whisper
     to keep a shape that would be unreadable at that size anyway. */
  .why h2,.punch{white-space:normal;text-wrap:balance}
  /* One column makes the argument taller than any phone screen, so the peek —
     leaving the turn's question showing under the fold — has nothing left to
     promise. A phone gets the whole section, then the next one, in order. */
  #edge{min-height:0;display:block}
}
@media (max-width:620px){
  /* Two sentences in this section carry the argument, and a sentence spread
     over five short lines is a list. Both are held to a line count instead of
     to a size: the heading to two lines, the punch to three — its first line
     over two and the line under it over one.

     The numbers are measured rather than guessed. For each of them the largest
     type that still fits was found at 320, 360, 390, 412 and 430px, and the vw
     coefficient below is the tightest of those five, so the count holds at
     every width rather than at the one that was checked. The rem cap stops it
     growing past the size the section was designed at; the floor stops it
     shrinking past readable, and English needs its own pair because the same
     sentence runs about a third longer.

     One place the floor wins over the line count: English at 320px. Holding
     three lines there needs 16px, which is smaller than the body text this
     line is supposed to tower over, so it stays 18.4px and takes a fourth
     line. Every other width, both languages, hits the target. */
  .why h2{font-size:max(1.25rem,min(8.9vw,1.8rem))}
  /* Break the English heading on its own colour change rather than wherever the
     line happens to run out: the ink half on the first line, the accent half
     starting the second. Making the <em> a block is what does it — the two
     halves are already two elements, so no markup or copy has to change, and
     the break can never land mid-phrase.

     Two lines only holds if each half fits one line on its own, and the accent
     half is the longer of the two. The largest type that keeps it to one line
     was measured at 300, 320, 340 and 360px and the tightest came out at
     6.58vw, so the coefficient is 6.5 and the floor comes down to match it —
     a floor above the coefficient would win on the narrowest phones and undo
     the whole thing. It costs the heading about 1px against the other h2s on a
     390px screen, which is the price of the split never breaking. */
  [dir=ltr] .why h2{font-size:max(1.2rem,min(6.5vw,1.8rem))}
  [dir=ltr] .why h2 em{display:block}
  .punch{font-size:max(1.15rem,min(6.2vw,1.5rem))}
  [dir=ltr] .punch{font-size:max(1.15rem,min(4.95vw,1.32rem))}

  /* The underlined phrase is one unbreakable run: at 390px the hero's measures
     431px, so it was being cut off at both edges of the screen. Here it may
     wrap, and the drawn underline — one stroke under one box, which after a
     wrap would sit under the last line only — hands over to a painted one that
     repeats under every line the phrase lands on. */
  .u{
    white-space:normal;display:inline;padding-bottom:.06em;
    background:linear-gradient(var(--u-line),var(--u-line)) no-repeat 0 100%/100% .085em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .u svg{display:none}
}

/* ==========================================================================
   6. FAQ — the objections, answered before the last door
   Built on details/summary rather than on a script: it opens with no JS, it is
   reachable by keyboard for free, and a browser can find text inside an answer
   that is still closed. The only thing the stylesheet adds is the look.
   ========================================================================== */
.faq{background:var(--bg)}
.faq .sect-head{margin-bottom:clamp(24px,3.6vh,44px)}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-of-type{border-top:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:16px;
  padding:clamp(16px,2.2vh,22px) 4px;
  font:800 clamp(1.02rem,1.5vw,1.18rem)/1.45 'Rubik',sans-serif;color:var(--ink);
  transition:color .16s ease;
}
/* the default disclosure triangle, gone in every engine that draws one */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary span{flex:1 1 auto}
.faq-item summary:hover{color:var(--accent-down)}
.faq-item summary svg{
  flex:none;width:22px;height:22px;fill:none;
  stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s var(--ease);
}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-a{
  display:grid;gap:10px;
  padding:0 4px clamp(18px,2.4vh,24px);
  max-width:68ch;
}
.faq-a p{color:var(--ink-soft);font-size:clamp(.96rem,1.3vw,1.06rem);line-height:1.75}

@media (prefers-reduced-motion:reduce){
  .faq-item summary svg{transition:none}
}

/* ==========================================================================
   7. LEAD — the last door, under the closing CTA
   Everything above it asks the reader to start on their own. This is the one
   place on the page that offers a person instead, so it is deliberately the
   quietest section after the loudest one: the drenched CTA hands over to a
   soft ground and a plain white card.
   ========================================================================== */
.lead{background:var(--bg-soft)}
.lead-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.lead-copy{display:grid;gap:clamp(12px,1.8vh,20px);align-content:start}
/* The form and the address under it are one column of the lead grid, so they
   move together and the grid still sees two children. */
.lead-side{display:grid;gap:14px}
/* The contact page's band is the first thing under a fixed header, which the
   other standalone pages clear with padding rather than by subtracting from a
   height. Without it the heading starts eleven pixels below the header. */
#contact.lead{
  padding-block:calc(var(--head-h) + clamp(24px,4vh,52px)) clamp(40px,7vh,84px);
}
.lead-stack{
  max-width:580px;margin-inline:auto;
  display:grid;gap:clamp(20px,3vh,28px);
}
.lead-stack .lead-copy{justify-items:center;text-align:center;gap:2px}
/* The fine print is the last thing in a centred column and was the only
   thing in it still ranged to the edge. */
.lead-stack .lead-fine{text-align:center}
.lead-stack :is(h1,h2){max-width:18ch;margin:0}
.lead-stack .lead-lede{max-width:38ch;margin-inline:auto}
.lead-stack .lead-form{padding:clamp(18px,2.2vw,26px);gap:12px}
.lead-alt{text-align:center;font-size:.86rem;color:var(--ink-soft)}
.lead-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
/* The home page's version of this section: the form lives on the contact page,
   so what is left is a question and a door. Centred at every width, so a phone
   gets the same stack the desktop does rather than a collapsed two-column grid. */
.lead-handoff{text-align:center}
/* #talk lifts over the section above it and pays the negative margin back in
   top padding — calculated off the full band. This one is compact, so it pays
   back off the tight band instead; on the old figure the heading sat twice as
   far from the top edge as the button did from the bottom. The id in the
   selector is not decoration: the rule it is correcting is #talk. */
#talk.lead-handoff{padding-top:calc(clamp(44px,6vh,76px) + clamp(26px,4vh,50px))}
.lead-handoff{padding-bottom:clamp(44px,6vh,76px)}
.lead-handoff .wrap{
  display:grid;justify-items:center;gap:clamp(14px,2.2vh,22px);
  max-width:620px;
}
.lead.lead-handoff :is(h1,h2){
  font-size:clamp(1.05rem,2.1vw,1.55rem);max-width:none;white-space:nowrap;
}
/* On a phone it wraps instead. Holding one line there would mean type too
   small to be the thing the section is asking. */
/* On a phone the heading wraps instead, and it grows: the desktop size is
   set against a 620px band, and carried down to 400 it read as a caption
   rather than as the question the section is asking. */
@media (max-width:600px){
  .lead.lead-handoff :is(h1,h2){
    white-space:normal;max-width:16ch;
    font-size:clamp(1.18rem,5.6vw,1.7rem);
  }
}
.lead-handoff .cta-block{margin:0}
/* the badge says what the section is before the heading does */
.lead-pill{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font:600 .86rem 'Heebo',sans-serif;color:var(--ink-soft);
}
.lead-pill::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
}
/* The contact page is the same section standing on its own, where the
   heading is the page heading and has to be an h1. */
.lead :is(h1,h2){font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.24}
.lead :is(h1,h2) em{display:block;color:var(--accent);font-style:normal}
.lead-lede{color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.72;max-width:52ch}
.lead-points{list-style:none;display:grid;gap:10px}
.lead-points li{
  position:relative;padding-inline-start:30px;
  font-size:clamp(.95rem,1.2vw,1.02rem);color:var(--ink);
}
/* a drawn tick rather than a character: it keeps its weight at any size and
   does not depend on an emoji font */
.lead-points li::before{
  content:"";position:absolute;inset-inline-start:0;top:.28em;
  width:19px;height:19px;border-radius:50%;
  background:var(--success-soft);
}
.lead-points li::after{
  content:"";position:absolute;inset-inline-start:5px;top:.62em;
  width:9px;height:5px;
  border-left:2px solid var(--success);border-bottom:2px solid var(--success);
  transform:rotate(-45deg);
}

.lead-form{
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:clamp(20px,2.6vw,34px);box-shadow:var(--shot-shadow-lift);
  display:grid;gap:14px;
}
.lead-form h3{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:900}
.field{display:grid;gap:6px}
.field-label{font:600 .88rem 'Heebo',sans-serif;color:var(--ink)}
.field-label b{color:var(--accent)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field input,.field textarea{
  width:100%;font:400 1rem 'Heebo',sans-serif;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;transition:border-color .16s ease, background .16s ease;
}
.field textarea{resize:vertical;min-height:88px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft);opacity:.75}
.field input:focus,.field textarea:focus{
  outline:none;background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
/* the field says what is wrong, next to the field that is wrong */
.field-err{font:500 .82rem 'Heebo',sans-serif;color:var(--accent-down)}
.field.bad input,.field.bad textarea{border-color:var(--accent-down)}
.lead-submit{width:100%;justify-content:center;margin-top:4px}
.lead-status{
  font:600 .92rem 'Heebo',sans-serif;line-height:1.6;
  padding:11px 14px;border-radius:12px;
  background:var(--accent-soft);color:var(--ink);
}
.lead-status.ok{background:var(--success-soft);color:var(--success)}
.lead-fine{font-size:.8rem;color:var(--ink-soft);line-height:1.6}
.lead-fine a{text-decoration:underline;text-underline-offset:.18em}

@media (max-width:900px){
  .lead-grid{grid-template-columns:1fr;gap:clamp(24px,4vh,38px)}
  .lead-lede{max-width:none}
}
@media (max-width:520px){
  .field-row{grid-template-columns:1fr}
}

/* The contact page has to fit a phone screen without scrolling to reach the
   button. A form you have to scroll through to find the send button reads as
   longer than it is, and this one asks four questions. */
@media (max-width:600px){
  #contact.lead{
    padding-block:calc(var(--head-h) + 16px) 26px;
  }
  .lead-stack{gap:14px}
  .lead-stack .lead-form{padding:16px;gap:9px}
  .lead-stack .field{gap:4px}
  .lead-stack .field input,
  .lead-stack .field textarea{padding:9px 12px;border-radius:10px}
  .lead-stack .field textarea{min-height:0}
  .lead-stack .lead-submit{padding-block:13px;margin-top:2px}
  .lead-stack .lead-fine{font-size:.74rem;line-height:1.5}
  .lead-stack .lead-alt{font-size:.8rem}
}

/* Shorter phones need the last thirty pixels from somewhere. An iPhone SE is
   667 tall and an older Android 640, and on both the send button was already
   above the fold - it was the fine print and the address under it that fell
   off, which are the two things on this page that most want to be seen without
   being looked for. */
@media (max-width:600px) and (max-height:700px){
  #contact.lead{padding-block:calc(var(--head-h) + 10px) 4px}
  .lead-stack{gap:6px}
  .lead-stack :is(h1,h2){font-size:1.45rem}
  .lead-stack .lead-form{padding:14px;gap:6px}
  .lead-stack .lead-fine{font-size:.7rem}
  .lead-stack .lead-alt{font-size:.76rem}
}

/* ==========================================================================
   5. VOICES — not on the page at the moment

   The section was pulled because all three quotes were invented. The styling
   is kept, finished, so putting it back is pasting the markup between #edge
   and #askai and nothing else. The markup is in the commit that removed it.
   ========================================================================== */
.voices{background:var(--bg-soft)}
.voices .sect-head{margin-bottom:clamp(28px,4vh,50px)}
.quotes{display:grid;gap:clamp(18px,2.6vh,26px)}
/* one quote carries the section; the two under it support it. Not three
   equal cards. */
.q-lead{
  background:var(--surface);border:2px solid var(--ink);border-radius:22px;
  padding:clamp(22px,3.4vw,38px);box-shadow:var(--shot-shadow);
}
.q-lead blockquote{
  font-family:'Rubik',sans-serif;font-weight:900;
  font-size:clamp(1.25rem,2.6vw,1.95rem);line-height:1.32;color:var(--ink);
  max-width:26ch;
}
.q-lead blockquote::before{content:"„";color:var(--accent);font-size:1.2em;line-height:0;vertical-align:-.25em}
.q-rest{display:grid;gap:clamp(14px,2vh,22px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.q-rest figure{border-top:2px solid var(--dash);padding-top:15px}
.q-rest blockquote{font-size:1rem;line-height:1.65;color:var(--ink)}
.byline{display:block;margin-top:12px;font-size:.88rem;color:var(--ink-soft);font-style:normal}
.byline b{color:var(--ink);font-weight:600}
/* PLACEHOLDER MARKER — every quote is an example, not a real customer.
   Remove the badge only when the words come from a real person who agreed. */
.sample{
  display:inline-block;background:var(--sample-bg);color:var(--sample-ink);
  font:700 .8rem 'Heebo',sans-serif;padding:2px 8px;border-radius:999px;
  margin-bottom:10px;
}
.byline .sample{margin:0;margin-inline-end:4px;vertical-align:1px}

/* ==========================================================================
   6. ASK THE AI — the page arguing against its own authority
   Dark, like the manifesto, because it is the same register: this is us
   stepping back. The three buttons keep each tool's own colour so they read as
   the tools themselves rather than as our buttons, darkened enough that white
   sits above 3:1 on them at this size.
   ========================================================================== */
.askai{background:var(--dark);color:var(--dark-ink);text-align:center}
.askai h2{text-wrap:balance}
.askai h2 em{display:block;color:#FF8CB1;font-style:normal}
.askai-lede{
  margin:clamp(16px,2.4vh,24px) auto 0;max-width:56ch;
  font-size:clamp(1rem,1.5vw,1.16rem);color:var(--dark-soft);line-height:1.75;
}
.ai-links{
  margin-top:clamp(26px,4vh,42px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,16px);
}
.ai-btn{
  display:inline-flex;align-items:center;gap:8px;
  font:800 1.18rem 'Rubik',sans-serif;text-decoration:none;color:#fff;
  padding:14px clamp(22px,3vw,34px);border-radius:14px;
  border:2px solid transparent;
  transition:transform .18s var(--ease),filter .18s ease;
}
.ai-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
/* Each engine's mark, to the left of its name — in Hebrew too. A brand lockup
   reads left to right whatever the page around it does, and both names are
   Latin, so the button runs LTR and the mark leads. Only the buttons flip;
   their order in the row still follows the page.

   The marks are masks rather than images: only the file's alpha is read and the
   glyph is painted in the button's own colour. That is why the brand colours in
   the source files never fight the button they sit on, why a mark can arrive in
   any format that carries alpha, and why swapping one is replacing a file and
   nothing else. The logos are trimmed to their own edges first, so they carry
   the same optical weight in the same box. */
.ai-btn{direction:ltr;unicode-bidi:isolate}
.ai-btn::before{
  content:"";flex:none;width:1.2em;height:1.2em;
  background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;
          mask:var(--mark) center/contain no-repeat;
}
.ai-btn.gpt{background:#0D8A6A;--mark:url("img/ai-chatgpt.webp")}
/* Google's own blue, which is 4.6:1 under the white label — the one engine
   colour on this section that clears AA at any text size. */
.ai-btn.gem{background:#1A73E8;--mark:url("img/ai-gemini.webp")}
.askai-note{
  margin-top:clamp(16px,2.4vh,22px);
  font-size:.88rem;color:var(--dark-soft);opacity:.85;
}
@media (max-width:560px){
  .ai-links{flex-direction:column;align-items:stretch;max-width:22rem;margin-inline:auto}
  .ai-btn{justify-content:center}
}

/* ==========================================================================
   7. CLOSING CTA — the second anchor, drenched in the accent
   This is the one place the brand colour carries a whole screen rather than a
   button, and it is the last thing anybody sees.
   ========================================================================== */
.cta{background:var(--cta-bg);color:var(--on-accent);text-align:center;position:relative}
.cta .arch{
  width:min(70vw,760px);height:min(70vw,760px);
  left:50%;transform:translateX(-50%);bottom:-42%;
  background:rgba(255,255,255,.10);filter:blur(0);
}
.cta .wrap{position:relative;z-index:1}
.cta h2{max-width:min(100%,62rem);margin:0 auto;color:var(--on-accent)}
.cta .lede{
  font-size:clamp(1.02rem,1.6vw,1.2rem);color:rgba(255,255,255,.9);
  max-width:50ch;margin:18px auto 0;
}
/* The pricing handoff.

   It used to be the loudest band on the page, because it held two plan cards
   and a price. With a heading, one line and a button left in it, a full-accent
   field was shouting at nothing and the band was mostly empty at top and
   bottom. So: the illustration's own ground, a third less height, and 660
   pixels of measure rather than the page's full width.

   The heading is set on one line on purpose. It is four words and it is the
   claim the section makes; broken across two it reads as a paragraph. */
.handoff{background:var(--art-ground);padding-block:clamp(38px,5.5vh,68px)}
.handoff-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(16px,2.6vw,34px);align-items:center;
  max-width:660px;margin-inline:auto;
}
.handoff-copy{display:grid;justify-items:start;gap:clamp(9px,1.4vh,14px)}
.handoff h2{font-size:clamp(1.16rem,2.3vw,1.68rem);margin:0;white-space:nowrap}
.handoff .cta-block{margin-top:clamp(4px,.8vh,10px)}
/* Feathered rather than cropped. The ground behind it is the illustration's
   own colour, so the two already meet; the fade covers the shade the encoder
   moves the flat pink by, and in dark mode it is the whole trick — a light
   picture on a dark band with no rectangle around it. Six percent, because the
   nearest drawn thing (the top-left card) starts at nine. */
.handoff-art img{
  display:block;width:100%;max-width:230px;height:auto;margin-inline:auto;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* One column on a phone, and the copy still leads: the button is what this
   section is for, and an illustration above it would push it down a screen.
   The heading gives up its single line here — at this width holding it would
   mean type too small to be the section's claim. */
@media (max-width:760px){
  .handoff-grid{grid-template-columns:1fr;gap:clamp(16px,3.5vh,26px);text-align:center}
  .handoff-copy{justify-items:center}
  .handoff h2{white-space:normal}
  .handoff-art img{max-width:190px}
}

/* Two plans, on white cards over the accent field. A price list is read rather
   than declaimed, so it gets a light surface to be read on even though the
   section around it is the loudest on the page. */
.plans{
  margin:clamp(28px,4vh,44px) auto 0;
  position:relative;
  max-width:min(100%,58rem);text-align:start;
}
.plans-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.plan{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--shot-shadow);
}
/* the fuller plan is the one being pointed at, so it says so and steps forward */
.plan.is-lead{border:2px solid var(--ink);box-shadow:var(--shot-shadow-lift)}
.plan-flag{
  position:absolute;top:-13px;inset-inline-start:clamp(20px,2.4vw,30px);
  padding:5px 13px;border-radius:999px;
  font:800 .76rem 'Rubik',sans-serif;letter-spacing:.02em;
  background:var(--ink);color:var(--bg);
}
.plan h3{font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:900}
.plan-price{display:flex;align-items:baseline;gap:.35em;flex-wrap:wrap}
/* the period the number is per, at body weight beside it */
.plan-per{font:600 clamp(.92rem,1.2vw,1rem) 'Heebo',sans-serif;color:var(--ink-soft)}
/* the same price divided by a month, which is the number that actually lands.
   Its own line, in the accent, because it is the argument rather than the fact. */
.plan-daily{
  flex-basis:100%;margin-top:2px;
  font:800 clamp(.9rem,1.15vw,.98rem) 'Rubik',sans-serif;color:var(--accent);
}
.plan-amount{font:900 clamp(1.9rem,3.2vw,2.5rem)/1 'Rubik',sans-serif;color:var(--ink)}
/* what the plan is for, in one line, between the price and the list */
.plan-note{font-size:clamp(.9rem,1.15vw,.98rem);line-height:1.6;color:var(--ink-soft)}
.plan-list{list-style:none;display:grid;gap:10px;margin-top:2px}
.plan-list li{
  position:relative;padding-inline-start:28px;
  font-size:clamp(.92rem,1.2vw,1rem);line-height:1.55;color:var(--ink-soft);
}
/* a drawn tick, so it keeps its weight at any size and needs no emoji font */
.plan-list li::before{
  content:"";position:absolute;inset-inline-start:0;top:.22em;
  width:18px;height:18px;border-radius:50%;background:var(--accent-soft);
}
.plan-list li::after{
  content:"";position:absolute;inset-inline-start:5px;top:.55em;
  width:8px;height:4px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
/* The cards sit inside .cta, whose buttons are inverted for the accent field —
   white with accent type, which is right on pink and invisible on a white card.
   Both are restated here against the card they are actually on. They carry the
   element selector as well, because .cta .btn is declared further down and ties
   with a plain .cta .plan-cta — a tie that source order would decide, which is
   not a thing to leave a button's colour resting on.

   The paid one is filled in the accent because it is the one being pointed at;
   the free one is outlined, which still reads as a button rather than as a
   caption but does not compete with it. */
.plan-cta{margin-top:auto;justify-content:center;width:100%}
.cta a.plan-cta{
  background:var(--accent);color:var(--on-accent);border-color:var(--accent);
  box-shadow:0 14px 30px -18px rgba(214,51,108,.8);
}
.cta a.plan-cta:hover{background:var(--accent-down);border-color:var(--accent-down);color:var(--on-accent)}
.cta a.plan-cta.ghost{
  background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none;
}
.cta a.plan-cta.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* the one thing a free trial has to say next to its own button */
.plan-fine{
  margin-top:-4px;text-align:center;
  font-size:.8rem;line-height:1.5;color:var(--ink-soft);
}

@media (max-width:760px){
  .plans{max-width:26rem}
  .plans-grid{grid-template-columns:1fr}
}

.cta .cta-block{margin-top:clamp(24px,3.4vh,34px)}
/* inverted button: white on the accent field */
.cta .btn{
  background:var(--surface);color:var(--accent-down);border-color:var(--surface);
  box-shadow:0 18px 40px -20px rgba(38,20,27,.55);
}
.cta .btn:hover{background:var(--bg);border-color:var(--bg);color:var(--accent-down)}
.cta .micro{color:rgba(255,255,255,.9)}

/* ==========================================================================
   8. COMMUNITY — the lowest door on the page
   The section above it is drenched in the accent and the one below is a form.
   Between two heavy blocks this one is deliberately light: a single card on
   the page's own ground, no full-bleed colour, nothing competing with the two
   anchors the page already has.

   The one loud thing is the button, and it is loud in WhatsApp's green rather
   than ours. The colour IS the label here — it says which app is about to open
   before you have read the words — which is also why it does not follow the
   theme: a brand mark that changes shade is no longer the mark.
   ========================================================================== */
.community-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  padding:clamp(30px,4.6vw,52px) clamp(22px,4vw,48px);
  box-shadow:var(--shot-shadow);
}
.community-card h2{max-width:20ch}
/* Two paragraphs, and the second is a short aside rather than a continuation,
   so it gets a paragraph's worth of air instead of a line's. Both are capped
   at the same measure so the block reads as one column of text. */
.community-card .sect-lede{margin-top:16px;max-width:54ch}
.community-card .btn{margin-top:clamp(22px,3vw,30px)}
.community-fine{margin-top:14px}

/* Dark ink on the green, not white: white on #25D366 is 1.9:1 and fails
   outright, while this clears AA at 7.4:1 in both themes. */
.btn-wa{
  background:#25D366;border-color:#25D366;color:#0B2E1A;
  box-shadow:0 18px 40px -22px rgba(11,46,26,.55);
}
.btn-wa:hover{background:#1EBE5A;border-color:#1EBE5A;color:#0B2E1A}
.btn-wa:focus-visible{outline-color:#0B2E1A}

/* `.btn svg` is written for the stroked arrow the other buttons carry, and it
   sets `fill:none`. A one-class `.wa-glyph` loses to it — `.btn svg` scores a
   class and an element — and the mark comes out invisible, so the override has
   to be at least as specific. This is a solid logo: it fills rather than
   strokes, and it holds still on hover, because a mark that slides reads as a
   direction. */
.wa-glyph{fill:currentColor;stroke:none;flex:none}
.btn .wa-glyph{fill:currentColor;stroke:none;width:20px;height:20px}
.btn:hover .wa-glyph{transform:none}

/* The nav and footer links to the community section. They scroll like every
   other item in that list, so only the glyph is allowed to differ: the label
   stays in the ink of the links beside it, and the row reads as one nav rather
   than one item shouting. The green belongs to the destination, not the link —
   the button in that section is what actually leaves for WhatsApp. */
.nav-wa{display:inline-flex;align-items:center;gap:7px}
.nav-wa .wa-glyph{fill:#25D366;width:16px;height:16px}
.foot-col .nav-wa .wa-glyph{width:15px;height:15px}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;z-index:55;
  /* Sits on top of the cookie bar while that is up — they are the only two
     things docked to the bottom edge, and stacked beats overlapping.
     assets/consent.js sets --consent-h and clears it once a choice is made. */
  inset-inline:0;bottom:var(--consent-h,0px);
  padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--sticky-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
  display:none;
}
.sticky-cta .btn{width:100%;padding:14px 20px;box-shadow:none}
.sticky-cta.show{transform:none}
@media (max-width:760px){.sticky-cta{display:block}}
@media (prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* ---------- footer ---------- */
footer{
  background:var(--dark);color:var(--dark-soft);
  padding:clamp(38px,5vw,60px) 0 calc(clamp(26px,4vw,40px) + var(--sticky-h));
  font-size:.92rem;
}
footer .eyebrow{color:var(--dark-soft)}
footer .eyebrow b{color:var(--dark-ink)}
.foot-grid{
  display:flex;flex-wrap:wrap;gap:26px 44px;
  align-items:flex-start;justify-content:space-between;
}
.foot-brand{display:flex;flex-direction:column;gap:10px;max-width:32ch}
.foot-brand .eyebrow{align-self:flex-start}
.foot-cols{display:flex;flex-wrap:wrap;gap:26px 54px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h3{
  font:800 .82rem 'Rubik',sans-serif;letter-spacing:.04em;color:var(--dark-ink);
  margin-bottom:2px;
}
.foot-col a{text-decoration:none;font-weight:500}
.foot-col a:hover{color:var(--dark-ink);text-decoration:underline;text-underline-offset:4px}
.foot-base{
  margin-top:clamp(26px,3.4vw,36px);padding-top:18px;border-top:1px solid var(--dark-line);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;font-size:.85rem;
}
.foot-base a{text-decoration:none}
.foot-base a:hover{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   PRODUCT MOCKUPS
   Drawn in HTML and CSS from the app's own tokens rather than pasted in as
   flat images: they stay sharp at any size, they follow the theme into dark
   mode, and they carry no real user's data.

   Everything inside a shot is sized in em, so one font-size on .shot scales
   the whole thing.
   ========================================================================== */
.shot{
  position:relative;z-index:1;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shot-shadow);
  padding:.9em;
  font-size:clamp(11px,1.02vw,13.5px);
  line-height:1.45;
  color:var(--ink);
}
.shot-lg{font-size:clamp(12px,1.22vw,15px);border-radius:20px;padding:1em;box-shadow:var(--shot-shadow-lift)}
/* window chrome: three dots and a title strip */
.s-bar{display:flex;align-items:center;gap:.45em;padding:0 .2em .8em;border-bottom:1px solid var(--line);margin-bottom:.85em}
.s-dots{display:flex;gap:.32em;flex:none}
.s-dots i{width:.62em;height:.62em;border-radius:50%;background:var(--dash);display:block}
.s-dots i:first-child{background:var(--accent);opacity:.7}
.s-title{font-size:.86em;font-weight:600;color:var(--ink-soft);margin-inline-start:.4em}
.s-bar .s-chip{margin-inline-start:auto}

.s-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:.85em;
  padding:.85em;display:grid;gap:.7em;
}
.s-card + .s-card{margin-top:.6em}
.s-card.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-tint)}
.s-row{display:flex;align-items:center;gap:.6em}
.s-row.top{align-items:flex-start}
.s-grow{flex:1 1 auto;min-width:0}

.s-logo{
  width:2.3em;height:2.3em;flex:none;border-radius:.6em;
  display:grid;place-items:center;
  font:800 .95em 'Rubik',sans-serif;color:var(--on-accent);background:var(--accent);
}
.s-logo.alt{background:var(--ink)}
.s-logo.alt2{background:var(--success)}
.s-avatar{
  width:2.1em;height:2.1em;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font:800 .82em 'Rubik',sans-serif;
  background:var(--accent-soft);color:var(--accent-down);
  border:1px solid var(--line);
}
.s-avatar.ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.s-strong{font-weight:700;font-size:.98em;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-meta{font-size:.85em;color:var(--ink-soft);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.s-chip{
  display:inline-flex;align-items:center;gap:.35em;flex:none;
  font:700 .78em 'Heebo',sans-serif;
  padding:.24em .7em;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-down);
}
.s-chip.ok{background:var(--success-soft);color:var(--success)}
.s-chip.plain{background:var(--bg-soft);color:var(--ink-soft)}
.s-chip svg{width:.9em;height:.9em;stroke:currentColor;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* the "why this fits you" note — the product's own voice, quoted */
.s-note{
  font-size:.88em;line-height:1.5;color:var(--ink-soft);
  border-top:1px dashed var(--dash);padding-top:.6em;
}
.s-note b{color:var(--ink);font-weight:600}

.s-btns{display:flex;gap:.45em;flex-wrap:wrap}
.s-btn{
  font:800 .82em 'Rubik',sans-serif;
  padding:.5em 1.05em;border-radius:999px;
  background:var(--accent);color:var(--on-accent);border:1.5px solid var(--accent);
  flex:none;
}
.s-btn.ghost{background:transparent;color:var(--ink);border-color:var(--dash)}

/* skeleton text: document body copy that is texture, not content */
.s-lines{display:grid;gap:.4em}
.s-lines i{display:block;height:.42em;border-radius:999px;background:var(--bg-soft)}
.s-lines i.w9{width:92%}.s-lines i.w8{width:82%}.s-lines i.w7{width:72%}
.s-lines i.w6{width:62%}.s-lines i.w5{width:52%}.s-lines i.w4{width:42%}
/* a line the product rewrote for this specific role */
.s-lines i.hit{background:var(--accent);opacity:.55}

/* a CV page */
.s-doc{
  background:var(--surface);border:1px solid var(--line);border-radius:.7em;
  padding:1em .95em;display:grid;gap:.75em;
}
.s-doc-head{display:grid;gap:.35em;border-bottom:1px solid var(--line);padding-bottom:.7em}
.s-doc-name{font:900 1.15em 'Rubik',sans-serif;line-height:1.1}
.s-doc-role{font-size:.85em;color:var(--accent-down);font-weight:600}
.s-sec{display:grid;gap:.4em}
.s-sec h5{font:800 .78em 'Rubik',sans-serif;letter-spacing:.04em;color:var(--ink-soft)}

/* the path from you to the person who can put you forward */
.s-path{display:flex;align-items:center;gap:.5em}
.s-path .leg{flex:1 1 auto;height:1px;background:transparent;
  background-image:linear-gradient(90deg,var(--dash) 55%,transparent 0);
  background-size:7px 1px;background-repeat:repeat-x}
.s-path-label{font-size:.88em;color:var(--ink-soft);text-align:center;margin-top:.5em}

/* a drafted message, before you approve it */
.s-msg{
  background:var(--bg-soft);border-radius:.85em .85em .85em .2em;
  padding:.75em .85em;font-size:.9em;line-height:1.55;color:var(--ink);
}
[dir=ltr] .s-msg{border-radius:.85em .85em .2em .85em}
.s-msg b{font-weight:600}
.s-caret{
  display:inline-block;width:.1em;height:1em;background:var(--accent);
  vertical-align:-.15em;margin-inline-start:.1em;
}
@media (prefers-reduced-motion:no-preference){
  .s-caret{animation:blink 1.1s steps(1) infinite}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
}

/* small tilt so a shot reads as an object on the page, not a diagram in it */
.shot.tilt{transform:rotate(-1.1deg)}
[dir=ltr] .shot.tilt{transform:rotate(1.1deg)}
.shot.tilt-r{transform:rotate(1deg)}
[dir=ltr] .shot.tilt-r{transform:rotate(-1deg)}

/* a second card peeking out from behind the hero shot, for depth */
.shot-stack{position:relative}
.shot-stack::before{
  content:"";position:absolute;z-index:0;
  inset:8% -3.5% -7% 8%;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shot-shadow);
  transform:rotate(2.6deg);
}
[dir=ltr] .shot-stack::before{inset:8% 8% -7% -3.5%;transform:rotate(-2.6deg)}

/* ==========================================================================
   MOTION
   One vocabulary: things arrive from slightly below, slightly small, and
   settle. Mockups travel a little further than text so they read as objects.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;transform:translateY(20px);
    transition:opacity .72s var(--ease),transform .72s var(--ease);
    transition-delay:calc(var(--d,0) * 80ms);
  }
  .reveal.in{opacity:1;transform:none}

  .reveal-shot{
    opacity:0;transform:translateY(34px) scale(.975);
    transition:opacity .9s var(--ease),transform .9s var(--ease);
    transition-delay:calc(var(--d,0) * 80ms);
  }
  .reveal-shot.in{opacity:1;transform:none}
  .reveal-shot.in.tilt{transform:rotate(-1.1deg)}
  [dir=ltr] .reveal-shot.in.tilt{transform:rotate(1.1deg)}
  .reveal-shot.in.tilt-r{transform:rotate(1deg)}
  [dir=ltr] .reveal-shot.in.tilt-r{transform:rotate(-1deg)}
}

/* ==========================================================================
   DARK MODE
   Follows the operating system by default; the header toggle overrides it and
   the choice is remembered. Warm near-blacks rather than neutral grey, so the
   page stays the same product in either theme.
   ========================================================================== */
:root[data-theme="dark"]{
  --bg:#170D12;
  --bg-soft:#1F1219;
  --ink:#F9EFF3;
  --ink-soft:#C3A9B5;
  --accent:#FF6B99;
  --accent-down:#FF8CB1;
  --accent-tint:rgba(255,107,153,.20);
  --accent-soft:#3B2029;
  --glow:rgba(255,107,153,.09);
  --cta-bg:#FF6B99;        /* dark mode flips the drenched section to dark type */
  --dark:#0E070B;          /* the "why" section stays a step darker than the page */
  --dark-panel:#1A0F16;
  --dark-ink:#F9EFF3;
  --dark-soft:#C3A9B5;
  --dark-line:#3A2430;
  --line:#33212C;
  --dash:#4C3441;
  --surface:#1F1219;
  --surface-2:#241520;
  --on-accent:#25121A;     /* dark ink on a light pink button keeps AA contrast */
  --sticky-bg:rgba(23,13,18,.95);
  --head-bg:rgba(23,13,18,.66);
  --head-bg-solid:rgba(23,13,18,.92);
  --sample-bg:#4A3A12;
  --sample-ink:#FFE9A3;
  --art-ground:#1F1219;
  --success:#5BD6AC;
  --success-soft:#12352B;
  --shot-shadow:0 2px 6px rgba(0,0,0,.35), 0 26px 60px -28px rgba(0,0,0,.85);
  --shot-shadow-lift:0 3px 10px rgba(0,0,0,.4), 0 44px 90px -34px rgba(0,0,0,.9);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#170D12;
    --bg-soft:#1F1219;
    --ink:#F9EFF3;
    --ink-soft:#C3A9B5;
    --accent:#FF6B99;
    --accent-down:#FF8CB1;
    --accent-tint:rgba(255,107,153,.20);
    --accent-soft:#3B2029;
    --glow:rgba(255,107,153,.09);
    --cta-bg:#FF6B99;   /* dark mode flips the drenched section to dark type */
    --dark:#0E070B;
    --dark-panel:#1A0F16;
    --dark-ink:#F9EFF3;
    --dark-soft:#C3A9B5;
    --dark-line:#3A2430;
    --line:#33212C;
    --dash:#4C3441;
    --surface:#1F1219;
    --surface-2:#241520;
    --on-accent:#25121A;
    --sticky-bg:rgba(23,13,18,.95);
    --head-bg:rgba(23,13,18,.66);
    --head-bg-solid:rgba(23,13,18,.92);
    --sample-bg:#4A3A12;
    --sample-ink:#FFE9A3;
    --success:#5BD6AC;
    --success-soft:#12352B;
    --shot-shadow:0 2px 6px rgba(0,0,0,.35), 0 26px 60px -28px rgba(0,0,0,.85);
    --shot-shadow-lift:0 3px 10px rgba(0,0,0,.4), 0 44px 90px -34px rgba(0,0,0,.9);
  }
}
/* the button's drop shadow reads as a glow on a dark page */
:root[data-theme="dark"] .btn{box-shadow:0 16px 34px -20px rgba(255,107,153,.55)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .btn{box-shadow:0 16px 34px -20px rgba(255,107,153,.55)}
}
/* the accent is lighter in dark mode, so the drenched section needs dark type */
:root[data-theme="dark"] .cta .lede,
:root[data-theme="dark"] .cta .micro{color:rgba(37,18,26,.88)}
:root[data-theme="dark"] .cta .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
:root[data-theme="dark"] .cta .btn:hover{background:var(--surface);border-color:var(--surface);color:var(--bg)}
:root[data-theme="dark"] .cta .arch{background:rgba(37,18,26,.10)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta .lede,
  :root:not([data-theme="light"]) .cta .micro{color:rgba(37,18,26,.88)}
  :root:not([data-theme="light"]) .cta .btn{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  :root:not([data-theme="light"]) .cta .btn:hover{background:var(--surface);border-color:var(--surface);color:var(--bg)}
  :root:not([data-theme="light"]) .cta .arch{background:rgba(37,18,26,.10)}
}

/* ---------- theme toggle ---------- */
.theme-btn{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;padding:0;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;
  transition:background .15s ease,color .15s ease;
}
.theme-btn:hover{background:var(--ink);color:var(--bg)}
.theme-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .moon{display:block}
  :root:not([data-theme="light"]) .theme-btn .sun{display:none}
}

/* ---------- language switch ----------
   A round flag badge, the same size and shape as the theme button beside it,
   carrying the flag of the language you would be switching TO.

   It used to be an EN|עב pill, and the pill was 63px wide — too wide to keep
   next to the CTA, the theme button and the hamburger on a narrow phone, so it
   was hidden under 400px. Which meant that on most phones in use there was no
   way to change language at all. A 36px circle fits where the pill did not, so
   nothing has to be hidden and the rule that hid it is gone.

   The flag fills the circle (slice, not fit) so it reads as a badge rather than
   as a picture in a box, and the ring is the same ink border the other two
   controls wear. */
.lang{
  display:inline-grid;place-items:center;flex:none;
  width:36px;height:36px;padding:0;overflow:hidden;
  background:var(--surface);border:2px solid var(--ink);border-radius:999px;
  text-decoration:none;
  transition:transform .16s var(--ease),box-shadow .16s ease;
}
.lang .flag{display:block;width:100%;height:100%}
.lang:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(38,20,27,.7)}

/* ---------- direction-dependent bits ---------- */
[dir=ltr] .btn svg{transform:scaleX(-1)}
[dir=ltr] .btn:hover svg{transform:scaleX(-1) translateX(-4px)}
[dir=ltr] .u svg{left:2%}

/* ==========================================================================
   ENGLISH
   The same message takes more room in English than in Hebrew, so the two
   places where a line has to hold its shape get a touch more room.
   ========================================================================== */
[lang=en] .q-lead blockquote{max-width:30ch}

/* ==========================================================================
   SHORT SCREENS
   Only the hero has to fit a viewport now, so this section is short: it buys
   space back from the hero's own rhythm and leaves every other section alone.
   ========================================================================== */
/* Laptop-height windows. The hero is the only thing that still has to fit one
   screen, so it gives up padding before anything gives up size. Without this
   the scroll cue lands just under the fold on a ~735px-tall window. */
@media (orientation:landscape) and (max-height:820px){
  .hero{
    padding-top:calc(var(--head-h) + 24px);
    padding-bottom:calc(clamp(48px,6.4vh,64px) + var(--sticky-h) + env(safe-area-inset-bottom,0px));
  }
  h1{margin-bottom:16px}
  .hero-sub{margin-bottom:22px}
}
@media (orientation:landscape) and (max-height:700px){
  .hero{padding-top:calc(var(--head-h) + 20px);min-height:auto}
  .hero-grid{gap:clamp(20px,3vw,44px)}
  h1{font-size:clamp(1.5rem,3.6vw,2.3rem);margin-bottom:12px}
  .hero-sub{font-size:1rem;margin-bottom:18px}
  .scroll-cue{display:none}
  .shot{font-size:11px}
}
@media (orientation:portrait) and (max-height:700px){
  .hero{padding-top:calc(var(--head-h) + 22px)}
  h1{font-size:1.82rem;margin-bottom:12px}
  .hero-sub{font-size:.98rem;margin-bottom:18px}
}
@media (max-width:360px){
  /* h1 is sized in HEADLINE SHAPE ON PHONES, last in this file */
  .hero-sub{font-size:.95rem}
  .hero-sub .pull{padding:1px 4px}
  /* on the narrowest phones a lone button spans rather than floating */
  .cta .btn,.sticky-cta .btn{width:100%}
  .cta .cta-block{align-self:stretch}
}

/* ==========================================================================
   TOUCH TARGETS
   Last in the file on purpose. Everything here restates a size set earlier —
   .theme-btn is declared a few blocks up — and at equal specificity the later
   rule is the one that wins.

   Two conditions rather than one: (hover:none) is the honest test, since this
   is about fingers and not about width, but a narrow desktop window is how the
   layout gets checked, and a rule that cannot be seen while testing is a rule
   that quietly rots. Nothing here costs a mouse user anything.
   ========================================================================== */
@media (hover:none),(max-width:760px){
  /* Every footer link is one line of 15px type: a 24px-tall target with 9px
     between it and the next, on a list of a dozen. The type stays where it is;
     the box around it — which is what the finger is actually aiming at — grows
     to 42px. The negative margins take back the space the padding added, so
     not a single one of them moves on the page. */
  .foot-col a,.foot-base a{
    padding-block:9px;margin-block:-9px;
    padding-inline:6px;margin-inline:-6px;
  }
  .foot-col{gap:11px}
  /* the three icon buttons in the header are aimed at with a thumb as well */
  .theme-btn,.nav-toggle,.lang{width:42px;height:42px}
}

/* ==========================================================================
   HEADLINE SHAPE ON PHONES
   Last in the file on purpose. Three earlier blocks also set h1's size — the
   360px block and the two short-screen ones — and at equal specificity the
   later rule wins. Anything sizing h1 for a phone belongs here, not there.

   The Hebrew headline is two authored lines, each of them a phrase, a dash and
   a phrase. Left alone the second line wraps on a phone and the shape collapses
   into four ragged lines, so the type is sized against the line instead: the
   largest that keeps each authored line whole was measured at 300, 320, 360,
   390, 430, 540 and 620px, and the tightest came out at 5.92vw. 5.85 sits just
   inside it at every one.

   The min() caps it at the size the headline already had, so nothing grows and
   there is no jump at the 620px seam — both sides of it land on 2.05rem.

   This is Hebrew only. The English headline needs 12.5px at 320 and 15.8px at
   390 to hold the same two lines, which is smaller than the body text under it,
   so English is left to wrap. Shorten the English lines and it can join.
   ========================================================================== */
@media (max-width:620px){
  [dir=rtl] h1{font-size:min(5.85vw,2.05rem)}
}
/* short screens keep their smaller ceiling as well as the line-fit */
@media (max-width:620px) and (max-height:700px){
  [dir=rtl] h1{font-size:min(5.85vw,1.82rem)}
}

/* English holds the same two lines from tablet up, but only at 40px: its lines
   run 38 and 36 characters against the Hebrew's 26 and 30, and the hero column
   is 1024px wide, so that is simply where two lines stop fitting. Measured at
   768, 1024, 1280, 1440 and 1920 — the ceiling is 40px at every width from
   1024 up, and 4.26vw is the constraint below that.

   Below 768px English is left to wrap: holding two lines there needs 15.8px on
   a 390px phone, which is smaller than the paragraph beneath it. Shortening the
   two English lines is the only thing that would fix that, and it is a copy
   decision rather than a CSS one. */
@media (min-width:768px){
  [dir=ltr] h1{font-size:min(4.2vw,2.5rem)}
}

/* ==========================================================================
   ENGLISH HERO ON PHONES
   English only, phones only. The Hebrew hero and every desktop width are
   untouched — this block cannot reach them.

   The headline could never hold its two authored lines here (it needs 15.8px on
   a 390px screen), and forcing the break anyway produced five ragged lines with
   single words stranded on some of them. So on a phone the authored break is
   dropped and `text-wrap:balance` is allowed to do the job it is there for: one
   flowing headline, evenly broken.

   The three parts also read as three separate blocks rather than one, so the
   gaps between them come in and the CTA rises with them. The column takes a few
   more pixels each side, which is what buys the better break points.
   ========================================================================== */
@media (max-width:620px){
  /* All four breaks are authored on a phone, so balance is not asked to guess
     where the lines should fall — it broke them well, but not on the sense. */
  /* Sized so the balanced result stays inside three or four lines with no
     single word left alone, at every phone width. The largest that does it
     was measured at 320, 360, 390 and 430px; the tightest is 7.05vw, and the
     cap is the size that already worked from 390 up. */
  /* 1em, the same em the sentence gap uses and against the same font-size, so
     the space under the headline and the space inside it stay identical at
     every width without either being restated as a pixel value. */
  [dir=ltr] .hero h1{font-size:min(7vw,1.72rem);margin-bottom:1em}
  [dir=ltr] .hero > .wrap{padding-inline:16px}
  [dir=ltr] .hero-sub{max-width:54ch;margin-bottom:15px}
}

/* The half-line breaks are dropped once each sentence genuinely fits whole, so
   the headline reads as two lines. That threshold is 901px, not 621px: the
   English sentences are much longer than their Hebrew counterparts, and between
   those two widths the copy column is still narrower than one of them needs, so
   dropping the breaks there only moved the wrap somewhere the design did not
   choose. Below 901px the four authored lines are used instead. */
@media (min-width:901px){
  [dir=ltr] h1 br.br-half{display:none}
}

/* One sentence per line, at every width above that threshold.

   "The right message – for the right person." needs about 21x its own
   font-size in width. Sized off the viewport, as the door-story rules do, that
   requirement is met at some widths and missed at others: the static column
   caps at 36rem while the sentence wants ~724px, and above ~1700px the type
   reaches its 2.35rem ceiling and wants 792px inside a 768px column. Both wrap,
   and the headline becomes three or four ragged lines.

   Sizing the type off the COLUMN instead fixes it at every width at once,
   because the ratio that has to hold is a property of the column rather than of
   the window — 4.5cqw keeps the longer sentence inside its container with room
   to spare, and the rem cap stops it growing past the design size on a wide
   screen. Scoped to [dir=ltr]: the Hebrew headline is shorter and already fits.
   !important because the <=1400px door-story rule sets the size that way. */
@media (min-width:901px){
  [dir=ltr] .hero-intro{container-type:inline-size}
  [dir=ltr] .hero-intro h1{font-size:min(2.35rem,4.5cqw)!important}
}

/* Each sentence of the English headline is its own block, which is what carries
   the line break between them at every width — the half-line breaks inside them
   are the ones that come and go. Below 901px the two sentences also get a little
   air between them, so the four lines read as two pairs rather than as a list of
   four. Desktop keeps them tight, where they are one line each anyway. */
[dir=ltr] .h1-sent{display:block}
@media (max-width:900px){
  [dir=ltr] .h1-sent + .h1-sent{margin-top:1em}
}

/* ==========================================================================
   DOOR STORY HERO

   The generated picture is not used as a screenshot of the whole page. It is
   the full-bleed stage behind live copy, so the header, headline and CTA stay
   crisp, translatable and accessible.

   The base state is a normal hero with a poster. JavaScript adds
   .door-enhanced only on motion-capable desktop layouts; that one class grows
   the section and pins the stage for the scroll scrub. Phones and reduced-
   motion visitors keep native document flow.
   ========================================================================== */
.door-story{
  position:relative;isolation:isolate;display:block;
  /* Frame one resolves to rgb(252 245 247) at its outer edge. The page token
     is within one channel value, so using the page field removes the first-
     frame seam instead of introducing a second pink-grey surface. */
  --door-field:#FCF6F8;
  --door-art-left:50%;
  --door-art-width:min(100%,1280px);
  background:var(--door-field);color:#26141B;
}
.door-story::before{display:none}
.hero-stage{
  position:relative;width:100%;min-height:inherit;
  display:flex;align-items:stretch;overflow:clip;
}
.door-media{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--door-field);
}
.door-enhanced .door-media{
  opacity:1;transform:none;
  transition:opacity .42s ease,transform .58s var(--ease);
}
.door-media::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:var(--door-art-left);top:50%;width:var(--door-art-width);aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 150px 72px var(--door-field);
  transition:left .55s var(--ease),width .55s var(--ease);
}
.door-poster,.door-canvas{
  position:absolute;left:var(--door-art-left);top:50%;display:block;
  width:var(--door-art-width);height:auto;aspect-ratio:16/9;
  transform:translate(-50%,-50%);
  object-fit:contain;object-position:center;
  /* Gemini changes the paper colour slightly over the sequence. Feathering
     the raster itself turns that variation into a soft glow and guarantees
     its rectangular canvas can never become visible. */
  -webkit-mask-image:radial-gradient(ellipse at center,#000 48%,rgba(0,0,0,.96) 61%,transparent 84%);
  mask-image:radial-gradient(ellipse at center,#000 48%,rgba(0,0,0,.96) 61%,transparent 84%);
}
.door-canvas[hidden]{display:none}
.door-poster,.door-canvas{
  transition:opacity .28s ease,left .55s var(--ease),width .55s var(--ease),filter .25s ease;
}
.door-canvas{opacity:0}
.door-enhanced .door-canvas.ready{opacity:1}
.door-enhanced .door-poster.is-covered{opacity:0}
.hero-stage-content{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--head-h) + clamp(30px,5vh,58px));
  padding-bottom:calc(clamp(62px,8vh,88px) + env(safe-area-inset-bottom,0px));
}
.door-story .hero-grid{
  width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;justify-items:stretch;text-align:start;
}
.door-story .hero-copy{
  position:relative;width:min(100%,26.25rem);max-width:26.25rem;margin:0;justify-self:start;
  display:block;text-align:start;
}
[dir=rtl] .door-story .hero-copy{transform:translateX(24px)}
[dir=ltr] .door-story .hero-copy{transform:translateX(-24px)}
.door-story .hero-intro{width:100%}
.door-story .hero-intro .reveal{
  opacity:1;transform:none;
}
.door-story h1{
  max-width:none;
  font-family:'Rubik',sans-serif;font-weight:900;
  font-size:clamp(2rem,2.4vw,2.35rem);line-height:1.2;
  margin-bottom:clamp(18px,2.8vh,28px);
  text-shadow:0 1px rgba(252,246,248,.65);
}
.door-story .hero-sub{
  max-width:38ch;margin-inline:0;
  color:#75606A;font-size:clamp(1.02rem,1.45vw,1.23rem);
}
.door-story .hero-sub .pull{color:#26141B;background:rgba(214,51,108,.13)}

.door-enhanced .door-story{
  height:500svh;min-height:0;padding:0;
  --door-art-left:50%;
  --door-art-width:min(1200px,calc(100vw - 560px));
}
.door-enhanced .door-story.is-door-centered{
  --door-art-left:50%;
  --door-art-width:min(100%,1280px);
}
.door-enhanced .hero-stage{
  position:sticky;top:0;height:100svh;min-height:0;
}
.door-enhanced .hero-stage-content{height:100svh;min-height:0}
.door-enhanced .door-story .hero-copy{
  position:static;width:auto;max-width:none;min-height:0;transform:none;
}
.door-enhanced .hero-intro{
  position:absolute;top:50%;width:min(48rem,calc(100vw - 48px));
  inset-inline-start:calc((min(100vw,1120px) - 100vw)/2 + clamp(24px,3vw,48px));
  transform:translateY(-50%);transform-origin:center;
  text-align:start;
  will-change:transform,opacity;
}
.door-enhanced .hero-intro h1{
  max-width:none;margin-inline:0;
  font-family:'Rubik',sans-serif;font-size:clamp(2rem,2.2vw,2.35rem);
  font-weight:900;line-height:1.2;letter-spacing:-.012em;
}
.door-enhanced .hero-intro .hero-sub{
  max-width:38ch;margin-inline:0;
  font-size:clamp(1.02rem,1.45vw,1.23rem);
}
.door-enhanced .hero-intro .cta-block{justify-content:center}
.door-enhanced .scroll-cue{transition:opacity .18s ease,visibility .18s}
.door-enhanced .scroll-cue.is-gone{opacity:0;visibility:hidden}
.door-story-anchor{
  position:absolute;top:55svh;inset-inline-start:0;width:1px;height:1px;
  scroll-margin-top:var(--head-h);
}

/* The generated scene is deliberately light in both themes. While it is under
   the fixed header, give the header the same light-surface tokens so a saved
   dark preference cannot turn its controls into pale marks on pale artwork. */
body.over-door .site-head{
  --bg:#FCF6F8;--ink:#26141B;--ink-soft:#75606A;
  --accent:#D6336C;--accent-down:#B82458;--accent-tint:rgba(214,51,108,.13);
  --surface:#FFFFFF;--line:#EFDCE4;
  --head-bg:rgba(252,246,248,.72);--head-bg-solid:rgba(252,246,248,.92);
  --on-accent:#FFFFFF;
}

/* The generated clip has no alpha channel, so dark mode color-maps the light
   paper artwork rather than placing a pale rectangle on a dark page. Inverting
   first turns the paper field near-black; the hue rotation brings the inverted
   green back into the brand's pink family. Geometry and frame timing stay
   identical, so the theme can change even halfway through the scrub. */
:root[data-theme="dark"] .door-story{
  --door-field:#0E070B;color:#F9EFF3;
}
:root[data-theme="dark"] .door-poster,
:root[data-theme="dark"] .door-canvas{
  filter:invert(1) hue-rotate(160deg) brightness(.88) contrast(1.06) saturate(1.08);
}
:root[data-theme="dark"] .door-story h1{color:#F9EFF3;text-shadow:0 1px rgba(14,7,11,.7)}
:root[data-theme="dark"] .door-story .hero-sub{color:#C3A9B5}
:root[data-theme="dark"] .door-story .hero-sub .pull{
  color:#F9EFF3;background:rgba(255,107,153,.18);
}
:root[data-theme="dark"] body.over-door .site-head{
  --bg:#0E070B;--ink:#F9EFF3;--ink-soft:#C3A9B5;
  --accent:#FF6B99;--accent-down:#FF8CB1;--accent-tint:rgba(255,107,153,.20);
  --surface:#1F1219;--line:#33212C;
  --head-bg:rgba(14,7,11,.70);--head-bg-solid:rgba(14,7,11,.93);
  --on-accent:#25121A;
}

/* Static story: tablets keep the door and copy in a fitted split composition,
   while phones remove only the artwork below. Reduced-motion desktops use the
   same useful first frame without turning scroll into an animation control. */
@media (max-width:1400px),(prefers-reduced-motion:reduce){
  .door-story{
    height:100svh!important;min-height:100svh!important;padding:0;
    --door-art-width:min(760px,72vw);
  }
  [dir=rtl] .door-story{--door-art-left:31%}
  [dir=ltr] .door-story{--door-art-left:69%}
  .hero-stage{
    position:relative!important;top:auto!important;
    height:100svh!important;min-height:100svh!important;display:block;overflow:clip;
  }
  .door-media{
    display:block;position:absolute;inset:0;width:auto;aspect-ratio:auto;
  }
  .door-media::after{display:block}
  .door-poster,.door-canvas{
    inset:auto;left:var(--door-art-left)!important;top:50%;
    width:var(--door-art-width);height:auto;
    transform:translate(-50%,-50%);object-fit:contain;
  }
  .hero-stage-content{
    height:100svh;min-height:100svh;
    padding-top:calc(var(--head-h) + 20px);
    padding-bottom:calc(76px + var(--sticky-h) + env(safe-area-inset-bottom,0px));
  }
  .door-story .hero-grid{display:block}
  .door-story .hero-copy{position:static;width:auto;max-width:none;margin:0;transform:none;text-align:start}
  [dir=rtl] .door-story .hero-copy,[dir=ltr] .door-story .hero-copy{transform:none}
  .door-story .hero-intro{
    position:absolute;top:50%;inset-inline-start:clamp(24px,4vw,52px);
    width:min(58%,36rem);transform:translateY(-50%);text-align:start;
  }
  .door-story h1{
    max-width:none;margin-inline:0;
    font-size:clamp(1.7rem,2.8vw,2.15rem)!important;
  }
  .door-story .hero-sub{max-width:38ch;margin-inline:0;font-size:clamp(.95rem,1.55vw,1.1rem)}
  .door-story .cta-block{justify-content:center}
  .door-story-anchor{display:none}
}
@media (max-width:620px){
  .door-story{--door-art-left:50%}
  .door-media{display:none}
  .door-story .hero-grid{
    min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);
    place-items:center;text-align:center;
  }
  .door-story .hero-copy{width:100%;text-align:center}
  .door-story .hero-intro{
    position:static;width:100%;transform:none;text-align:center;
  }
  .door-story h1{
    margin-inline:auto;font-size:clamp(2rem,8.5vw,3rem)!important;
  }
  .door-story .hero-sub{max-width:46ch;margin-inline:auto;font-size:clamp(1rem,4.7vw,1.08rem)}
}
/* The hero CTA sits on the reading edge, not in the middle of its column.

   Everything else in the hero copy is aligned to the start edge — the headline,
   the sub, the whole text-align:start block — so a centred button was the one
   element floating free of that edge, and it read as a third alignment rather
   than as the end of the paragraph above it.

   flex-start rather than left/right: in a row flex container the main axis
   follows the writing direction, so one declaration puts the button on the
   right in Hebrew and on the left in English without a [dir] rule for each.

   Only above the phone breakpoint. Below 621px the whole hero is centred —
   grid, copy and headline all switch to text-align:center — and there the
   centred button is correct, so this deliberately stops short of it. */
@media (min-width:621px){
  .hero .cta-block,
  .door-story .cta-block,
  .door-enhanced .hero-intro .cta-block{justify-content:flex-start}
}

/* Very wide screens keep the illustration's generated 16:9 composition rather
   than stretching it until the door becomes wider than its own linework. */
@media (min-aspect-ratio:20/9){
  .door-poster,.door-canvas{object-fit:contain}
}

/* ==========================================================================
   COMPOSITION
   Three changes that answer one diagnosis: every section was built to the same
   recipe — full-bleed band, centred heading, centred content, hard colour seam —
   eight times over. That is the grammar of a slide deck, and it is why the page
   read as one.
   ========================================================================== */

/* --- 1. The seams stop being lines ---------------------------------------
   Twice on the page a light section now lifts over the pink one above it, on a
   rounded top edge and a negative margin. A slide cannot overlap the slide
   before it; a page can, and doing it even once breaks the stacked read.

   Safe by construction: the lifting section is a sibling that paints on top, so
   nothing is clipped and no horizontal overflow is possible. The padding-top
   gains back what the negative margin takes, so the content does not ride up
   with the edge. */
#how,
#talk{
  position:relative;z-index:1;
  margin-top:calc(-1 * clamp(26px,4vh,50px));
  border-start-start-radius:clamp(22px,3.4vw,44px);
  border-start-end-radius:clamp(22px,3.4vw,44px);
  padding-top:calc(clamp(66px,9.5vh,126px) + clamp(26px,4vh,50px));
}
#talk{background:var(--bg-soft)}

/* --- 2. The argument stops being centred ---------------------------------
   Centring was not a choice here, it was the default: every section used it, so
   it signalled nothing. It stays where it is a deliberate poster device — the
   turn, the ask-the-AI panel, the pricing — and leaves the one section that is
   read rather than declaimed. */
/* the alignment overrides that de-centred the four cards went with them */

/* --- 3. The rhythm stops being uniform -----------------------------------
   Every band carried the same vertical padding, which reads as a template. The
   turn is four lines and should feel tight; the pricing is the decision and
   should have room around it. */
.turn{padding-block:clamp(38px,5.5vh,76px) clamp(48px,7vh,96px)}
.cta{padding-block:clamp(84px,12vh,160px)}

/* The dashed connectors that used to run between the mockups are gone. The
   oversized numerals do that job now, and they do it without anything to break
   when the two columns collapse into one on a phone. */


/* ==========================================================================
   2. THE ARGUMENT — a progress meter
   Designed in Claude Design, integrated here. It replaces four identical cards
   that carried nothing but a heading each.

   The bar is split 3:7 — a grey portion for the job you already found, then
   four accent segments for what is left. The shape makes the section's argument
   before the words do: finding the job really is only part of the way.

   RTL-first, with two deliberate physical values. The checkmark uses
   border-LEFT because a tick is a shape, not a direction, and mirrored it stops
   being a tick. The bar fills from the line's start, which IS direction, so the
   transform-origin flips for English at the bottom of this block.
   ========================================================================== */
.prog{background:var(--bg-soft)}
.prog .wrap{max-width:1280px;padding-block:clamp(64px,9vh,104px) 0}
.prog h2{margin:0;text-align:center;font:900 clamp(1.75rem,4.2vw,2.9rem)/1.3 'Rubik',sans-serif;color:var(--ink);white-space:normal}
.prog h2 em{font-style:normal;color:var(--accent)}
.prog .sub{margin:20px auto 0;max-width:600px;text-align:center;font:400 clamp(1rem,1.5vw,1.19rem)/1.7 'Heebo',sans-serif;color:var(--ink-soft)}
.prog .sub b{color:var(--ink);font-family:'Rubik',sans-serif}

.prog-meter{max-width:1136px;margin:clamp(44px,7vh,80px) auto clamp(56px,9vh,96px);padding-inline:clamp(0px,4vw,72px)}
.prog-heads{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:16px}
.prog-heads .h-start{font:800 1.25rem 'Rubik',sans-serif;color:var(--ink)}
.prog-heads .h-end{font:900 1.375rem 'Rubik',sans-serif;color:var(--accent)}

.prog-bar{display:grid;grid-template-columns:3fr 7fr}
.prog-done{height:20px;background:var(--line);border-start-start-radius:99px;border-end-start-radius:99px}
.prog-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-inline-start:6px}
.prog-seg{height:20px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.prog-seg:last-child{background:var(--accent-down);border-start-end-radius:99px;border-end-end-radius:99px}
.prog.in .prog-seg{transform:scaleX(1)}
.prog.in .prog-seg:nth-child(1){transition-delay:.3s}
.prog.in .prog-seg:nth-child(2){transition-delay:.6s}
.prog.in .prog-seg:nth-child(3){transition-delay:.9s}
.prog.in .prog-seg:nth-child(4){transition-delay:1.2s}

.prog-labels{display:grid;grid-template-columns:3fr 7fr;margin-top:26px}
.prog-found{margin:0;font:500 1.06rem 'Heebo',sans-serif;color:var(--ink-soft);text-align:center}
.prog-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--success);border-radius:50%;vertical-align:-5px;margin-inline-start:6px}
/* a tick is a shape, not a direction — physical borders on purpose */
.prog-check i{width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.prog-items{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:0;padding:0;margin-inline-start:6px;list-style:none}
/* the numerals are gone: the bar already counts the steps, and numbering them
   twice made the row read as a list rather than as one run of progress */
.prog-items h3{margin:8px 0 0;font:800 clamp(1rem,1.4vw,1.19rem)/1.45 'Rubik',sans-serif;color:var(--ink)}

.prog [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0)*.12s)}
.prog.in [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .prog [data-reveal],.prog .prog-seg,.prog .prog-items li::before{opacity:1;transform:none;transition:none}
}

@media (max-width:980px){
  .prog-meter{padding-inline:24px}
}
.prog-end-m{display:none}
/* Phone: the bar stands up. It becomes a vertical rail running down beside the
   steps, filling top to bottom, with the same markup. */
@media (max-width:640px){
  .prog .wrap{padding-block:clamp(52px,8vh,72px) 0}
  .prog-bar{display:none}
  .prog-heads{margin-bottom:0}
  .prog-heads .h-end{display:none}
  .prog-labels{display:flex;flex-direction:column;gap:8px;margin-top:16px}
  .prog-found{display:grid;grid-template-columns:14px 1fr;gap:16px;align-items:center;min-height:60px;text-align:start;font-size:1rem}
  .prog-found::before{content:"";align-self:stretch;background:var(--line);border-start-start-radius:99px;border-start-end-radius:99px}
  .prog-items{display:contents}
  .prog-items li{display:grid;grid-template-columns:14px 1fr;gap:16px;align-items:center;min-height:60px}
  /* fills downward — scaleY from the top, which is mirror-safe */
  .prog-items li::before{content:"";align-self:stretch;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease)}
  .prog-items li:last-child::before{background:var(--accent-down);border-end-start-radius:99px;border-end-end-radius:99px}
  .prog.in .prog-items li::before{transform:scaleY(1)}
  .prog.in .prog-items li:nth-child(1)::before{transition-delay:.3s}
  .prog.in .prog-items li:nth-child(2)::before{transition-delay:.6s}
  .prog.in .prog-items li:nth-child(3)::before{transition-delay:.9s}
  .prog.in .prog-items li:nth-child(4)::before{transition-delay:1.2s}
  .prog-items h3{margin:0;font-size:1.06rem}
  .prog-end-m{display:block;margin-block-start:16px;margin-inline-start:30px;font:900 1.25rem 'Rubik',sans-serif;color:var(--accent)}
}

/* English mirror: the fill grows from the line's start, so the origin flips */
[dir=ltr] .prog-seg{transform-origin:0% 50%}

/* ==========================================================================
   4. HOW IT WORKS — the numerals are the structure
   Designed in Claude Design, integrated here.

   A tinted numeral the height of the block sits behind each step, alternating
   sides down the page. It is the flow: nothing is drawn between the steps, so
   there is nothing to re-draw or hide when the columns collapse on a phone —
   which is what the dashed arcs that used to live here needed.

   Single digits are bidi-neutral, so they need no direction handling. Sides
   swap with grid-column, which follows the writing direction on its own.
   ========================================================================== */
.hiw .wrap{max-width:1200px;padding-block:clamp(64px,9vh,96px) 40px}
.hiw .sect-head{text-align:center;margin-bottom:0}
.hiw h2{margin:0;font:900 clamp(2rem,4.2vw,2.75rem)/1.3 'Rubik',sans-serif;color:var(--ink)}
.hiw .sect-lede{margin:14px 0 0;font:400 clamp(1rem,1.5vw,1.19rem)/1.7 'Heebo',sans-serif;color:var(--ink-soft)}

.hiw-steps{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(72px,9vh,120px)}
.hiw-step{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* alternate which side the copy sits on, so the numerals zigzag down the page */
.hiw-step:nth-child(even) .hiw-copy{grid-column:2;grid-row:1}
.hiw-step:nth-child(even) .hiw-media{grid-column:1;grid-row:1}

.hiw-copy{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.hiw-num{
  position:absolute;top:50%;inset-inline-start:-16px;transform:translateY(-56%);
  font:900 clamp(15rem,30vw,23.75rem)/1 'Rubik',sans-serif;
  color:var(--accent-tint);pointer-events:none;user-select:none;
}
.hiw-copy .inner{position:relative;max-width:440px;padding-inline:clamp(72px,10vw,120px) 24px}
.hiw-copy h3{margin:0;font:800 clamp(1.5rem,2.6vw,1.875rem)/1.4 'Rubik',sans-serif;color:var(--ink)}
.hiw-copy p{margin:14px 0 0;font:400 clamp(1rem,1.4vw,1.125rem)/1.75 'Heebo',sans-serif;color:var(--ink-soft)}

.hiw-media{display:flex;justify-content:center}
.hiw-phone{width:min(290px,76vw);background:var(--phone-shell);border-radius:46px;padding:12px;box-shadow:var(--shot-shadow-lift)}
.hiw-phone video{display:block;width:100%;height:auto;border-radius:36px;background:#000}
/* step 1 has no shell: its clip already draws a handset. Rounded to the device
   drawn inside it, for the reason kept with the old .framed rule. */
.hiw-media > video{display:block;width:min(290px,76vw);height:auto;border-radius:calc(min(290px,76vw) * .109)}

@media (max-width:860px){
  .hiw .wrap{padding-block:clamp(52px,8vh,72px) 24px}
  .hiw-steps{gap:80px;margin-top:48px}
  .hiw-step{display:flex;flex-direction:column;align-items:stretch;gap:28px}
  .hiw-copy{display:block}
  .hiw-num{top:-42px;inset-inline-start:-6px;transform:none;font-size:10.625rem}
  .hiw-copy .inner{max-width:none;padding:52px 0 0;padding-inline-end:44px}
  .hiw-copy h3{font-size:1.375rem}
  .hiw-copy p{font-size:.95rem}
  .hiw-phone{width:min(240px,76vw);margin-inline:auto;border-radius:40px;padding:10px}
  .hiw-phone video{border-radius:31px}
  .hiw-media > video{width:min(240px,76vw);border-radius:calc(min(240px,76vw) * .109)}
}

/* --------------------------------------------------------------------------
   Skip to content.

   The header carries six anchor links and sits before <main> in the source, so
   a reader on a keyboard or a screen reader had to walk all of them on every
   page before reaching anything to read. WCAG 2.4.1 asks for a way past that.

   Off-screen until focused rather than display:none, because a hidden element
   cannot receive focus and so can never be reached by the Tab that is supposed
   to reveal it. The target carries tabindex="-1" for the same reason in
   reverse: without it a <main> is not focusable, and several browsers move the
   visual viewport to the anchor while leaving keyboard focus behind in the
   header — the link appears to work and then the next Tab lands back in the
   nav.
   -------------------------------------------------------------------------- */
.skip-link{
  position:absolute;inset-inline-start:16px;top:-100px;z-index:1000;
  padding:12px 20px;border-radius:0 0 10px 10px;
  background:var(--accent);color:var(--on-accent);
  font-family:'Rubik',sans-serif;font-weight:700;text-decoration:none;
  transition:top .16s ease;
}
.skip-link:focus{top:0}
#main:focus{outline:none}