/* Otzar site stylesheet — shared by index.html and about.html.
Lives in assets/ so every url() here is relative to THIS file, not to the
page: fonts are url(fonts/…), not url(assets/fonts/…). That is the one thing
to remember when moving a rule in or out of here.
It was inline in index.html until the About page arrived and made a second
copy of the tokens, the @font-face block and the header/footer the
alternative. */
/* ------------------------------------------------------------------ fonts --
Self-hosted woff2, pulled from the Google Fonts CSS API and stored under
assets/fonts/. Google serves ONE variable file per (family, style, subset)
and points every weight at it, so the per-weight files came back
byte-identical and are collapsed here: 7 files, 18 rules. Google's
unicode-ranges are kept verbatim, so a visitor still downloads only the
subsets their text actually needs (latin alone for most). The Hebrew range
U+0590-05FF covers niqqud, so the vowel points on the page's one vowelized
word render properly rather than falling back to a system font. */
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-sans-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/noto-sans-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Noto Sans Hebrew';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
/* ----------------------------------------------------------------- tokens --
Straight from the brand spec. Fruit red is deliberately ABSENT, value and
all: it means "this deletes something" app-wide and never appears as page
chrome. (assets/mark.svg does contain it — the sabra's fruit is red, which
is what the colour was named after. That is the logo, not chrome.) */
:root{
--blue:#0A345B;
--blue-hover:#0F3761;
--blue-light:#7FB4DE;
--blue-pale:#B7D8F2;
--green:#2E7D32;
--green-deep:#1B5E20;
--green-pale:#C8E6C9;
--parchment:#FAF6EE;
--surface:#FCFAF4;
--n200:#E5E7EB;
--n500:#666E7C;
--n600:#4B5563;
--n700:#374151;
--n800:#1F2937;
--hair-header:rgba(10,52,91,0.09);
--hair-band:rgba(10,52,91,0.08);
--hair-qr:rgba(10,52,91,0.14);
--hair-footer:rgba(183,216,242,0.18);
--ease:cubic-bezier(.4,0,.2,1);
--gutter:32px;
--maxw:1120px;
}
/* ------------------------------------------------------------------- base --
No design-system reset here on purpose: the prototype's `p {font-size;color}`
rule is what forced every paragraph to repeat its values inline. Without it,
inheritance does the work. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
background:var(--parchment);
color:var(--n800);
font-family:'Nunito Sans','Noto Sans Hebrew',system-ui,sans-serif;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p,blockquote{margin:0}
img{max-width:100%}
a{color:var(--green);text-decoration:none;transition:color 200ms var(--ease)}
a:hover{color:var(--green-deep)}
/* Text links underline on hover. NEVER applied to the lockup (it contains
Hebrew — an underline strikes through niqqud), nor to pills/images. */
.nav-link:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* --------------------------------------------------------------- the mark --
ONE word: blue Latin immediately followed by green Hebrew, no space, no
separator, shared baseline. The container runs LTR so the Latin reads first;
the Hebrew half is its own RTL run at 1.06em so the א bookends the capital O. */
.lockup{
font-weight:900;letter-spacing:-0.01em;line-height:1;
display:inline-flex;align-items:baseline;
}
.lockup-en{color:var(--blue)}
.lockup-he{
color:var(--green);
font-family:'Noto Sans Hebrew',sans-serif;
font-weight:700;font-size:1.06em;
}
.brand{display:flex;align-items:center;gap:9px}
.brand:hover{text-decoration:none}
/* ----------------------------------------------------------------- header -- */
.site-header{
position:sticky;top:0;z-index:20;
background:rgba(250,246,238,0.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--hair-header);
}
.header-inner{
max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-header .lockup{font-size:23px}
/* The sticky header is 73px tall: without this an in-page jump lands with
the target heading hidden underneath it. */
#top,#how,#who{scroll-margin-top:88px}
.nav{display:flex;align-items:center;gap:28px}
.nav-link{color:var(--n600);font-size:15px;font-weight:600}
.nav-link:hover{color:var(--n600)}
/* ---------------------------------------------------------------- buttons --
The only two hover states on the page: filled pills darken, footer links
lighten. No lift, no scale, no shadow change. */
.btn{display:inline-block;border-radius:999px;font-weight:700;transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.btn:hover{text-decoration:none}
.btn-navy{background:var(--blue);color:var(--parchment);font-size:15px;padding:10px 20px}
.btn-navy:hover{background:var(--blue-hover);color:var(--parchment)}
.btn-green{background:var(--green);color:var(--surface);font-size:18px;padding:17px 36px}
.btn-green:hover{background:var(--green-deep);color:var(--surface)}
/* ------------------------------------------------------------------- hero -- */
.hero{
max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 56px;
/* The shot track is the phone's OWN width, not a fraction. It used to be
0.92fr = 486px holding a 380px centred phone, so 106px of the row was dead
space that the text column could not use — and the Hebrew headline needed
exactly that room. Fractions made sense when the phone was 420px and
flexible; it is a fixed-size asset now, so the text takes the remainder. */
display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:center;
}
.hero-title{
font-size:clamp(30px,5.2vw,58px);line-height:1.04;font-weight:900;
letter-spacing:-0.025em;color:var(--blue);margin-bottom:20px;text-wrap:pretty;
}
.hero-body{
font-size:clamp(17px,1.7vw,19px);line-height:1.6;color:var(--n700);
/* Room above and below, not just below: the phone beside this column is now
766px tall (the full app frame, uncropped) and the text needed to breathe
out toward it rather than sit as a tight block in the middle.
Written as first/last rather than a flat margin so a SECOND hero paragraph
sits 20px under the first instead of inheriting the full 48px gap meant to
separate the copy from the CTA row. With one paragraph the two selectors
land on the same element and the spacing is unchanged. */
margin:0 0 20px;max-width:34em;text-wrap:pretty;
}
.hero-body:first-of-type{margin-top:32px}
.hero-body:last-of-type{margin-bottom:48px}
/* The turn to the CTA. Same measure and spacing as the body paragraphs above
it — it is one of them — but navy and bold, because it asks for something
rather than explaining something, and grey body text right before the badge
reads as one more sentence instead of the handoff. */
.hero-kicker{color:var(--blue);font-weight:700}
.cta-row{display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap}
.badge-link{display:block;flex:0 0 auto}
.badge{height:54px;width:auto;display:block}
/* The wrap matters: at narrow widths the QR group drops below the badge
instead of overflowing the column. */
.qr-group{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:0}
.qr-link{
display:block;flex:0 0 auto;width:120px;height:120px;padding:8px;
background:#FFFFFF;border:1px solid var(--hair-qr);border-radius:8px;
}
.qr-link img{width:100%;height:100%;display:block}
.qr-caption{font-size:17px;line-height:1.45;color:var(--n500);min-width:0;max-width:14em}
.qr-arrow{width:20px;height:20px;vertical-align:-4px;margin-right:4px;fill:currentColor}
/* The prototype cropped the marketing shot's baked-in headline band with a
fixed `margin-top:-218px`, which only lines up while the column is ~420px
wide — narrower than that and a navy strip appears under the photo. A fixed
aspect-ratio box plus bottom-anchored `cover` crops the identical band at
EVERY width, with no magic number. */
/* Narrower than the old 420 on purpose: the frame now carries the app's FULL
height, so a wider box would be enormous. 380 x 766 against the old
420 x 620 — 40px narrower, 146px taller. */
.hero-shot{justify-self:center;min-width:0;width:100%;max-width:380px}
.hero-frame{
/* The encoded video's exact pixels (760x1532 = 2x the 380px display), so
object-fit crops NOTHING. The only crop is baked into the file: 190px off
the top of the source, removing the iPhone status bar and dynamic island so
the frame starts just above the app's own lockup. Every pixel below that,
down to the tab bar, is visible. */
width:100%;aspect-ratio:760/1532;border-radius:22px;overflow:hidden;
background:var(--blue);box-shadow:0 24px 48px rgba(10,52,91,0.22);
}
/* The video and the still are both 760x1532 — the frame's own aspect — so
cover crops nothing and object-position has nothing to choose.
It stays as a guard: if a future asset arrives at a different aspect, the
frame anchors the phone's TOP, where the lockup and the scanned word are. The
old static hero was anchored 50% 100% because its content sat low; the
preview's lower third is the on-screen keyboard, which is exactly what the
crop throws away. */
.hero-frame video,
.hero-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0}
/* SCOPED, and it has to be: `.hero-frame img` above is (0,1,1) and a bare
`.hero-still` is only (0,1,0), so the display:block in that rule wins and the
still sits visible under the playing video. Same trap for .hero-video in the
reduced-motion block below — both toggles are scoped for exactly this
reason. Caught in a browser, not in a test: no assertion over CSS text
resolves the cascade. */
.hero-frame .hero-still{display:none}
/* The hero's reduced-motion swap lives in the ONE prefers-reduced-motion block
at the bottom of this file, with the other two loops. */
/* -------------------------------------------------------- language cycle --
The three lines share one grid cell, so the box is as tall as the tallest
line and nothing jumps as they cross-fade. 11.4s = 3 x 3.8s. */
.cycle{display:grid}
.cycle>*{grid-area:1/1;opacity:0;animation:otzarCycle 11.4s var(--ease) infinite}
.cycle>*:nth-child(2){animation-delay:3.8s}
.cycle>*:nth-child(3){animation-delay:7.6s}
/* RTL text, but still starting at the column's left edge so it lines up with
the Latin lines above and below it. */
.cycle-he{font-family:'Noto Sans Hebrew',sans-serif;text-align:left}
.hero-cycle{margin-bottom:24px;font-size:clamp(20px,2.3vw,25px);font-weight:600;line-height:1.35;color:var(--green)}
.feature-cycle{margin-bottom:16px;font-size:clamp(18px,2vw,22px);font-weight:600;line-height:1.35;color:var(--green)}
@keyframes otzarCycle{
0% {opacity:0;transform:translateY(5px)}
3% {opacity:1;transform:translateY(0)}
30% {opacity:1;transform:translateY(0)}
33% {opacity:0;transform:translateY(-5px)}
100% {opacity:0;transform:translateY(-5px)}
}
/* ------------------------------------------------------------- quote marquee --
Cards use margin-right rather than `gap`, so the duplicated half is exactly
50% of the track and translateX(-50%) loops seamlessly. Duration tracks the
card count to hold the designed scroll speed: 6 cards x 422px / 45.87px per
second = 55.2s (the designed 46s was 5 cards over the same 2110px). */
.marquee{padding:0 0 72px;overflow:hidden}
.marquee-mask{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:otzarMarquee 55.2s linear infinite}
.quote-card{
width:400px;margin:0 22px 0 0;padding:26px 28px;
background:var(--surface);border:1px solid var(--n200);border-radius:8px;
}
.quote-card p{font-size:21px;line-height:1.45;font-weight:600;color:var(--blue)}
@keyframes otzarMarquee{
from{transform:translateX(0)}
to {transform:translateX(-50%)}
}
/* ------------------------------------------------------- convictions band -- */
.band-navy{background:var(--blue);color:var(--parchment)}
.convictions{
max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter);
display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
}
.conviction-title{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--surface)}
.conviction p{font-size:15px;line-height:1.55;color:var(--blue-pale)}
/* -------------------------------------------------------------- how it works -- */
.how-intro{max-width:var(--maxw);margin:0 auto;padding:96px var(--gutter) 32px}
.eyebrow{
font-size:15px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:var(--n500);margin-bottom:8px;
}
.lede{font-size:clamp(23px,2.7vw,30px);font-weight:700;color:var(--blue);max-width:20em;line-height:1.25}
/* The bilingual how-it-works line. space-between puts English on the left edge
and Hebrew on the right; margin-left:auto keeps the Hebrew pushed right even
after it wraps onto its own line on narrow screens, where space-between alone
would drop it back to the left. align-items:baseline so the two scripts sit
on one line rather than on two boxes' centres. */
.how-line{
display:flex;align-items:baseline;justify-content:space-between;
gap:24px 40px;flex-wrap:wrap;
}
.lede-he{
font-family:'Noto Sans Hebrew',sans-serif;
font-size:clamp(19px,2.3vw,28px);
font-weight:700;line-height:1.25;color:var(--green);
text-align:right;margin-left:auto;
}
/* ---------------------------------------------------------- feature rows -- */
.feature{
max-width:var(--maxw);margin:0 auto;padding:96px var(--gutter) 0;
display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.feature--first{padding-top:48px}
.feature--last{padding-bottom:104px}
.step{font-size:13px;font-weight:700;color:var(--green);letter-spacing:0.08em;margin-bottom:14px}
.feature-title{
font-size:clamp(26px,3.3vw,36px);font-weight:900;letter-spacing:-0.02em;
color:var(--blue);margin-bottom:12px;line-height:1.15;
}
.feature-body{font-size:18px;line-height:1.62;color:var(--n700)}
/* Device frame is drawn in CSS around a raw screen capture. */
.device{
justify-self:center;padding:12px;background:#17181C;border-radius:46px;
box-shadow:0 18px 40px rgba(10,52,91,0.18);
}
.device img{width:min(288px,72vw);height:auto;display:block;border-radius:34px}
.feature--flip .device{order:-1}
.chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{
font-size:15px;font-weight:600;color:var(--green-deep);background:var(--green-pale);
padding:7px 14px;border-radius:16px;
}
/* The page's ONE vowelized word — it is being quoted as a looked-up word,
which is the only case niqqud is ever allowed. */
.chip-source{font-family:'Noto Sans Hebrew',sans-serif;font-size:14px;color:var(--n500)}
/* --------------------------------------------------------- who it's for -- */
.who{background:var(--surface);border-top:1px solid var(--hair-band);border-bottom:1px solid var(--hair-band)}
.who-grid{
max-width:var(--maxw);margin:0 auto;padding:88px var(--gutter);
display:grid;grid-template-columns:0.9fr 1.1fr;gap:72px;align-items:start;
}
.who-lede{font-size:clamp(23px,2.7vw,30px);font-weight:700;line-height:1.3;color:var(--blue)}
/* The third rotating subhead, same green treatment as the hero's and the
feature rows'. Unlike those two it carries no Hebrew line — the Hebrew is
the lede above it, and the carousel is the three languages a reader might
be coming FROM. So the reduced-motion rule below settles this one on its
English line rather than on a Hebrew one, which is right for this page. */
.who-cycle{
margin-top:14px;font-size:clamp(18px,2vw,22px);font-weight:600;
line-height:1.35;color:var(--green);
}
.who-body p{font-size:clamp(17px,1.7vw,19px);line-height:1.62;color:var(--n700)}
.who-body p+p{margin-top:20px}
.pull-quote{
margin-top:28px;padding:22px 26px;background:var(--blue-pale);border-radius:8px;
font-size:20px;line-height:1.5;font-weight:600;color:var(--blue);font-style:italic;
}
/* ------------------------------------------------------------- closing CTA --
Deliberately a plain green pill, not a second Apple badge: Apple allows one
badge per layout and the hero owns it. */
.closing{max-width:var(--maxw);margin:0 auto;padding:104px var(--gutter);text-align:center}
.closing-title{
font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-0.025em;
color:var(--blue);margin-bottom:16px;line-height:1.1;
}
.closing-body{font-size:clamp(17px,1.7vw,19px);color:var(--n600);margin:0 auto 34px;max-width:30em;line-height:1.6}
.closing-note{font-size:15px;color:var(--n500);margin-top:26px}
/* The closing carousel: feature-cycle's treatment, but this section is
text-align:center, and .cycle-he left-aligns (it exists to keep Hebrew on the
left edge of the LEFT-ALIGNED columns elsewhere). Centre it back here, or the
Hebrew line alone sits off to one side under a centred heading. The bottom
margin replaces the .closing-body it took the place of, so the green button
below keeps its breathing room. */
.closing-cycle{
margin:0 auto 34px;font-size:clamp(18px,2vw,22px);font-weight:600;
line-height:1.35;color:var(--green);
}
.closing-cycle .cycle-he{text-align:center}
/* ----------------------------------------------------------------- footer -- */
.site-footer{background:var(--blue);color:var(--blue-pale)}
.footer-grid{
max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 40px;
display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;
}
.site-footer .lockup{font-size:21px}
.site-footer .lockup-en{color:var(--surface)}
.site-footer .lockup-he{color:var(--green-pale)}
.footer-brand-row{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.footer-blurb{font-size:15px;line-height:1.6;max-width:26em;color:var(--blue-light)}
.footer-heading{
font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
color:var(--blue-light);margin-bottom:12px;
}
.footer-links{display:flex;flex-direction:column;gap:9px;font-size:15px}
.footer-links a{color:var(--surface)}
.footer-links a:hover{color:var(--green-pale)}
.footer-meta{color:var(--blue-light)}
.footer-bottom{
max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter) 44px;
border-top:1px solid var(--hair-footer);font-size:13px;color:var(--blue-light);
display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
/* ------------------------------------------------------------- responsive --
The design is desktop-first at 1120px. Three breakpoints, each with one job:
1024px the hero and "who it's for" stop being two columns; convictions 4->2
860px feature rows stop being two columns (the 312px device frame stops
fitting beside text); quote cards narrow
600px phone: single column everywhere, tighter gutters and rhythm, the
in-page nav links give way to the CTA */
@media (max-width:1024px){
.hero{grid-template-columns:1fr;gap:44px}
.convictions{grid-template-columns:repeat(2,1fr);gap:36px 40px}
.who-grid{grid-template-columns:1fr;gap:32px}
.feature{gap:48px}
}
@media (max-width:860px){
.feature{grid-template-columns:1fr;gap:36px}
/* Text before phone on EVERY row once stacked. In these rows the device is
the first DOM child, so clearing the desktop `order:-1` is not enough —
that just falls back to source order and leaves the phone on top. It has
to be pushed explicitly past the text column. */
.feature--flip .device{order:1}
.device{justify-self:start}
.quote-card{width:320px}
}
@media (max-width:600px){
:root{--gutter:20px}
.nav{gap:16px}
/* Both nav targets are in-page anchors on a short page and both are repeated
in the footer; the header keeps the thing that converts. */
.nav-link{display:none}
.hero{padding-top:40px;padding-bottom:44px}
.marquee{padding-bottom:56px}
.quote-card{width:300px;padding:22px 24px}
.convictions{grid-template-columns:1fr;gap:28px;padding-top:48px;padding-bottom:48px}
.how-intro{padding-top:64px;padding-bottom:24px}
.feature{padding-top:64px}
.feature--first{padding-top:32px}
.feature--last{padding-bottom:64px}
.who-grid{padding-top:56px;padding-bottom:56px}
.closing{padding-top:64px;padding-bottom:72px}
.footer-grid{grid-template-columns:1fr;gap:32px;padding-top:44px}
.footer-bottom{flex-direction:column;gap:14px;padding-bottom:36px}
}
/* -------------------------------------------------------- reduced motion --
The prototype animates forever regardless; production must not. Both loops
stop, each subhead settles on its Hebrew line (the version baked into
Apple's own marketing screenshots), and the quote row becomes a plain
scrollable list so every quote is still reachable. */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.cycle>*{animation:none;opacity:0}
.cycle>*:first-child{opacity:1}
.marquee-track{animation:none}
.marquee-mask{overflow-x:auto}
.marquee-track>[aria-hidden="true"]{display:none}
/* The hero loop is the third moving thing. There is no JS here to call off
autoplay, so the video is swapped for its own first frame. Both selectors
scoped to out-specify `.hero-frame video` / `.hero-frame img`. */
.hero-frame .hero-video{display:none}
.hero-frame .hero-still{display:block}
}
/* ------------------------------------------------------------------ about --
Photo left, prose right, on the same 1120px/64px-gap rhythm as the feature
rows. The photo is 4:5 and object-fit:cover, so the crop is fixed here and
not in the file — reframing is a CSS change, not a re-export. */
.about{
display:grid;grid-template-columns:380px 1fr;gap:64px;align-items:start;
padding:76px 0 100px;
}
.about-photo{
/* height:auto is LOAD-BEARING, not tidiness. The width/height attributes on
the ![]()
(there to reserve the box and stop layout shift) land as UA
presentational hints, and `aspect-ratio` is ignored whenever height is not
auto — so without this the photo stretched to 380x950, ratio 0.4 against
the intended 0.8, and object-fit:cover hid the bug by cropping the sides
instead of visibly squashing anyone's face. */
width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
border-radius:22px;display:block;
}
.about-title{
font-size:clamp(32px,4.4vw,44px);font-weight:900;line-height:1.08;
letter-spacing:-0.02em;color:var(--blue);margin:0 0 26px;text-wrap:balance;
}
/* The title is plain text. A Hebrew name in the lockup's blue/green was tried
and dropped — the lockup belongs to the product, not to a person. */
.about-body p{
font-size:18px;line-height:1.7;color:var(--n700);
margin:0 0 22px;max-width:34em;text-wrap:pretty;
}
.about-body p:last-of-type{margin-bottom:34px}
@media (max-width:860px){
/* The photo stops earning a whole column before the text does. */
.about{grid-template-columns:1fr;gap:38px;padding:56px 0 80px}
.about-photo{max-width:320px}
}
@media (max-width:600px){
.about{padding:40px 0 64px;gap:30px}
.about-body p{font-size:17px}
}
/* --------------------------------------------------- hebrew hero headline --
The headline is Hebrew now, and that changes two things about it.
WEIGHT: Noto Sans Hebrew is loaded at 400/600/700 — there is NO 900. Left at
the .hero-title 900 the browser synthesises it by smearing the 700, which at
this size shows as uneven, mushy stems. 700 is the heaviest real weight, and
it is the same choice .lockup-he makes for the same reason.
ALIGNMENT: dir="rtl" is required for correct bidi (the period and the em dash
have to sit at the correct end), but an RTL block right-aligns by default,
which would push the headline away from the left edge every other line in the
column sits on. text-align:left keeps the ragged edge on the right, where
Hebrew wants it, and the flush edge on the left, where the layout wants it —
the trick .cycle-he already uses.
SIZE: Hebrew has no ascenders/descenders and reads larger at a given
font-size, and this line is longer than the English it replaced, so the top
of the clamp comes down from 58px. */
.hero-title-he{
font-family:'Noto Sans Hebrew',sans-serif;
font-weight:700;
/* TWO lines at 44px, measured against the 612px column: 342 and 585px.
The em dash is gone, and with it the reason to break three ways — the
middle line became a 260px stub against neighbours of 405 and 419, which
reads as a mistake. 46px would fit the long line in exactly 612px, i.e.
no margin at all, so 44 is the largest honest size. Still below the Latin
scale's 58 because Hebrew, having no ascenders or descenders, reads
larger at a given size. */
font-size:clamp(26px,4vw,44px);
letter-spacing:-0.015em;
line-height:1.14;
text-align:left;
}