/* Fishwake landing — direction A+C.
   A: an immersive full-bleed photograph carries the hero, navy text over a
   light wash. C: the body alternates editorial splits — a solid navy panel
   against a full-bleed image half — instead of stacked centred blocks.

   Hebrew-first, RTL-native, logical properties throughout so the five other
   locales need no separate stylesheet in phase 3. Deliberately NOT reusing
   landing.css, which those locales still link. */

:root{
  --navy:#0D1B2A;
  --navy-2:#14283B;
  --teal:#00B4D8;
  --teal-deep:#0090B0;
  --teal-ink:#075F76;
  --amber:#F4A228;
  --amber-deep:#B87A10;
  --ink:#0D1B2A;
  --ink-2:#4A657C;
  --ink-3:#7B93A6;
  --paper:#FFFFFF;
  --paper-2:#F2F6FA;
  --rule:#DDE7EF;
  --on-dark:#FFFFFF;
  --on-dark-2:#B9CCDB;

  /* Hebrew has no Outfit/Inter glyphs, so hierarchy must come from size,
     spacing, colour and position — never from weight or family. */
  --ui:"Heebo","Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --w:1140px;
  --pad:22px;
}

/* Light only, deliberately. Declaring a scheme also stops Chrome on Android
   applying Auto Dark Theme, which force-inverted the page and was what "dark
   theme is wrong" looked like on a device. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: every <img> carries width/height attributes to
   reserve space against CLS, and without this the browser uses the literal
   height attribute once width is overridden — it rendered the hero phone at
   320x1234 instead of 320x694. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--pad)}
.rule-mark{width:54px;height:4px;background:var(--amber);border-radius:2px;margin:0 0 22px}

/* ── nav ───────────────────────────────────────────────── */
.nav{position:absolute;inset-block-start:0;inset-inline:0;z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.brand span i{font-style:normal;color:var(--amber-deep)}
.langs{display:flex;gap:4px}
.langs a{color:var(--ink-2);text-decoration:none;font-size:13px;padding:5px 9px;border-radius:7px}
.langs a:hover{background:rgba(13,27,42,.08);color:var(--navy)}
/* Hidden on phones: the wordmark falls back to a wider system font on devices
   without Heebo and collided with the EN link. Footer carries every language. */
@media(max-width:599px){.nav .langs{display:none}}

/* ── hero · direction A ────────────────────────────────── */
/* The photograph is AI-generated and deliberately bounded: an angler with a
   greater amberjack, a species that genuinely lives in the Mediterranean.
   King mackerel was requested and swapped — it is an Atlantic and Gulf fish,
   and putting one on a page claiming local expertise is the accuracy error
   anglers notice first. Every screenshot on this page is real app UI. */
.hero{
  position:relative;color:var(--navy);overflow:hidden;padding-block:96px 0;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.04) 42%, rgba(255,255,255,.52) 86%, var(--paper) 100%),
    url("/v2/img/hero_tall.jpg?v=8");
  background-size:cover;background-position:center top;background-repeat:no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left, rgba(255,255,255,.62) 8%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 86%);
}
@media(min-width:760px){
  .hero{
    background-image:
      linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0) 44%, rgba(255,255,255,.34) 90%, var(--paper) 100%),
      url("/v2/img/hero_wide.jpg?v=8");
    background-position:center 34%;
  }
  .hero::before{background:linear-gradient(to left, rgba(255,255,255,.90) 4%, rgba(255,255,255,.60) 38%, rgba(255,255,255,0) 74%)}
}
.hero .wrap{position:relative;display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
/* Grid and flex children default to min-width:auto and refuse to shrink below
   min-content; the two badges together exceeded a 412px phone and pushed the
   column past the viewport. */
.hero .wrap>*{min-width:0}
h1{font-size:clamp(38px,7.2vw,62px);line-height:1.06;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
h1 em{font-style:normal;color:var(--amber-deep)}
.sub{font-size:clamp(18px,2.4vw,21px);color:#33506A;margin:0 0 28px;max-width:34ch;font-weight:500}
.note{font-size:13.5px;color:#3D5C77;margin:12px 0 0}

/* Hero install steps. These live against the buttons on purpose: the same copy
   at the foot of the page went unread, because a visitor taps the first store
   button they see and never scrolls. */
.herosteps{margin-block-start:14px;display:grid;gap:8px}
.herosteps p{
  margin:0;font-size:13.5px;line-height:1.6;color:#33506A;
  padding-inline-start:12px;border-inline-start:2px solid var(--teal);
}
.herosteps b{font-weight:inherit;color:var(--ink)}

/* The platform script marks the irrelevant store button [hidden], but .store
   sets display:flex, which outranks the UA sheet's [hidden]{display:none} and
   left the button on screen. This guard is what actually removes it. */
[hidden]{display:none!important}

/* store badges — dark, and LTR by design. Every real App Store and Play badge
   is a left-to-right lockup with the glyph leading; mirroring them into RTL is
   what made these read as homemade form buttons. */
.stores{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));max-width:432px;margin:0}
.store{
  direction:ltr;display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;background:#000;color:#fff;border:1px solid rgba(0,0,0,.2);
  border-radius:12px;padding:9px 16px;min-height:58px;min-width:0;
  box-shadow:0 6px 18px rgba(13,27,42,.18);
  transition:transform .15s ease, box-shadow .15s ease;
}
.store:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(13,27,42,.3)}
.store .glyph{width:27px;height:27px;flex:none;fill:#fff}
.store .glyph.play{fill:none}
.store .lbl{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.store b{font-size:17px;font-weight:700;letter-spacing:-.01em}
/* The lockup is LTR so the glyph leads, but the Hebrew line inside must still
   resolve RTL — otherwise "זמין ב-" renders as "-זמין ב". */
.store small{font-size:11px;opacity:.82;font-weight:400;direction:rtl;unicode-bidi:isolate}
.store.on-dark{background:#fff;color:var(--navy);border-color:rgba(255,255,255,.5)}
.store.on-dark .glyph{fill:var(--navy)}
.store.on-dark .glyph.play{fill:none}

/* phone */
/* One device treatment for every phone on the page: navy bezel, same radius,
   same padding. The hero previously used a white frame while the split pane and
   screens strip used navy, so the same component read three different ways. */
.phone{
  position:relative;width:min(268px,66vw);margin-inline:auto;
  border:none;border-radius:32px;padding:9px;
  background:var(--navy);box-shadow:0 24px 56px rgba(13,27,42,.40);
}
.phone img{width:100%;border-radius:24px;background:#fff}
.phone::after{
  /* Physical left:50% deliberately — inset-inline-start maps to right: in RTL
     while translateX stays physical, and the two disagreed by 41px. */
  content:"";position:absolute;inset-block-start:17px;left:50%;
  transform:translateX(-50%);width:64px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.45);
}
/* Hero rotator. The four screens stack absolutely inside a fixed-ratio box so
   the phone never changes height as it advances — a hero that jumps on every
   tick reads as broken. The caption is what makes it a tour rather than a
   slideshow, so it changes with the screen. */
.rot{position:relative;aspect-ratio:560/1158}
.rot img{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:24px;background:#fff;
  opacity:0;transition:opacity .55s ease;
}
.rot img.on{opacity:1}
.rot-cap{
  margin:16px 0 0;text-align:center;font-size:15px;color:var(--ink-2);
  /* Reserved height: the caption swaps text, and a one-line/two-line flip
     would shove the dots up and down on every advance. */
  min-height:1.5em;
}
.rot-cap b{color:var(--ink);font-weight:600}
.rot-dots{display:flex;gap:8px;justify-content:center;margin-block-start:12px}
.rot-dots button{
  width:7px;height:7px;padding:0;border:none;border-radius:50%;
  background:rgba(13,27,42,.22);cursor:pointer;
  transition:background .3s ease,width .3s ease;
}
.rot-dots button[aria-selected="true"]{width:20px;border-radius:4px;background:var(--amber)}
.rot-dots button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.rot img{transition:none}}

.hero-media{padding-block-end:44px}
@media(min-width:900px){
  .hero{padding-block-start:132px}
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:56px}
  .hero-media{padding-block-end:74px}
  .phone{width:284px;margin-inline:0 auto}
}

/* ── editorial split · direction C ─────────────────────── */
.split{display:grid;grid-template-columns:1fr;padding-block:0}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr}
  /* the differentiator section lost its image half — the forecast screenshot
     was already the hero's subject and repeating it read as a duplicate. Full
     width, with the copy centred rather than stranded on one side. */
  .split.solo{grid-template-columns:1fr}
  .split.solo .pane .inner{max-width:760px;text-align:center}
  .split.solo .beats{display:inline-block;text-align:start}
}
.split .pane{
  background:var(--navy);color:var(--on-dark);
  padding:62px 22px;display:flex;flex-direction:column;justify-content:center;
}
.split .pane .inner{max-width:520px;margin-inline:auto;width:100%;min-width:0}
.split .pane h2{color:#fff}
.split .pane .lede{color:var(--on-dark-2)}
.split .pane .eyebrow{color:var(--teal)}
.split .pane .beats li{color:var(--on-dark-2)}
.split .art{min-height:320px;background-size:cover;background-position:center 32%}
.split .art.shotpane{
  background:linear-gradient(160deg,#EAF6FA,#DCEEF5);
  display:grid;place-items:center;padding:44px 22px;
}
/* The pale panel needs the navy bezel, not the hero's white one — a white
   frame on a near-white ground reads as no frame at all, which is exactly how
   it looked on a device. */
.split .art.shotpane .phone{width:min(260px,64vw);margin:0;box-shadow:0 22px 48px rgba(13,27,42,.26)}

/* ── plain sections ────────────────────────────────────── */
section{padding-block:74px}
.alt{background:var(--paper-2)}
h2{font-size:clamp(27px,4vw,38px);line-height:1.16;letter-spacing:-.022em;margin:0 0 14px;text-wrap:balance}
.lede{font-size:18px;color:var(--ink-2);max-width:58ch;margin:0 0 30px}
.eyebrow{font-size:12.5px;letter-spacing:.12em;color:var(--teal-ink);margin:0 0 12px}
.beats{list-style:none;margin:22px 0 28px;padding:0}
.beats li{position:relative;padding-inline-start:30px;margin-block-end:13px;font-size:16.5px}
.beats li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  width:10px;height:10px;border-radius:50%;background:var(--amber);
}

/* three claims */
.claims{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.claims{grid-template-columns:repeat(3,1fr)}}
.claim{background:#fff;border:1px solid var(--rule);border-radius:17px;padding:26px 24px}
.claim .mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(0,180,216,.11);margin-block-end:15px}
.claim .mark svg{width:22px;height:22px;stroke:var(--teal-ink);fill:none;stroke-width:2;stroke-linecap:round}
.claim.gold .mark{background:rgba(244,162,40,.16)}
.claim.gold .mark svg{stroke:var(--amber-deep)}
.claim h3{font-size:20px;margin:0 0 8px;letter-spacing:-.015em}
.claim p{margin:0;color:var(--ink-2);font-size:16px}

/* app screens strip — replaced the catch wall, which implied photos from many
   anglers while every one was the founder's. */
/* Each screen is capped rather than filling its grid column: at 1140px the
   three columns are ~355px wide, and a 560x1158 screenshot stretched to that
   rendered 766px tall — three phone screenshots taller than the viewport. */
.screens{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));justify-items:center}
.screens figure{margin:0;text-align:center;max-width:252px;width:100%}
/* Screens sit in a device bezel rather than as bare rounded rectangles, so they
   read unmistakably as phone screens and match the hero. The light-section
   variant uses a navy bezel — the hero's white bezel disappears on white. */
.phone.bezel{width:100%;margin:0;box-shadow:0 16px 38px rgba(13,27,42,.24)}
.screens figcaption{margin-block-start:12px;font-size:14.5px;color:var(--ink-2)}

/* price — sits inside a split pane, so tiles are light-on-navy */
.tiers{display:grid;gap:14px;grid-template-columns:1fr;margin-block-start:22px}
.tier{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:20px 22px}
.tier.hi{border-color:var(--amber);background:rgba(244,162,40,.12)}
.tier .k{font-size:13px;letter-spacing:.08em;color:var(--on-dark-2);margin:0 0 6px}
.tier .v{font-size:28px;letter-spacing:-.02em;margin:0 0 8px;font-weight:800;color:#fff}
.tier.hi .v{color:var(--amber)}
.tier .v .per{font-size:15px;font-weight:400;opacity:.85}
.tier p{margin:0;color:var(--on-dark-2);font-size:15px}

/* install */
.install{text-align:center}
.install .lede{margin-inline:auto}
.install .stores{margin-inline:auto}
/* Install steps. Numbered because they genuinely are a sequence the visitor has
   to follow in order — the Play opt-in page hands you a text link, not an
   install button, and skipping that step is where people give up. Left-aligned
   (start) against the centred section: centred numbered lines are hard to scan. */
.install .steps{
  display:grid;gap:18px;grid-template-columns:1fr;
  max-width:620px;margin:26px auto 0;text-align:start;
}
.install .steps p{
  margin:0;padding:16px 18px;border-radius:14px;
  background:#fff;border:1px solid var(--rule);
  font-size:14.5px;line-height:1.65;color:var(--ink-2);
}
/* Label reads as a heading through size, colour and a gap — not weight. No
   Hebrew webfont ships, so weight renders differently per device (see the
   --ui note above) and cannot carry hierarchy. */
.install .steps b{
  display:block;margin-block-end:8px;font-weight:inherit;
  font-size:16.5px;color:var(--ink);letter-spacing:-.01em;
}
.install .steps span{display:block}
@media(min-width:720px){.install .steps{grid-template-columns:1fr 1fr;gap:16px}}

/* footer */
footer{background:var(--navy);color:var(--on-dark-2);padding-block:44px;font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--on-dark-2);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.copy{opacity:.65;font-size:13px;width:100%}

/* one-time language prompt */
.langsheet{
  position:fixed;inset-block-end:0;inset-inline:0;z-index:200;
  background:var(--navy-2);color:#fff;border-block-start:1px solid rgba(255,255,255,.16);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px rgba(0,0,0,.4);
  transform:translateY(110%);transition:transform .3s ease;
}
.langsheet[data-open="1"]{transform:translateY(0)}
.langsheet p{margin:0 0 12px;font-size:15px;color:#C3D5E3}
.langsheet .opts{display:flex;flex-wrap:wrap;gap:8px}
.langsheet .opts a,.langsheet .opts button{
  font:inherit;font-size:14px;cursor:pointer;background:rgba(255,255,255,.09);color:#fff;
  text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:9px 14px;
}
.langsheet .opts a:hover,.langsheet .opts button:hover{background:rgba(255,255,255,.18)}
.langsheet .opts .dismiss{background:none;border-color:transparent;color:#93A9BA}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.store:hover{transform:none}}