/* Law-firm one-page site.
   Colors, fonts, buttons, placeholders and the credibility ribbon come from site.css (the founder-led site).
   Layout and motion follow aboardtheworld.com: slow fades, a slow zoom inside pictures, parallax, pinned headings
   beside scrolling lists, a transparent header that scrolls away with the page, and a footer revealed from under the page.
   Light sections only. The copy lives in index.html and nowhere else. */

:root{
  --lavender:#D9D3ED;
  --tint:#EFEDF1;
  --on-dark:rgba(255,255,255,.86);
  --hair-dark:rgba(255,255,255,.18);
  --ease-cine:cubic-bezier(.16,1,.3,1);
  --head-h:96px;
}
@media (max-width:599px){:root{--head-h:76px}}

body{background:var(--pearl)}
/* No sideways sliding on phones (Yulia, 2026-10-09: on her Android phone the page could be pushed sideways, showing empty space on the right).
   The page clips anything wider than the screen instead of letting it widen the page. clip, unlike hidden, keeps the pinned headings working. */
html{overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}body{overflow-x:clip}}
/* The header no longer follows the page, so menu links land at the top of each section */
html{scroll-padding-top:0}
main.lf{position:relative;z-index:1;background:var(--pearl)}

/* ---------- Header: transparent over the opening picture; it scrolls away with the page (Yulia, 2026-10-06: not sticky) ---------- */
.site-header.lf-header{position:absolute;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);background:transparent;border-bottom-color:transparent;box-shadow:none}
.site-header.lf-header:has(.nav.open){background:var(--pearl);border-bottom-color:var(--silver)}

/* Logo v6 (Yulia, 2026-10-09): the two-line wordmark alone ("AI BUSINESS SYSTEMS" over "Architect"), ink, 1199 x 192, transparent background.
   The column emblem is the favicon only for now. */
.lf-header .logo-img{height:46px;width:auto}
.lf-footer .logo-img{height:40px;width:auto}
@media (max-width:599px){.lf-header .logo-img{height:38px}.lf-footer .logo-img{height:36px}}

/* ---------- Shared pieces ---------- */
.lf-panel{padding:var(--gap) var(--side)}
.lf-stack > * + *{margin-top:24px}
.lf-stack > .lf-head + *{margin-top:36px}
.lf-stack > .list + p,.lf-stack > .lf-list + p{margin-top:32px}
.lf-head .eyebrow{margin-bottom:18px}
.lf .lead{font-size:20px;line-height:32px}
@media (min-width:900px){.lf .lead{font-size:22px;line-height:35px}}
.lf .list{margin-bottom:0}
.lf .list li{padding:15px 0 15px 30px}
/* List marker: a small dot instead of a dash (2026-10-06, Yulia: the rules between items already give enough lines) */
.lf .list li{padding-left:26px}
.lf .list li::before{top:26px;left:2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lf .list strong,.lf .lf-steps-list strong{color:var(--ink)}
.lf h2 em{display:block}
.lf-media{position:relative;overflow:hidden;min-height:340px}
.lf-media > .ph,.lf-media > img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;border:0;object-fit:cover}
.lf-founder .lf-media > img{object-position:50% 22%}
.lf-media > .ph{background:var(--tint)}
.lf-media > .ph .ph-in{padding:28px 32px}
.src{font-size:15px;line-height:24px;font-style:italic}

/* ---------- 1. Opening: full-screen picture, copy fades in slowly, the picture settles ---------- */
.lf-hero{position:relative;overflow:hidden;background:var(--pearl)}
.lf-hero-pic{display:block;position:relative;overflow:hidden}
.lf-hero-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 0;animation:lf-settle 9s var(--ease-cine) both}
.lf-hero-in{position:relative;padding-block:40px 56px}
.lf-hero-copy > *{animation:lf-rise 1.5s var(--ease-cine) both}
.lf-hero-copy > .eyebrow{animation-delay:.25s}
.lf-hero-copy > h1{animation-delay:.5s}
.lf-hero-copy > .lead{animation-delay:.85s;margin-top:28px;max-width:560px}
.lf-hero-copy > .actions{animation-delay:1.15s}
/* The invitation above the hero button (Yulia, 2026-10-12, Kane's demo invite): one step quieter than the lead, so lead, invitation and button read in order */
.lf-hero-copy > .lf-hero-invite{animation-delay:1s;margin-top:20px;max-width:560px;font-size:18px;line-height:28px;color:var(--slate)}
@media (max-width:599px){.lf-hero-pic{margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px))}}
@media (min-width:600px) and (max-width:1023px){
  .lf-hero-pic{margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px))}
  .lf-hero-pic img{aspect-ratio:16/9;object-position:74% center}
}
@media (min-width:1024px){
  .lf-hero-pic{position:absolute;inset:0}
  .lf-hero-pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:74% 22%}
  .lf-hero-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.92) 0%,rgba(247,248,250,.78) 34%,rgba(247,248,250,0) 58%)}
  /* The copy sits a little below the geometric middle, where a block reads as settled (Yulia, 2026-10-08): 32px more above than below */
  .lf-hero-in{flex:1 0 auto;display:flex;align-items:center;padding-block:calc(var(--head-h) + 56px) 40px}
  .lf-hero-copy{max-width:640px}
  .lf-hero-copy h1 em{display:block}
  /* Two-line headline (2026-10-05, resized 2026-10-06 for the longer second line): each line fits on one line beside the photo */
  .lf-hero-copy h1{font-size:clamp(48px,3.9vw,56px)}
  /* Hero spacing (Yulia, 2026-10-08, IR proximity and space): each step reads on its own, label, headline, lead, button, while staying one unit */
  .lf-hero-copy > .eyebrow{margin-bottom:28px}
  .lf-hero-copy > .lead{margin-top:40px}
  .lf-hero-copy > .actions{margin-top:48px}
  .lf-hero-copy > .lf-hero-invite{margin-top:24px;font-size:19px;line-height:30px}
  .lf-hero-copy > .lf-hero-invite + .actions{margin-top:36px}
  /* The longer hero copy (2026-10-12): lead and invitation run a little wider beside the photo, so they take fewer lines */
  .lf-hero-copy > .lead,.lf-hero-copy > .lf-hero-invite{max-width:600px}
}
/* Laptops up to 900px tall (2026-10-12): tighter steps between label, headline, lead, invitation and button, so the strip stays on the first screen */
@media (min-width:1024px) and (max-height:900px) and (orientation:landscape){
  .lf-hero-in{padding-block:calc(var(--head-h) + 28px) 20px}
  .lf-hero-copy > .eyebrow{margin-bottom:18px}
  .lf-hero-copy > .lead{margin-top:24px}
  .lf-hero-copy > .lf-hero-invite{margin-top:14px}
  .lf-hero-copy > .lf-hero-invite + .actions{margin-top:24px}
}
/* Phones held sideways skip the invitation line too, like phones held upright (Yulia, 2026-10-12) */
@media (max-width:1023px) and (max-height:599px){.lf-hero-copy > .lf-hero-invite{display:none}}
@media (min-width:1024px) and (max-height:820px) and (orientation:landscape){
  .lf-hero-in{padding-block:calc(var(--head-h) + 12px) 16px}
  .lf-hero-copy > .eyebrow{margin-bottom:14px}
  .lf-hero-copy > .lead{margin-top:18px}
  .lf-hero-copy > .lf-hero-invite{margin-top:12px}
  .lf-hero-copy > .lf-hero-invite + .actions{margin-top:20px}
}
@keyframes lf-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes lf-settle{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ---------- First screen (Yulia, 2026-10-08): the hero and the credibility strip fill exactly one screen at every size,
   so the strip always sits on the bottom edge of the screen and the next section starts below the fold.
   The hero takes whatever height the strip leaves. On phones and tablets the photo absorbs the spare height;
   on desktop the photo fills the whole hero behind the copy. ---------- */
.lf-fold{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.lf-fold > .lf-hero{flex:1 0 auto;display:flex;flex-direction:column}
.lf-fold .lf-hero-in{width:100%}
.lf-fold > .proof-ribbon{flex:none}
@media (max-width:1023px){
  .lf-hero-pic{flex:1 1 0;min-height:150px}
  /* The photo below 1024px (Yulia, 2026-10-09): the strip stays on the first screen, and the photo frame shrinks to make room.
     The framing was chosen by eye at real phone heights: a short frame trims a little of the ceiling above her and more of her torso,
     so her face stays well placed with her collar in view. It never gets shorter than just below her chin, and on phones never
     taller than a square. */
  @media (max-width:599px){.lf-hero-pic{min-height:33vw;max-height:100vw}}
  @media (min-width:600px){.lf-hero-pic{min-height:18vw;max-height:60vw}}
  .lf-hero-pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .lf-hero-in{flex:none}
}
@media (min-width:600px) and (max-width:1023px){.lf-hero-pic img{object-position:74% 8%}}
/* Phones: compact hero type and a slimmer strip, so headline, button and strip fit on the first screen of a typical phone */
@media (max-width:599px){
  .lf-hero-pic img{object-position:50% 12%}
  .lf-hero-in{padding-block:22px 26px}
  .lf-hero-copy h1{font-size:36px;line-height:40px}
  .lf-hero-copy > .lead{margin-top:14px;font-size:17px;line-height:26px}
  .lf-hero-copy > .actions{margin-top:20px}
  /* Phones skip the invitation line above the hero button (Yulia, 2026-10-12), so the button and the strip stay on the first screen */
  .lf-hero-copy > .lf-hero-invite{display:none}
  .lf-fold > .proof-ribbon{padding-block:14px}
}
/* Short phones, the usual case with the browser bars showing (Yulia, 2026-10-09): the strip must stay on the first screen, so the
   header, the space around the copy, the line spacing and the strip tighten a little before the photo has to go below her chin.
   Type sizes stay the same. */
@media (max-width:599px) and (max-height:760px){
  :root{--head-h:64px}
  .site-header.lf-header .wrap{min-height:64px}
  .lf-hero-in{padding-block:14px 16px}
  .lf-hero-copy h1{line-height:37px}
  .lf-hero-copy > .lead{margin-top:10px;line-height:24px}
  .lf-hero-copy > .actions{margin-top:14px}
  .lf-fold > .proof-ribbon{padding-block:8px}
}
/* Short laptop screens: a little less air above and below the copy */
@media (min-width:1024px) and (max-height:760px){.lf-hero-in{padding-block:calc(var(--head-h) + 20px) 8px}}

/* ---------- 2. Credibility strip: the gliding ribbon from site.css, sitting on the opening's lower edge ---------- */

/* Credibility strip spacing on phones (Yulia, 2026-10-09): each item is as wide as its own text, with even space on both sides,
   so about two items show at a time. Tablets and wider keep the original evenly spaced fixed-width items (site.css).
   The loop time keeps the glide at about 32px a second. */
@media (max-width:600px){
  .lf-fold .pr-item{width:auto;padding-inline:16px}
  .lf-fold .pr-item .pc-num,.lf-fold .pr-item .pc-text{white-space:nowrap}
  .lf-fold .pr-row{animation-duration:73.7s}
  .lf-fold .proof-ribbon::before,.lf-fold .proof-ribbon::after{width:6%}
}

/* ---------- 3. Who it is for: the same layout as Why this works, heading beside the list ---------- */
.lf-who{padding-block:var(--gap)}
.lf-who-grid{display:grid;gap:40px}
.lf-who-body > .list + p{margin-top:40px}
.lf-who-body > p + p{margin-top:16px}
.lf-who-body > p{margin-bottom:0}
@media (min-width:1024px){
  .lf-who{padding-block:128px}
  /* Mirror of the Challenge section below it: the list on the left, the heading on the right */
  .lf-who-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:96px;align-items:start}
  .lf-who-grid > .lf-sticky{order:2}
}

/* ---------- 4. The challenge: light; the heading stays put while the quotes pass ---------- */
.lf-light{background:var(--white)}
.lf-light-grid{display:grid;gap:40px;padding-block:var(--gap)}
.lf-quotes{list-style:none;margin:0;padding:0;border-top:1px solid var(--silver)}
.lf-quotes li{padding:22px 0;border-bottom:1px solid var(--silver)}
.lf-quotes q{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;line-height:34px;color:var(--ink);quotes:"\201C" "\201D"}
.lf-quotes q::before{content:open-quote}.lf-quotes q::after{content:close-quote}
@media (min-width:900px){.lf-quotes q{font-size:32px;line-height:40px}}
.lf-light-body > * + *{margin-top:24px}
.lf-light-body > .lf-quotes + p{margin-top:40px}
@media (min-width:1024px){
  .lf-light-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start;padding-block:128px}
  .lf-sticky{position:sticky;top:48px}
}

/* ---------- 5. Outcomes: a picture held beside the text, inside the page column ---------- */
.lf-out{padding-block:var(--gap)}
.lf-out-grid{display:grid;gap:40px}
.lf-round{border-radius:var(--r-soft)}
.lf-out-pic .lf-media{min-height:0;aspect-ratio:3/2}
@media (min-width:1024px){
  .lf-out{padding-block:128px}
  .lf-out-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}
  .lf-out-pic{position:sticky;top:40px}
  .lf-out-pic .lf-media{aspect-ratio:4/5}
}

/* ---------- 6. How it works: heading and lead on the left, the four stages in a 2x2 grid on the right, all pictures visible ---------- */
.lf-how{padding-block:var(--gap);background:var(--white)}
.lf-how-grid{display:grid;gap:56px}
.lf-stages{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.lf-stage-img{margin:0 0 24px;position:relative;aspect-ratio:3/2;border-radius:var(--r-soft);overflow:hidden;background:var(--tint);box-shadow:0 34px 64px -46px rgba(40,35,56,.5)}
.lf-stage-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Stage label (eyebrow type), stage name (small serif heading), then the text */
.lf-step-n{margin:0 0 10px;font-family:var(--sans);font-size:13px;line-height:19px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lf-step-h{margin:0 0 12px;font-size:30px;line-height:36px}
.lf-step-t{margin:0}
@media (min-width:600px){.lf-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}}
.lf-how-head{max-width:760px}
/* Wide screens: about 30/70, the heading column stays in place while the stages scroll (stacked below 1200px, where the column would get too narrow) */
@media (min-width:1200px){
  .lf-how-grid{grid-template-columns:minmax(0,var(--hcol)) minmax(0,1fr);gap:64px;align-items:start}
  .lf-how-head{max-width:none;position:sticky;top:48px}
}
@media (min-width:1024px){
  .lf-how{padding-block:128px}
  .lf-step-h{font-size:28px;line-height:34px}
  .lf-step-t{font-size:16px;line-height:26px}
}

/* Big screens: the section keeps the 1200px page width of the Sample Deal (Yulia, 2026-10-12, replaces the 2026-10-06 widening); only the stage type grows */
@media (min-width:1500px){
  .lf-step-h{font-size:32px;line-height:38px}
  .lf-step-t{font-size:17px;line-height:28px}
}

/* ---------- 7. Middle button: a light picture band, the button over it ---------- */
.lf-band{position:relative;overflow:hidden;background:var(--tint);color:var(--ink);text-align:center}
.lf-band-bg{position:absolute;inset:-12% 0;will-change:transform}
.lf-band-bg .ph{position:absolute;inset:0;border:0;border-radius:0;background:var(--tint);align-items:flex-end;justify-content:flex-end}
.lf-band-bg .ph .ph-in{padding:28px max(var(--side),calc((100% - 1200px) / 2));margin-bottom:12%}
.lf-band::after{content:"";position:absolute;inset:0;background:rgba(247,248,250,.5);pointer-events:none}
.lf-band-in{position:relative;z-index:1;padding-block:144px}
.lf-band-in p{max-width:640px;margin:24px auto 0;color:var(--slate)}
.lf-band .actions{justify-content:center;margin-top:0}
@media (max-width:899px){.lf-band-in{padding-block:104px}}

/* ---------- 8. Why this works, then the founder block from the founder-led site ---------- */
.lf-why{padding-block:var(--gap)}
.lf-why-grid{display:grid;gap:40px}
@media (min-width:1024px){.lf-why-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;align-items:start}.lf-why{padding-block:128px 112px}}
.lf-founder-sec{background:var(--white);padding-block:var(--gap)}
.lf-founder{display:grid;gap:40px;align-items:center}
.lf-founder-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;border-radius:var(--r-soft)}
.lf-founder .lead{font-size:19px;line-height:31px}
@media (min-width:900px){.lf-founder{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px}.lf-founder .lead{font-size:20px;line-height:33px}}
.lf-coda{max-width:780px;margin:80px auto 0;text-align:center}
.lf-coda::before{content:"";display:block;width:56px;height:1px;margin:0 auto 36px;background:var(--accent)}
.lf-quote blockquote{margin:0}
.lf-quote blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px;line-height:34px;color:var(--ink);margin:0}
.lf-quote blockquote p::before{content:"\201C"}
.lf-quote blockquote p::after{content:"\201D"}
@media (min-width:900px){.lf-quote blockquote p{font-size:26px;line-height:38px}}
.lf-quote cite{display:block;margin-top:40px;font-style:normal}
.lf-quote .cite-name{display:block;font-family:var(--serif);font-weight:600;font-size:22px;line-height:28px;color:var(--ink)}
.lf-quote .cite-name::before{content:"\2013\00a0"}
.lf-quote .cite-role{display:block;margin-top:12px;font-size:13px;line-height:19px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lf-quote .actions{justify-content:center;margin-top:56px}
@media (max-width:899px){.lf-coda{margin-top:56px}}
@media (min-width:1024px){.lf-founder-sec{padding-block:128px}}

/* ---------- 9. FAQ: question left, answer right ---------- */
.lf-faq{padding-block:var(--gap)}
.lf-qa-list{margin-top:48px;border-top:1px solid var(--silver)}
.lf-qa{display:grid;gap:12px;padding:32px 0;border-bottom:1px solid var(--silver)}
.lf-qa h3{font-size:26px;line-height:32px}
.lf-qa p{margin:0;max-width:640px}
@media (min-width:900px){.lf-qa{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px;padding:40px 0}.lf-qa h3{font-size:28px;line-height:34px}}
@media (min-width:1024px){.lf-faq{padding-block:128px}}

/* ---------- 10. Final button: a light picture band, then the footer is revealed from under the page ---------- */
.lf-final{position:relative;overflow:hidden;background:var(--tint)}
.lf-final .lf-band-bg .ph{background:var(--tint)}
.lf-final::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.94) 0%,rgba(247,248,250,.8) 45%,rgba(247,248,250,.12) 100%);pointer-events:none}
.lf-final-in{position:relative;z-index:1;padding-block:160px}
.lf-final-in > div{max-width:640px}
.lf-final h2 + p{margin-top:28px}
@media (max-width:899px){.lf-final-in{padding-block:112px}}
/* Footer (Yulia, 2026-10-08): works like the header. It is transparent and sits over the bottom of the closing band,
   so on laptops the closing picture runs behind it (the band keeps room for it at its foot, --foot-h); below 1024px
   it continues the band's white. The line beside the logo is in sentence case on one line, not spaced capitals. */
:root{--foot-h:156px}
/* Narrow laptops: the links wrap under the logo, so the band keeps more room for the footer */
@media (min-width:1024px) and (max-width:1279px){:root{--foot-h:210px}}
.site-footer.lf-footer{position:relative;z-index:2;background:var(--white);border-top:0;padding:8px 0 40px}
@media (min-width:1024px){.site-footer.lf-footer{margin-top:calc(-1 * var(--foot-h));min-height:var(--foot-h);display:flex;align-items:flex-end;background:transparent;padding:24px 0 32px}}
.lf-footer .wrap{width:100%}
/* Footer layout (Yulia, 2026-10-08, second pass), following the IR B2B model (logo, the main navigation repeated, copyright).
   Left: the logo with one quiet line under it. Right: the same section links as the header, their bottom edge level with that line,
   so everything rests on one bottom line. Two text styles at one size: links in ink, the line in slate. No lines. */
.lf-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.lf-foot-id{flex:none}
.lf-foot-id .logo{display:inline-block}
@media (min-width:1024px){.lf-foot-line{white-space:nowrap}}
.lf-foot-line{margin:14px 0 0;max-width:none;font-size:14px;line-height:22px;color:var(--slate)}
.lf-foot-line span[aria-hidden]{margin:0 6px}
/* Below 1024px the line breaks before the copyright instead of leaving the dot alone at the start of a line (Yulia, 2026-10-09: no orphan text) */
@media (max-width:1023px){.lf-foot-line span[aria-hidden]{display:none}.lf-foot-copy{display:block}}
/* LinkedIn link at the end of the footer line (Yulia, 2026-10-21): quiet like the line, own line below 1024px */
.lf-foot-li{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.lf-foot-li:hover{color:var(--accent)}
/* With LinkedIn added, the line is too long to sit beside the footer links on laptops, so it breaks before the copyright at every width */
.lf-foot-line > span[aria-hidden]{display:none}
.lf-foot-copy{display:block;white-space:nowrap}
.lf-foot-line .lf-foot-copy span.lf-foot-dot2{display:inline}
.lf-foot-nav{display:flex;flex-wrap:wrap;gap:6px 28px}
.lf-foot-nav a{font-size:14px;line-height:22px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;white-space:nowrap}
.lf-foot-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:1023px){.lf-foot{flex-direction:column;align-items:flex-start}.lf-foot-nav{gap:8px 22px}}
@media (min-width:1024px){
  .lf-close{padding-bottom:var(--foot-h)}
  /* The closing picture fades out at the bottom (Yulia, 2026-10-09), mirroring its fade-in at the top: near-solid pearl from the
     bottom edge up through the footer's menu row, then fading to clear above it, across the full width. */
  .lf-close-pic::before{content:"";position:absolute;inset:auto 0 0 0;height:calc(var(--foot-h) + 120px);z-index:1;background:linear-gradient(0deg,rgba(247,248,250,.96) 0,rgba(247,248,250,.92) 76px,rgba(247,248,250,0) 100%);pointer-events:none}
}

/* ---------- The button parked in the header on tablets (desktop has it in the menu row, phones in the menu) ---------- */
.head-cta{display:none}
@media (min-width:600px) and (max-width:1239px){
  .site-header .head-cta{display:inline-flex;margin-left:auto;min-height:44px;padding:8px 22px;font-size:15px}
}

/* ---------- Motion: slow fades as things arrive, slow zoom inside pictures ---------- */
.lf-motion [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity 1.3s var(--ease-cine) var(--d,0s),transform 1.6s var(--ease-cine) var(--d,0s)}
.lf-motion [data-reveal="left"]{transform:translateX(-56px)}
.lf-motion [data-reveal="right"]{transform:translateX(56px)}
.lf-motion [data-reveal="fade"]{transform:none;transition:opacity 2s ease var(--d,0s)}
.lf-motion [data-reveal].is-in{opacity:1;transform:none}
.lf-motion .lf-media[data-reveal] > *{transform:scale(1.14);transition:transform 9s cubic-bezier(.2,.6,.2,1)}
.lf-motion .lf-media[data-reveal].is-in > *{transform:scale(1)}
.lf-motion .lf-stage[data-reveal] .lf-stage-img img{transform:scale(1.1);transition:transform 7s cubic-bezier(.2,.6,.2,1)}
.lf-motion .lf-stage[data-reveal].is-in .lf-stage-img img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .lf-hero-copy > *,.lf-hero-pic img{animation:none}
  .lf-stage-img img{transition:none}
  .lf-band-bg{transform:none!important}
}

/* No orphan words (Yulia, 2026-10-09: no single word alone on a last line). Short lines balance their words across lines;
   paragraphs use the browser's "pretty" wrapping from site.css. The site check (tools/check_site.py in the repo) tests every screen size. */
.lf :is(.eyebrow,.st,.qt,.nm,.cite-role){text-wrap:balance}

/* Audit fixes (2026-10-09) */
/* Narrow phones under 375px: the logo shrinks so the menu button stays on its row instead of dropping onto the photo */
@media (max-width:374px){.lf-header .logo-img{height:32px}.site-header.lf-header .wrap{gap:12px}}
/* Tall screens 1024px and wider held upright (large tablets in portrait): the photo sits above the text, as on tablets,
   instead of the text lying over her face */
@media (min-width:1024px) and (orientation:portrait){
  .lf-hero-pic{position:relative;inset:auto;margin-top:calc(var(--head-h) + env(safe-area-inset-top,0px));flex:1 1 0;min-height:18vw;max-height:60vw}
  .lf-hero-pic::after{content:none}
  .lf-hero-pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-position:74% 8%}
  .lf-hero-in{flex:none;display:block;padding-block:40px 56px}
}
/* Narrow laptops: the lead paragraph narrows so it keeps its distance from her hair. On wide windows (wider than 13:10) the photo
   also shifts right to clear the headline; on squarer windows, such as a side panel, the original framing keeps her fully in frame. */
@media (min-width:1024px) and (max-width:1279px) and (orientation:landscape){.lf-hero-copy > .lead,.lf-hero-copy > .lf-hero-invite{max-width:520px}}
@media (min-width:1024px) and (max-width:1279px) and (min-aspect-ratio:13/10){.lf-hero-pic img{object-position:40% 22%}}
/* The open phone menu and the folded questions also work on browsers without :has() (set by law.js) */
.site-header.lf-header.menu-open{background:var(--pearl);border-bottom-color:var(--silver)}
.faq-fold .t9-faq .card.faq-shut .sm{display:none}

/* Credibility strip type one step up on laptops and wider (Yulia, 2026-10-09); phones keep their size */
@media (min-width:1024px){.lf-fold .pr-item .pc-num{font-size:25px;line-height:31px}.lf-fold .pr-item .pc-text{font-size:15px;line-height:21px}}
/* The Challenge quotes match the bullet points' size in every other section (Yulia, 2026-10-09), keeping their italic */
.lf .t9-q .qt{font-size:22px;line-height:30px}
@media (min-width:1024px){.lf .t9-q .qt{font-size:26px;line-height:34px}}
@media (min-width:1500px){.lf .t9-q .qt{font-size:28px;line-height:37px}}