/* ========================================================= Circle A workshop landing page - VARIANT B ("bold") Sibling of ../index.html, which is untouched. Same facts, same form contract, same tracking. Louder. Radius: media 16px / inputs 12px / buttons pill. One accent. ========================================================= */ @font-face{ font-family:'Assistant'; src:url('../assets/fonts/assistant-hebrew.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; } @font-face{ font-family:'Assistant'; src:url('../assets/fonts/assistant-latin.woff2') format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --ink:#0B0C0C; --ink-2:#121413; --ink-3:#1A1D1B; --paper:#F4F3EF; --muted:#A7A89F; --line:rgba(244,243,239,.14); --line-soft:rgba(244,243,239,.07); --gold:#CCA57A; --gold-hi:#DCBA94; --gold-soft:rgba(204,165,122,.15); --gold-ink:#14100A; --danger:#E8886F; --r-media:16px; --r-input:12px; --r-pill:999px; --wrap:1220px; --pad:20px; --sec:clamp(56px,6.8vw,94px); /* stronger than the CSS built-ins, which are too weak to read as intentional */ --ease-out:cubic-bezier(.23,1,.32,1); --ease:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--ink);color:var(--paper); font-family:'Assistant',system-ui,'Segoe UI',Arial,sans-serif; font-size:17px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased; /* clip, not hidden: overflow-x:hidden turns body into a scroll container, which is a well-known way to silently break position:sticky descendants. clip suppresses the same overflow without creating that container. */ overflow-x:clip; } img,picture,video,svg{display:block;max-width:100%} img{height:auto} h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.005em;line-height:1.14;text-wrap:balance} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .accent{color:var(--gold)} .sec{padding-block:var(--sec)} .skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--gold);color:var(--gold-ink);padding:12px 18px;border-radius:0 0 var(--r-input) 0;font-weight:700} .skip:focus{inset-inline-start:0} :where(a,button,input,summary):focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} /* ---------- Scroll reveal ---------- Purpose: sequence, not decoration. Content arrives in the order it should be read, and it never gates interaction. Critically: the hidden state is scoped to .js-reveal, which a one-line inline script in sets. Without that class every .reveal is fully visible. So if the script 404s, throws before the observer is wired, or the page is printed or scraped, the content is still there. Starting at opacity:0 unconditionally means one JS error blanks the entire page body. */ .reveal{opacity:1;transform:none} .js-reveal .reveal{ opacity:0;transform:translateY(10px); /* 380ms, not 620ms. Combined with an early trigger the reveal has finished before the element is actually looked at, which is the point. */ transition:opacity .38s var(--ease-out),transform .38s var(--ease-out); } .js-reveal .reveal--media{transform:translateY(16px) scale(.99)} .js-reveal .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal,.js-reveal .reveal--media{opacity:1;transform:none;transition:none} } @media print{ .js-reveal .reveal,.js-reveal .reveal--media{opacity:1;transform:none} } /* ---------- Buttons ---------- */ .btn{ --bh:56px; display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:var(--bh);padding:0 32px; background:var(--gold);color:var(--gold-ink); border:0;border-radius:var(--r-pill); font:inherit;font-weight:700;font-size:17px;letter-spacing:-.01em; text-decoration:none;white-space:nowrap;cursor:pointer; transition:transform .16s var(--ease-out),background-color .16s var(--ease-out); } .btn:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){.btn:hover{background:var(--gold-hi)}} .btn--sm{--bh:42px;padding:0 20px;font-size:15px} .btn--lg{--bh:62px;padding:0 40px;font-size:18px} .btn--block{width:100%} .btn__spin{display:none;width:18px;height:18px;border:2px solid rgba(22,18,10,.3);border-top-color:var(--gold-ink);border-radius:50%} .is-busy .btn__spin{display:block;animation:spin .7s linear infinite} .is-busy{pointer-events:none;opacity:.75} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.btn{transition:none}.is-busy .btn__spin{animation-duration:1.6s}} /* ---------- Nav ---------- */ .nav{position:sticky;top:0;z-index:40;background:rgba(11,12,12,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)} @supports not (backdrop-filter:blur(4px)){.nav{background:var(--ink)}} .nav__in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px} .nav__brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none} .nav__mark{width:28px;height:27px;flex:none} .nav__word{font-weight:800;font-size:15px;letter-spacing:.14em} /* The nav CTA is redundant while the hero form is still on screen - it would scroll the visitor PAST a form to reach another one. It fades in once the hero form is gone, which is the desktop half of the same idea as the mobile bar. */ .nav__cta{display:none} @media (min-width:600px){ .nav__cta{display:inline-flex;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s .22s} .nav.is-on .nav__cta{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)} } /* No script, no gating: the button must never be permanently unclickable. */ html:not(.js-reveal) .nav__cta{opacity:1;visibility:visible;transform:none} @media (prefers-reduced-motion:reduce){.nav__cta{transition:none}} /* ---------- Hero: full bleed ---------- */ .hero{position:relative;isolation:isolate;min-height:calc(100dvh - 66px);display:flex;flex-direction:column;justify-content:flex-end} .hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden} .hero__media picture{display:block;width:100%;height:100%} .hero__media img,.hero__vid{width:100%;height:100%;object-fit:cover;object-position:50% 48%} .hero__vid{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease-out)} .hero__vid.is-on{opacity:1} /* Stops are tuned to the band the headline actually occupies (roughly 34% to 59% up from the bottom), not chosen by feel. White display type sits over the brightest part of this frame, so that band needs ~0.5 minimum. */ .hero__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(to top, rgba(11,12,12,.96) 0%, rgba(11,12,12,.88) 20%, rgba(11,12,12,.72) 40%, rgba(11,12,12,.48) 62%, rgba(11,12,12,.24) 80%, rgba(11,12,12,.46) 100%); } /* MOBILE FRAMING. The hero is as tall as the form inside it (~785px at 390 wide), but the portrait crop is 828x1036 - a 0.80 box. Stretching it across a 0.50 box made cover throw away 38% of the width and left only the ceiling showing above the panel. So on a phone the photograph gets a band of its own, sized and positioned on the part of the frame that carries the argument - the screen and the people in front of it - and fades into the page behind the panel. */ @media (max-width:899px){ .hero__media{inset-block-end:auto;height:clamp(300px,46vh,390px)} .hero__media img,.hero__vid{object-position:50% 66%} .hero__media::after{ /* The wall behind the headline is a light plaster, ~#D8D2C8. Under a 0.34 scrim white type lands at 3.7:1 and fails; at 0.60 it lands at ~7:1. The band the headline and subline occupy is therefore held at 0.60 minimum, and nowhere else. */ background:linear-gradient(to top, var(--ink) 0%, rgba(11,12,12,.95) 12%, rgba(11,12,12,.72) 34%, rgba(11,12,12,.54) 52%, rgba(11,12,12,.58) 78%, rgba(11,12,12,.70) 100%); } } .hero__inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(24px,4vh,40px) var(--pad) clamp(26px,4vh,44px)} .hero__h1{font-size:clamp(34px,8.8vw,104px);font-weight:800;line-height:1.04} /* A flat scrim cannot answer a local hotspot - the lit screen in the frame sits directly behind the subline and is brighter than anything a gradient is tuned for. The shadow travels with the type instead, so the photograph keeps its light. */ .hero__h1,.hero__sub{text-shadow:0 2px 20px rgba(11,12,12,.8),0 1px 4px rgba(11,12,12,.55)} /* Hebrew descenders (ך ן ף ץ ק) sit below the baseline and a tight overflow mask clips them, so the line box is padded and pulled back by the same amount. */ .hero__h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em} .hero__h1 .line>span{display:block;transform:translateY(105%);transition:transform .9s var(--ease-out)} .hero__h1 .line:nth-child(2)>span{transition-delay:.09s} .is-ready .hero__h1 .line>span{transform:translateY(0)} .hero__h1 em{font-style:normal;color:var(--gold)} .hero__sub{margin-top:18px;max-width:30ch;color:#DEDDD6;font-size:clamp(16.5px,4.2vw,21px);line-height:1.5;text-wrap:balance} /* The panel and the subline fade up with the headline, not on scroll. Their hidden state is scoped to .js-reveal, the class the inline script sets and then REMOVES if site.js never reports ready, so a script failure can never leave the only form on the first screen invisible. */ .js-reveal .hero__sub,.js-reveal .hero__panel{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} .js-reveal .hero__sub{transition-delay:.2s} .js-reveal .hero__panel{transition-delay:.3s} .is-ready .hero__sub,.is-ready .hero__panel{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .hero__h1 .line>span{transform:none;transition:none} .js-reveal .hero__sub,.js-reveal .hero__panel{opacity:1;transform:none;transition:none} } /* ---------- Form panel ---------- Dark glass so the room stays visible behind it. The gold hairline is what separates it from the photograph; without it the panel reads as a hole. */ .panel{ background:rgba(10,11,11,.82); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); border:1px solid rgba(204,165,122,.3); border-radius:20px; padding:clamp(18px,4.6vw,26px); box-shadow:0 26px 70px rgba(0,0,0,.5); } @supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){ .panel{background:rgba(10,11,11,.96)} } .panel__h{font-size:clamp(19px,4.8vw,23px);font-weight:800;line-height:1.2} .panel__p{margin-top:7px;color:#BEBDB5;font-size:14.5px;line-height:1.5} .panel .form{margin-top:clamp(14px,3.4vw,20px);gap:13px} .panel .input{min-height:52px} .hero__panel{margin-top:26px;scroll-margin-top:80px} @media (min-width:900px){ .hero__inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:center;gap:clamp(32px,4.2vw,70px); padding-bottom:clamp(40px,6vh,72px); } /* 9.4vw beside a 420px panel would put the headline at 90px in a 430px column and shatter it into one-word lines. Sized to the column it actually gets, not to the window. */ .hero__h1{font-size:clamp(38px,4.8vw,78px)} .hero__sub{font-size:20px;max-width:26ch} .hero__panel{margin-top:0} .panel .input{min-height:54px} } @media (min-width:1280px){.hero__inner{grid-template-columns:minmax(0,1fr) minmax(0,460px)}} /* ---------- Ticker: the one marquee on this page ---------- */ .ticker{display:none;position:relative;z-index:1;border-top:1px solid var(--line-soft);background:rgba(11,12,12,.55);backdrop-filter:blur(8px);overflow:hidden;padding-block:14px} .ticker__row{display:flex;align-items:center;gap:22px;width:max-content;animation:tick 42s linear infinite;will-change:transform} .ticker__row span{font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);white-space:nowrap} .ticker__row i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--gold);flex:none} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(33.333%)}} @media (min-width:900px){.ticker{display:block}} @media (prefers-reduced-motion:reduce){.ticker__row{animation:none}} /* ---------- Typography scale ---------- */ .h2{font-size:clamp(31px,5.2vw,58px);font-weight:800} .h2--xl{font-size:clamp(34px,6.4vw,76px)} .zero .h2,.why .h2,.ido .h2{font-size:clamp(29px,3.6vw,46px)} .lede{margin-top:20px;max-width:46ch;color:#D2D1C9;font-size:clamp(16.5px,3.6vw,19.5px);text-wrap:pretty} .lede--wide{max-width:58ch;margin-top:clamp(26px,4vw,46px)} .cap{margin-top:12px;color:var(--muted);font-size:14px} .figure img,.vid,.who__a img,.who__b img,.ido__media img,.why__media img,.gal__item img{ box-shadow:0 0 0 1px var(--line-soft) } /* ---------- From zero ---------- */ .vid{position:relative;aspect-ratio:16/9;background:var(--ink-3);border-radius:var(--r-media);overflow:hidden} .vid__el{width:100%;height:100%;object-fit:cover} .pull{margin:34px 0 0;padding-inline-start:22px;border-inline-start:2px solid var(--gold)} .pull p{font-size:clamp(18px,4.6vw,24px);line-height:1.42;font-weight:600;max-width:38ch} .zero__grid{display:grid;gap:clamp(30px,5vw,60px)} .zero__media{margin:34px 0 0} @media (min-width:840px){ .zero__grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(40px,5vw,76px)} .zero__media{margin:0;grid-column:2;grid-row:1} .zero__text{grid-column:1;grid-row:1} } /* ---------- Place: headline sits on the image ---------- */ .place{padding-bottom:var(--sec)} .place__media{position:relative;margin:0} .place__media img{width:100%;max-height:min(84vh,780px);object-fit:cover} .place__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,12,12,.92) 2%,rgba(11,12,12,.3) 46%,rgba(11,12,12,.12) 100%)} .place__over{position:absolute;inset-inline:0;bottom:0;z-index:1;max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad) clamp(26px,4vw,56px)} @media (min-width:760px){.place__over{inset-inline:0;left:0;right:0}} /* ---------- Gallery: edge to edge strip ---------- */ .gal__strip{ margin-top:clamp(28px,4vw,48px); display:grid;grid-auto-flow:column;grid-auto-columns:78vw;gap:14px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding-inline:var(--pad);scrollbar-width:none; } .gal__strip::-webkit-scrollbar{display:none} .gal__item{margin:0;scroll-snap-align:center} .gal__item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-media)} @media (min-width:760px){ .gal__strip{ grid-auto-columns:42vw;gap:20px; padding-inline:max(var(--pad),calc((100vw - var(--wrap))/2)); } } /* ---------- Who ---------- */ .who__duo{margin-top:clamp(30px,5vw,52px);display:grid;gap:14px} .who__a,.who__b{margin:0} .who__a img,.who__b img{border-radius:var(--r-media);width:100%} @media (min-width:760px){ .who__duo{grid-template-columns:1.45fr 1fr;align-items:end;gap:22px} .who__b{transform:translateY(-38px)} .who__b.reveal{transform:translateY(-22px) scale(.985)} .who__b.reveal.is-in{transform:translateY(-38px)} } /* ---------- Ido ---------- */ .ido__grid{display:grid;gap:clamp(26px,4vw,56px)} .ido__media{margin:0} .ido__media img{border-radius:var(--r-media);width:100%} .ido__name{margin-top:22px;font-size:clamp(22px,5vw,29px);font-weight:700;color:var(--gold)} .ido__text .lede{margin-top:10px} .ido__text .btn{margin-top:28px} @media (min-width:760px){ .ido__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .ido__media{grid-column:2;grid-row:1} .ido__text{grid-column:1;grid-row:1} } /* ---------- Agenda: oversized numerals ---------- */ .agenda__grid{display:grid;gap:clamp(28px,4vw,56px)} .steps{display:grid} .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding:26px 0;border-top:1px solid var(--line-soft)} .step:last-child{border-bottom:1px solid var(--line-soft)} .step__n{font-size:clamp(26px,5.6vw,42px);font-weight:800;color:var(--gold);opacity:.55;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .step__h{font-size:clamp(18px,4.6vw,23px);font-weight:700} .step__p{margin-top:6px;color:#C6C5BD;max-width:54ch} @media (min-width:760px){ .agenda__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start;gap:clamp(36px,5vw,80px)} .agenda__head{position:sticky;top:110px} .step{gap:26px;padding:30px 0} } /* ---------- Take ---------- */ .take__grid{margin-top:clamp(28px,4vw,48px);display:grid;counter-reset:t} .take__item{counter-increment:t;padding:24px 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline} .take__item:last-child{border-bottom:1px solid var(--line-soft)} .take__item::before{content:counter(t,decimal-leading-zero);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums} .take__item p{color:#D5D4CC;font-size:clamp(16px,4vw,18.5px);max-width:46ch} @media (min-width:760px){ .take__grid{grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,70px)} .take__item:last-child{grid-column:1 / -1} .take__item:last-child p{max-width:none} } /* ---------- Why ---------- */ .why{background:var(--ink-2);border-block:1px solid var(--line-soft)} .why__grid{display:grid;gap:clamp(28px,4vw,58px)} .why__media{margin:0} .why__media img{width:100%;border-radius:var(--r-media)} .why__text .btn{margin-top:28px} @media (min-width:760px){ .why__grid{grid-template-columns:minmax(0,1fr) minmax(0,.84fr);align-items:center;gap:clamp(36px,5vw,76px)} .why__media{grid-column:2;grid-row:1} .why__text{grid-column:1;grid-row:1} } /* ---------- Fit ---------- */ .fit__cols{margin-top:clamp(28px,5vw,48px);display:grid;gap:36px} .fit__h{font-size:16px;font-weight:700;letter-spacing:.02em;padding-bottom:14px;border-bottom:1px solid var(--line)} .fit__h--yes{color:var(--gold)} .fit__h--no{color:var(--muted)} .fit__list{margin-top:6px} .fit__list li{padding:15px 0;border-bottom:1px solid var(--line-soft);color:#D5D4CC;font-size:16.5px;line-height:1.5} .fit__list--no li{color:var(--muted)} @media (min-width:680px){.fit__cols{grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px)}} /* Honeypot: present in the DOM, reachable by a bot, invisible to a person. NOT display:none - the bots worth filtering skip those deliberately. NOT left:-9999px either, which is the usual trick and was measurably wrong here: in RTL that extends the scrollable area leftward and gave the document 9877px of horizontal overflow. The clip technique below keeps the field at its natural position occupying 1px, so it adds no scroll in any direction. aria-hidden and tabindex=-1 on the markup keep it away from screen readers and the tab order, so no real visitor can trip it. */ .hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)} /* ---------- Form ---------- */ .signup{background:var(--ink-2);border-block:1px solid var(--line-soft);scroll-margin-top:76px} .signup__in{display:grid;gap:clamp(30px,5vw,58px)} @media (min-width:800px){ .signup__in{grid-template-columns:minmax(0,1fr) minmax(0,500px);align-items:start;gap:clamp(40px,6vw,92px)} .signup__head{position:sticky;top:104px} } .signup__form{min-width:0} .form{display:grid;gap:18px} .field{display:grid;gap:8px} .label{font-size:14.5px;font-weight:600;color:#DEDDD5} .input{ width:100%;min-height:56px;padding:0 16px; background:var(--ink);color:var(--paper); border:1px solid var(--line);border-radius:var(--r-input); font:inherit;font-size:16.5px; transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out); } .input::placeholder{color:#7C7D76} .input[dir="ltr"]{text-align:right} .input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)} .input[aria-invalid="true"]{border-color:var(--danger)} .err{color:var(--danger);font-size:14px;font-weight:600} .field--check{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:start;margin-top:4px} .check{inline-size:22px;block-size:22px;margin:1px 0 0;accent-color:var(--gold);flex:none} .check__label{font-size:15px;color:#C6C5BD;line-height:1.45} .field--check .err{grid-column:1 / -1} .form__note{color:var(--muted);font-size:14px;text-align:center} .form__fail{color:var(--danger);font-size:15px;font-weight:600;text-align:center} .done{background:var(--ink);border:1px solid var(--gold);border-radius:var(--r-media);padding:32px 24px;text-align:center} .done__h{font-size:24px;color:var(--gold)} .done__p{margin-top:10px;color:#CFCEC6} /* ---------- FAQ ---------- */ .faq__grid{display:grid;gap:clamp(24px,3vw,40px)} @media (min-width:840px){ .faq__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;gap:clamp(40px,6vw,92px)} .faq__h{position:sticky;top:110px} .faq__list{margin-top:0} } .faq__list{margin-top:clamp(26px,4vw,40px);border-top:1px solid var(--line-soft)} .qa{border-bottom:1px solid var(--line-soft)} .qa__q{list-style:none;cursor:pointer;padding:23px 0;font-size:clamp(16.5px,4.2vw,19px);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:16px} .qa__q::-webkit-details-marker{display:none} /* physical borders: a logical-property chevron flips direction under RTL */ .qa__q::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .22s var(--ease-out);margin-block-start:-5px} .qa[open] .qa__q::after{transform:rotate(-135deg);margin-block-start:3px} .qa__a{padding:0 0 23px;color:#C6C5BD;max-width:64ch} @media (prefers-reduced-motion:reduce){.qa__q::after{transition:none}} /* ---------- Close ---------- */ .close{padding-block:clamp(70px,8.5vw,118px);text-align:center} .close__in{display:flex;flex-direction:column;align-items:center} .close__h{max-width:19ch} .close .btn{margin-top:34px} /* ---------- Footer ---------- */ .foot{padding-block:44px 120px;border-top:1px solid var(--line-soft);background:var(--ink-2)} .foot__legal{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch} .foot__copy{margin-top:14px;color:#6F706A;font-size:13px} @media (min-width:900px){.foot{padding-bottom:52px}} /* ---------- Sticky mobile CTA ---------- */ .sticky{ position:fixed;inset-inline:0;bottom:0;z-index:45; background:rgba(11,12,12,.95); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-top:1px solid rgba(204,165,122,.24); box-shadow:0 -12px 34px rgba(0,0,0,.42); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); transform:translateY(130%);transition:transform .28s var(--ease-out); } .sticky.is-on{transform:translateY(0)} .sticky__in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px} .sticky__meta{color:#C9C8C0;font-size:14px;font-weight:600;white-space:nowrap} .sticky .btn{--bh:48px;padding:0 24px;font-size:16px;flex:none} /* On a 320px screen the meta and the button fight for the same room, and the button wins. */ @media (max-width:359px){.sticky__meta{display:none}.sticky .btn{width:100%}} /* Hidden exactly where the hero turns into two columns and the form is permanently reachable on the right. */ @media (min-width:900px){.sticky{display:none}} @media (prefers-reduced-motion:reduce){.sticky{transition:none}} /* ========================================================= MOBILE Everything below is touch-and-small-screen work: tap targets, thumb reach, and the places where a desktop measurement does not survive a 390px screen. ========================================================= */ /* Anchor jumps land under the sticky nav without this. */ html{scroll-padding-top:78px} /* The grey flash iOS paints on tap is worse than no feedback at all; every pressable thing on this page already answers with :active. */ a,button,summary,label,.qa__q{-webkit-tap-highlight-color:transparent} .qa__q:active,.check__label:active{opacity:.7} @media (max-width:899px){ /* Full-width CTAs: on a phone the thumb aims at a band, not a pill. */ .close .btn,.ido__text .btn,.why__text .btn{width:100%;max-width:420px} /* 22px is a legal checkbox and an uncomfortable one. */ .check{inline-size:24px;block-size:24px} .check__label{font-size:14.8px} /* The strip is swiped, so the first card should sit flush with the text column above it and the last one should not stick to the screen edge. */ .gal__strip{scroll-padding-inline:var(--pad)} /* Side-by-side at 680px put four words on four lines. */ .fit__cols{gap:30px} .step{padding:22px 0;gap:14px} .take__item{padding:20px 0} .pull{margin-top:26px} } /* Under ~380px the headline is the only thing that must not shrink. */ @media (max-width:379px){ .panel{padding:16px 14px} .panel .form{gap:12px} .panel .input{min-height:50px} .label{font-size:14px} }