/* ln.css, the service pages in The Line's idiom (Stage 3, Nov 2026, spec §3,
   §4 and §8.4). Built by render.ln_page() / ln_opening / ln_section / ln_offer /
   ln_case / ln_faq / ln_cta, on body.ln-doc.

   Long-form reading pages for buyers and search: paper, ink, teal, generous
   whitespace, light display weights, thin hairlines. The pen only ACCENTS:
   a hand underline under each title, a frame around the opening media, an
   arrow on each CTA ([data-pen], drawn once by ln.js when seen).

   Three states for a stroke, and no state ever hides content:
   - no JS: every stroke is drawn (the markup's own paths);
   - html.ln-doc-js (set in <head> by ln_tags()['boot']): undrawn until ln.js
     marks it .is-drawn; if ln.js never arrives, a 3s animation finishes it;
   - reduced motion (the OS, or html.a11y-motion): drawn, no transition.
   Families only through tokens (--font-display, --font-body, --font-note). */

/* ── Ground ─────────────────────────────────────────────────────────────── */
body.ln-doc { background: var(--base); background-image: none; color: var(--ink); }
.ln-doc-main { display: block; padding-block-end: clamp(48px, 8vw, 120px); }
.ln-doc .num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* style.css greys every p (--text-muted); reading copy here is ink. :where() keeps it at
   p's own weight, so any class (.ln-open-line, .is-them, …) still sets its own tone. */
:where(body.ln-doc) p { color: var(--ink); }

/* One reading column; the hairline between chapters spans exactly that column. */
.ln-open, .ln-sec {
  width: min(1100px, calc(100% - 2 * clamp(16px, 4vw, 44px)));
  margin-inline: auto; box-sizing: border-box;
}
.ln-sec { padding-block: clamp(56px, 8vw, 112px) 0; }
.ln-sec + .ln-sec { margin-block-start: clamp(56px, 8vw, 112px); border-block-start: 1px solid var(--rule); }
.ln-open + .ln-sec { margin-block-start: clamp(24px, 4vw, 56px); border-block-start: 1px solid var(--rule); }
.ln-sec > p, .ln-sec .ln-prose { max-width: 38em; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; text-wrap: pretty; }
.ln-sec > p + p { margin-block-start: 1em; }
html[lang="he"] .ln-sec > p, html[lang="he"] .ln-sec .ln-prose { line-height: 1.8; }
.ln-sec a:not([class]) { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* ── Titles: light display weights, the hand underline under each ──────── */
body.page-sheet.ln-doc h1.ln-h1, body.page-sheet.ln-doc h2.ln-h2, body.page-sheet.ln-doc .ln-offer-name, body.page-sheet.ln-doc .ln-case h3 {
  font-family: var(--font-display); color: var(--ink); text-wrap: balance;
}
body.page-sheet.ln-doc h1.ln-h1 {
  margin: 0; font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(38px, 5vw, 76px); line-height: 1.05;
}
body.page-sheet.ln-doc h2.ln-h2 {
  margin: 0; font-weight: 400; letter-spacing: -.012em;
  font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12;
}
html[lang="he"] body.page-sheet.ln-doc h1.ln-h1 { font-weight: 500; letter-spacing: 0; line-height: 1.12; }
html[lang="he"] body.page-sheet.ln-doc h2.ln-h2 { font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.ln-u { display: block; width: clamp(120px, 18vw, 240px); height: auto; margin-block: 8px clamp(22px, 3vw, 36px); overflow: visible; }
.ln-open .ln-u { width: clamp(150px, 24vw, 300px); }
/* The pen starts where the reader starts. */
[dir="rtl"] .ln-u, html[dir="rtl"] .ln-u, [dir="rtl"] .ln-arrow { transform: scaleX(-1); }

/* ── The pen ────────────────────────────────────────────────────────────── */
[data-pen] path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ln-frame path { stroke-width: 2; }
html.ln-doc-js [data-pen] path {
  stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01;
  transition: stroke-dashoffset .95s cubic-bezier(.6, 0, .2, 1) var(--pen-delay, 0s);
}
html.ln-doc-js [data-pen].is-drawn path { stroke-dashoffset: 0; }
/* The arrow: shaft, then head. The frame is slower: it has further to go. */
html.ln-doc-js .ln-arrow path + path { transition-delay: calc(var(--pen-delay, 0s) + .45s); transition-duration: .4s; }
html.ln-doc-js .ln-frame path { transition-duration: 1.6s; }
.ln-open .ln-u { --pen-delay: .15s; }
.ln-open .ln-frame { --pen-delay: .5s; }
.ln-open .ln-arrow { --pen-delay: .9s; }
/* ln.js never ran (blocked, failed): finish every stroke anyway. */
html.ln-doc-js:not(.ln-doc-ready) [data-pen] path { animation: ln-doc-finish 0s 3s forwards; }
@keyframes ln-doc-finish { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.ln-doc-js [data-pen] path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; animation: none; }
}
html.a11y-motion.ln-doc-js [data-pen] path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; animation: none; }

/* ── The opening: title and line, then the media in its drawn frame ─────── */
.ln-open { padding-block: clamp(40px, 7vw, 104px) clamp(24px, 4vw, 48px); display: grid; gap: clamp(32px, 5vw, 64px); }
.ln-open.has-media { align-items: center; }
@media (min-width: 900px) {
  .ln-open.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.ln-open-line {
  margin: 0; max-width: 26em; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.35; color: var(--sec); text-wrap: balance;
}
html[lang="he"] .ln-open-line { font-weight: 400; }
.ln-media { margin: 12px; min-width: 0; }
.ln-media-in { position: relative; }
.ln-media-in > img, .ln-media-in > video, .ln-media-in > picture img { display: block; width: 100%; height: auto; }
/* A full-page capture is cut to its top: the opening is a glimpse, not the page. */
.ln-media-in > img, .ln-media-in > picture img { max-height: min(72vh, 680px); object-fit: cover; object-position: 50% 0; }
.ln-media-in > img, .ln-media-in > video, .ln-media-in > picture {
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 16%, transparent);
}
/* Under the frame, outside it: whose work this is, and the live link. */
.ln-media-cap { margin-block-start: 26px; font-size: 15px; color: var(--sec); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.ln-media-cap b { color: var(--ink); font-weight: 600; }
/* A host name never breaks inside itself (the hyphens in tslil-and-movement): the caption
   wraps between the name and the link instead. */
.ln-media-cap bdi, .ln-site-cap bdi { white-space: nowrap; }
.ln-doc .ln-media-cap a, .ln-doc .ln-site-cap a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
/* The short paragraph and the CTA under the opening line. */
.ln-open-after { margin-block-start: clamp(20px, 2.4vw, 30px); }
.ln-open-after > p { margin: 0; max-width: 32em; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; text-wrap: pretty; }
html[lang="he"] .ln-open-after > p { line-height: 1.8; }
.ln-open-after > .ln-btn { margin-block-start: clamp(22px, 2.6vw, 32px); }

/* ── Client sites as screens (the captures of the homepage, images/line/) ─ */
/* A window onto a live site: a fixed aspect, the capture's top showing.
   .ln-roll holds the whole capture; on hover (a mouse) it rolls down the page
   and back, never on touch or under reduced motion. */
.ln-win { position: relative; overflow: hidden; background: #FFF; aspect-ratio: var(--ar, 16 / 10);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 16%, transparent); }
.ln-roll { position: absolute; inset-inline: 0; top: 0; transform: translateY(0); }
.ln-roll img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ln-roll { transition: top var(--roll, 10s) ease-in-out, transform var(--roll, 10s) ease-in-out; }
  .ln-win:hover .ln-roll { top: 100%; transform: translateY(-100%); }
}
html.a11y-motion .ln-roll { transition: none !important; top: 0 !important; transform: none !important; }
/* A phone beside the window, overlapping its lower corner. */
.ln-duo { position: relative; padding-block-end: 9%; padding-inline-end: 12%; }
.ln-duo .ln-win.is-phone { position: absolute; inset-inline-end: 0; bottom: 0; width: 27%; --ar: 390 / 800;
  border-radius: 18px; border: 5px solid var(--ink); }
/* Three sites: one large, two under it. */
.ln-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 24px); }
.ln-sites .ln-site:first-child { grid-column: 1 / -1; }
.ln-site { margin: 0; min-width: 0; }
.ln-site-cap { margin-block-start: 10px; font-size: 14px; line-height: 1.45; color: var(--sec); }
.ln-site-cap b { display: block; color: var(--ink); font-weight: 600; }
.ln-sites .ln-site:first-child .ln-site-cap { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.ln-sites .ln-site:first-child .ln-site-cap b { display: inline; }
.ln-frame { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); overflow: visible; pointer-events: none; }

/* ── CTAs: a link-button with a drawn arrow ─────────────────────────────── */
.ln-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--base) !important; text-decoration: none;
  padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 16px; line-height: 1.2;
  border: 1.5px solid var(--accent);
}
.ln-btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.ln-btn-ghost { background: transparent; color: var(--accent) !important; }
.ln-btn-ghost:hover { background: var(--tint); border-color: var(--accent); }
.ln-arrow { width: 30px; height: auto; flex: none; overflow: visible; }
.ln-btn:not(.ln-btn-ghost) .ln-arrow path { stroke: currentColor; }
.ln-btn:focus-visible, .ln-more:focus-visible, .ln-case-link a:focus-visible, .ln-faq summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.ln-more { color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none; }
.ln-more:hover { text-decoration: underline; text-underline-offset: .2em; }

/* The topic label: the companion hand, as on the homepage. */
.ln-k { display: block; font-family: var(--font-note); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.2; color: var(--accent); }

/* A bare number as a label: the body face (the note font's 1 reads as a vav in Hebrew). */
.ln-n { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.ln-faq + .ln-btn, .ln-faq + .ln-btn-ghost { margin-block-start: clamp(28px, 4vw, 40px); }

/* ── Reading blocks inside a chapter ────────────────────────────────────── */
body.page-sheet.ln-doc .ln-h3 { margin: clamp(40px, 5vw, 64px) 0 clamp(14px, 2vw, 22px); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--ink); }
/* Rhythm: a block after a paragraph, and a paragraph after a block. */
.ln-sec > p + :is(ul, ol, div, .ln-tablewrap) { margin-block-start: clamp(24px, 3vw, 36px); }
.ln-sec > :is(ul, ol, .ln-facts, .ln-offer-list, .ln-meta-line) + p { margin-block-start: clamp(22px, 3vw, 32px); }
.ln-meta-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: clamp(22px, 3vw, 30px) 0 0; font-size: 16px; color: var(--sec); }
.ln-meta-line .ln-k { display: inline; }
.ln-back { margin: clamp(28px, 4vw, 40px) 0 0; }
.ln-sec > .ln-u + .ln-h3 { margin-block-start: 0; }
/* The note in the companion hand. */
.ln-doc .ln-sec p.ln-note { margin: clamp(22px, 3vw, 32px) 0 0; font-family: var(--font-note); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.35; color: var(--accent); max-width: 30em; }
/* A list with ticks the pen draws, one after another. */
.ln-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); max-width: 40em; }
.ln-ticks li { display: flex; gap: 16px; align-items: baseline; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; }
.ln-ticks li > span:first-child { flex: none; transform: translateY(.18em); }
.ln-tick { display: block; width: 24px; height: 20px; overflow: visible; }
/* Label and text pairs: an open grid, hairlines above each pair. */
.ln-facts { display: grid; gap: clamp(22px, 3vw, 34px) clamp(24px, 3.4vw, 48px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ln-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ln-facts { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } }
.ln-fact { border-block-start: 1px solid var(--rule); padding-block-start: 14px; }
.ln-fact p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.ln-fact.is-not .ln-k { color: var(--sec); }
/* The terms under the offers: small, quiet, one line each. */
.ln-terms { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: clamp(20px, 3vw, 28px) 0 0; font-size: 15px; color: var(--sec); }
.ln-terms span { font-weight: 600; color: var(--ink); }
/* Them / me: what usually happens, and what happens here. */
.ln-vs { display: grid; gap: 0; }
.ln-vs-row { display: grid; gap: 12px 40px; padding-block: clamp(24px, 3vw, 36px); }
.ln-vs-row + .ln-vs-row { border-block-start: 1px solid var(--rule); }
@media (min-width: 760px) { .ln-vs-row { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); align-items: start; } }
.ln-vs-row p { margin: 0; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.ln-vs-row .is-them { color: var(--sec); }
.ln-vs-row .is-me { padding-inline-start: clamp(16px, 2vw, 24px); border-inline-start: 2.4px solid var(--accent); color: var(--ink); }
/* Reading list. */
.ln-posts { list-style: none; margin: 0; padding: 0; max-width: 50em; }
.ln-posts li { padding-block: 16px; border-block-end: 1px solid var(--rule); display: grid; gap: 4px; }
.ln-posts li:first-child { border-block-start: 1px solid var(--rule); }
.ln-posts .ln-k { font-size: 16px; }
.ln-doc .ln-posts a { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; color: var(--ink); text-decoration: none; }
.ln-doc .ln-posts a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ln-posts-all { margin: 18px 0 0; }
/* The reading list as cards (render.ln_posts, Nov 11, 2026): the post's own figure in a frame
   the pen draws as the list comes into view, one card after the other; its topic in the hand,
   the title, the drawn arrow. Nothing lifts: on hover the frame thickens, the title turns
   accent and the arrow reaches further. */
.ln-posts.is-cards { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
@media (min-width: 1100px) { .ln-posts.is-cards { grid-template-columns: repeat(clamp(3, var(--n, 4), 4), minmax(0, 1fr)); } }
.ln-posts.is-cards li, .ln-posts.is-cards li:first-child { padding: 0; border: 0; display: block; }
.ln-doc .ln-posts.is-cards a.ln-post { display: flex; flex-direction: column; gap: 18px; height: 100%; font: inherit; color: var(--ink); text-decoration: none; }
.ln-post-fig { position: relative; display: block; aspect-ratio: 16 / 10; margin: 8px; background: #FFF; }
.ln-post-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ln-post-fig .ln-card-frame { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
.ln-post-fig .ln-card-frame path { transition-property: stroke-dashoffset, stroke-width; }
.ln-post-txt { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ln-posts.is-cards .ln-k { font-size: 17px; }
.ln-post-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.35; text-wrap: pretty; transition: color .25s; }
.ln-post .ln-arrow { margin-block-start: auto; padding-block-start: 6px; width: 40px; transition: width .3s ease; }
.ln-doc .ln-posts.is-cards a.ln-post:hover .ln-post-t, .ln-doc .ln-posts.is-cards a.ln-post:focus-visible .ln-post-t { color: var(--accent); }
.ln-posts.is-cards a.ln-post:hover .ln-card-frame path, .ln-posts.is-cards a.ln-post:focus-visible .ln-card-frame path { stroke-width: 3; }
.ln-posts.is-cards a.ln-post:hover .ln-arrow, .ln-posts.is-cards a.ln-post:focus-visible .ln-arrow { width: 54px; }
/* Phones: one card a row, the figure beside the words. */
@media (max-width: 560px) {
  .ln-posts.is-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ln-doc .ln-posts.is-cards a.ln-post { flex-direction: row; align-items: center; gap: 20px; }
  .ln-post-fig { flex: none; width: 38%; }
  .ln-post-t { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .ln-post .ln-arrow, .ln-post-t { transition: none; } }
/* The page's last line, and the CTA under it. */
.ln-end { margin-block-start: clamp(56px, 8vw, 96px); }
.ln-doc .ln-sec p.ln-end-line { margin: 0 0 clamp(20px, 2.6vw, 28px); max-width: 24em; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; color: var(--ink); text-wrap: balance; }
html[lang="he"] .ln-doc .ln-sec p.ln-end-line { font-weight: 400; }
.ln-end + .ln-more, .ln-end + p > .ln-more { display: inline-block; margin-block-start: 22px; }
/* Phases: numbered steps, the number light and large in the display face. */
.ln-phases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ln-phase { display: grid; grid-template-columns: clamp(52px, 7vw, 96px) minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 24px); padding-block: clamp(24px, 3.4vw, 40px); }
.ln-phase + .ln-phase { border-block-start: 1px solid var(--rule); }
.ln-phase-n { font-family: var(--font-display); font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
body.page-sheet.ln-doc .ln-phase h3 { margin: 4px 0 14px; font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 1.9vw, 26px); line-height: 1.25; color: var(--ink); }
.ln-phase-body { display: grid; gap: 16px 48px; }
@media (min-width: 900px) { .ln-phase-body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.ln-phase .ln-why { margin: 0; font-size: 16px; line-height: 1.65; color: var(--sec); padding-inline-start: 16px; border-inline-start: 2.4px solid var(--accent); }
.ln-phase .ln-why b { display: block; color: var(--accent); font-family: var(--font-note); font-weight: 400; font-size: 18px; margin-block-end: 2px; }
/* What is not included: a quiet list, a short grey dash. */
.ln-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 44em; }
.ln-nots li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.55; color: var(--sec); }
.ln-nots li::before { content: ""; flex: none; width: 12px; height: 1.5px; background: var(--pencil); transform: translateY(-.3em); }
/* The scopes side by side. */
.ln-tablewrap { overflow-x: auto; margin-block-start: clamp(20px, 3vw, 28px); -webkit-overflow-scrolling: touch; }
.ln-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ln-table th, .ln-table td { text-align: start; vertical-align: top; padding: 14px 16px; border-block-end: 1px solid var(--rule); }
.ln-table thead th { font-weight: 600; color: var(--ink); border-block-end: 1.5px solid var(--ink); font-size: 15px; }
.ln-table tbody td:first-child { font-family: var(--font-note); color: var(--accent); font-size: 17px; white-space: nowrap; width: 1%; }
.ln-table .is-here { background: var(--tint); }
.ln-table thead .is-here { color: var(--accent); }
.ln-doc .ln-table a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.ln-table .num { font-weight: 600; }

/* ── Offers: open rows, not boxes ───────────────────────────────────────── */
.ln-offer { display: grid; gap: 18px 48px; padding-block: clamp(28px, 4vw, 48px); }
.ln-offer + .ln-offer { border-block-start: 1px solid var(--rule); }
@media (min-width: 760px) { .ln-offer { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
body.page-sheet.ln-doc .ln-offer-name { margin: 6px 0 0; font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
html[lang="he"] body.page-sheet.ln-doc .ln-offer-name { font-weight: 600; }
.ln-offer-price { margin: 14px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
html[lang="he"] .ln-offer-price { font-weight: 400; }
.ln-offer-per { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--sec); }
.ln-offer-meta { margin: 8px 0 0; font-size: 14px; color: var(--sec); }
.ln-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ln-incl li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.55; }
.ln-incl li::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 2px; background: var(--accent); transform: translateY(-.3em); }
.ln-offer-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-block-start: 24px; }
/* The plan that follows any offer (maintenance): the same row, on a tint. */
.ln-offer.is-tint { background: var(--tint); padding-inline: clamp(18px, 3vw, 40px); margin-block-start: clamp(28px, 4vw, 40px); border-radius: 4px; }
.ln-offer + .ln-offer.is-tint { border-block-start: 0; }
.ln-offer-list + .ln-note, .ln-offer-list + p { margin-block-start: clamp(20px, 3vw, 28px); }

/* ── Cases: open blocks; the decision gets the tint ─────────────────────── */
.ln-case { padding-block: clamp(28px, 4vw, 48px); }
.ln-case + .ln-case { border-block-start: 1px solid var(--rule); }
body.page-sheet.ln-doc .ln-case h3 { margin: 6px 0 0; font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
html[lang="he"] body.page-sheet.ln-doc .ln-case h3 { font-weight: 500; }
.ln-case-what { margin: 8px 0 0; font-size: 17px; color: var(--sec); }
.ln-case-sub { margin: 4px 0 0; font-size: 14px; color: var(--sec); }
.ln-case-link { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.ln-case-link a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.ln-case-cols { display: grid; gap: 20px 40px; margin-block-start: clamp(20px, 3vw, 32px); }
@media (min-width: 760px) { .ln-case-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-case-cols p { margin: 8px 0 0; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.ln-case-cols .is-decision { padding-inline-start: clamp(16px, 2vw, 24px); border-inline-start: 2.4px solid var(--accent); }

/* What people say: the companion hand, between quiet marks. */
.ln-quote { margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; max-width: 40em; }
.ln-quote p { margin: 0; font-family: var(--font-note); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
/* Yehuda CLM sets large for its size: a step smaller in Hebrew, so a quote sits in
   proportion with the body copy (Tanya, Nov 11, 2026). */
html[lang="he"] .ln-quote p { font-size: clamp(15px, 1.15vw, 18px); }
html[lang="en"] .ln-quote p::before { content: "\201C"; color: var(--accent); }
html[lang="en"] .ln-quote p::after { content: "\201D"; color: var(--accent); }
/* Hebrew opens low and closes high, as on the homepage: „…” */
html[lang="he"] .ln-quote p::before { content: "\201E"; color: var(--accent); }
html[lang="he"] .ln-quote p::after { content: "\201D"; color: var(--accent); }
.ln-quote footer { margin-block-start: 10px; font-size: 14px; color: var(--sec); }
.ln-quote footer b { color: var(--ink); font-weight: 600; margin-inline-end: 8px; }
.ln-quote footer:has(.ln-quote-av) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.ln-quote-av { inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; margin-inline-end: 12px; box-shadow: 0 0 0 1.5px var(--accent); }

/* Screens */
.ln-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 24px); margin-block-start: clamp(22px, 3vw, 36px); }
.ln-shots.is-phones { grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); }
.ln-shot { margin: 0; display: grid; gap: 10px; align-content: start; }
.ln-shot figcaption { font-size: 14px; color: var(--sec); }
.ln-shot-in { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #FFF; box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 14%, transparent); }
.ln-shot-in > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ln-shot.is-phone .ln-shot-in { aspect-ratio: 308 / 666; border-radius: 20px; }
.ln-shot.is-scroll .ln-shot-in > img { transition: object-position 7s ease-in-out; }
.ln-shot.is-scroll:hover .ln-shot-in > img { object-position: 50% 100%; }
.ln-shot.is-phones .ln-shot-in { display: flex; align-items: center; justify-content: center; gap: 7%; background: var(--tint); box-shadow: none; }
.ln-shot.is-phones .ln-shot-in > img { width: auto; height: 86%; border-radius: 12px; box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--ink) 40%, transparent); }
.ln-tour { position: absolute; inset: 0; }
.ln-tour img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; animation: ln-tour calc(var(--n) * 1.8s) linear infinite; animation-delay: calc(var(--i) * 1.8s); }
.ln-tour img:first-child { opacity: 1; animation: none; }
.ln-shot:hover .ln-tour img { animation-play-state: paused; }
@keyframes ln-tour { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }

.ln-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: clamp(20px, 3vw, 30px) 0 0; font-size: 15px; color: var(--sec); }
.ln-status .ln-k { display: inline; }
.ln-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); animation: ln-pulse 2.2s ease-in-out infinite; }
@keyframes ln-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 6%, transparent); } }

/* ── FAQ: hairline rows with a drawn plus ───────────────────────────────── */
.ln-faq { border-block-end: 1px solid var(--rule); max-width: 50em; }
.ln-faq:first-child { border-block-start: 1px solid var(--rule); }
.ln-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 20px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary:hover { color: var(--accent); }
.ln-faq p { margin: 0 0 22px; max-width: 42em; font-size: 17px; line-height: 1.7; color: var(--ink); }
.ln-plus { flex: none; width: 20px; height: 20px; overflow: visible; }
.ln-plus path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.ln-plus-v { transition: transform .3s ease; transform-origin: 50% 50%; }
.ln-faq[open] .ln-plus-v { transform: scaleY(0); }

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ln-media { margin: 10px 8px; }
  .ln-site-cap { font-size: 13px; }
  /* The phase number sits above its title: the narrow column is for the text. */
  .ln-phase { grid-template-columns: minmax(0, 1fr); }
  .ln-phase-n { font-size: 30px; margin-block-end: 6px; }
  .ln-frame { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
  .ln-shots.is-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Reduced motion: everything in its finished state ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ln-tour img:not(:first-child) { animation: none; opacity: 0; }
  .ln-dot { animation: none; }
  .ln-shot.is-scroll .ln-shot-in > img, .ln-plus-v { transition: none; }
}
html.a11y-motion .ln-tour img:not(:first-child) { animation: none; opacity: 0; }
html.a11y-motion .ln-dot { animation: none; }
html.a11y-motion .ln-shot.is-scroll .ln-shot-in > img, html.a11y-motion .ln-plus-v { transition: none; }

/* ══ Round 2 (Nov 11, 2026): the homepage's pen on the long pages ═════════════
   The thread: ONE stroke (ln.js) that runs the length of the page, from the
   opening's CTA down the margin, across above each chapter title and into it as
   its underline, then on. Drawn by scroll, the pen tip near mid-screen, like the
   homepage. It exists only when ln.js builds it (html.ln-thread-on); without JS
   there is no line and every chapter is visible. */
.ln-doc-main { position: relative; }
.ln-thread { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.ln-thread path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ln-thread circle { fill: var(--accent); transition: opacity .3s; }
html.ln-thread-on .ln-open, html.ln-thread-on .ln-sec { position: relative; z-index: 1; }
/* The thread draws each chapter's underline itself; the chapter keeps the room for it. */
html.ln-thread-on .ln-sec > .ln-u { visibility: hidden; }
/* The thread crossing above each title is the divider now: the hairline steps aside. */
html.ln-thread-on .ln-sec + .ln-sec, html.ln-thread-on .ln-open + .ln-sec { border-block-start-color: transparent; }
@media print { html.ln-thread-on .ln-sec + .ln-sec, html.ln-thread-on .ln-open + .ln-sec { border-block-start-color: var(--rule); } }
.ln-case-media .ln-media-in { margin: 12px; }
/* A chapter's content rises in when the pen reaches its title (the homepage's reveal). */
html.ln-thread-on .ln-sec > :not(.ln-h2):not(.ln-u) {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
html.ln-thread-on .ln-sec.is-in > :not(.ln-h2):not(.ln-u) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.ln-thread-on .ln-sec > :not(.ln-h2):not(.ln-u) { opacity: 1; transform: none; transition: none; }
  .ln-thread circle { opacity: 0; }
}
html.a11y-motion.ln-thread-on .ln-sec > :not(.ln-h2):not(.ln-u) { opacity: 1; transform: none; transition: none; }
html.a11y-motion .ln-thread circle { opacity: 0; }
@media print {
  .ln-thread { display: none; }
  html.ln-thread-on .ln-sec > * { opacity: 1 !important; transform: none !important; }
  html.ln-thread-on .ln-sec > .ln-u { visibility: visible; }
}

/* ── Four sites in the opening: two by two ─────────────────────────────────── */
.ln-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ln-sites .ln-site:first-child { grid-column: auto; }
.ln-sites .ln-site:first-child .ln-site-cap { display: block; }
.ln-site-cap a { display: inline-block; }

/* ── Price cards, drawn by the pen ─────────────────────────────────────────── */
.ln-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(22px, 2.6vw, 34px); align-items: stretch; }
.ln-pcard { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.2vw, 28px); min-width: 0; }
.ln-card-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ln-card-frame path { stroke-width: 1.8; }
.ln-pcard.is-here { background: var(--tint); }
.ln-pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 44px; }
.ln-pcard-here { margin: 0; font-family: var(--font-note); font-size: 18px; color: var(--accent); }
.ln-glyph { width: 92px; height: auto; flex: none; overflow: visible; margin-inline-start: auto; }
.ln-glyph path { stroke-width: 1.5 !important; }
body.page-sheet.ln-doc .ln-pcard-name { margin: 14px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; color: var(--ink); }
html[lang="he"] body.page-sheet.ln-doc .ln-pcard-name { font-weight: 600; }
.ln-doc .ln-pcard-name a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ln-doc .ln-pcard p.ln-pcard-price { margin: 12px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.1; color: var(--ink); }
html[lang="he"] .ln-doc .ln-pcard p.ln-pcard-price { font-weight: 400; }
.ln-doc .ln-pcard p.ln-pcard-meta { margin: 6px 0 0; font-size: 14px; color: var(--sec); }
.ln-pcard .ln-incl { margin-block-start: 20px; gap: 8px; }
.ln-pcard .ln-incl li { font-size: 15px; line-height: 1.5; }
.ln-pcard-rows { margin: 18px 0 0; display: grid; gap: 12px; }
.ln-pcard-rows div { border-block-start: 1px solid var(--rule); padding-block-start: 10px; }
.ln-pcard.is-here .ln-pcard-rows div { border-color: color-mix(in srgb, var(--accent) 22%, var(--rule)); }
.ln-pcard-rows dt { font-family: var(--font-note); color: var(--accent); font-size: 16px; line-height: 1.2; }
.ln-pcard-rows dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.ln-pcard-acts { margin-block-start: auto; padding-block-start: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; }
.ln-cards + p { margin-block-start: clamp(28px, 3.4vw, 40px); }

/* ── The payment terms as a drawn timeline ──────────────────────────────────── */
.ln-pay { position: relative; margin-block-start: clamp(28px, 4vw, 48px); }
.ln-pay-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ln-pay-stops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 28px; }
@media (min-width: 760px) {
  .ln-pay-stops { grid-template-columns: 1fr 1fr 1.25fr; gap: 0 clamp(24px, 4vw, 56px); }
}
.ln-pay-stop { position: relative; padding-inline-start: 34px; min-width: 0; }
.ln-pay-dot { position: absolute; inset-inline-start: 4px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.ln-pay-dot.is-loop { background: none; }
/* room for the pen's loop around the plan's dot */
.ln-pay-stop.is-after { padding-inline-start: 54px; }
.ln-pay-stop.is-after .ln-pay-dot { inset-inline-start: 14px; }
@media (min-width: 760px) {
  .ln-pay-stop, .ln-pay-stop.is-after { padding-inline-start: 0; padding-block-start: 44px; }
  .ln-pay-dot, .ln-pay-stop.is-after .ln-pay-dot { inset-inline-start: 0; top: 0; }
  .ln-pay-stop.is-after .ln-pay-dot { inset-inline-start: 20px; }
}
.ln-pay-pct { display: block; direction: ltr; unicode-bidi: isolate; font-family: var(--font-note); font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--accent); text-align: start; }
html[dir="rtl"] .ln-pay-pct { text-align: right; }
.ln-pay-t { display: block; margin-block-start: 8px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.ln-doc .ln-pay p.ln-pay-name { margin: 6px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--ink); }
.ln-doc .ln-pay p.ln-pay-price { margin: 6px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; color: var(--ink); }
.ln-pay-price > span:not(.num) { font-family: var(--font-body); font-size: 15px; color: var(--sec); }
.ln-doc .ln-pay p.ln-pay-meta { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--sec); }
.ln-incl-sm { margin-block-start: 12px; gap: 6px; }
.ln-incl-sm li { font-size: 14px; }
/* A package page: its card beside the timeline. */
.ln-price-row { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .ln-price-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .ln-price-row .ln-pay { margin-block-start: 8px; } }
@media (min-width: 900px) and (max-width: 1199px) { .ln-price-row .ln-pay-stops { grid-template-columns: 1fr; gap: 28px; } .ln-price-row .ln-pay-stop { padding-inline-start: 34px; padding-block-start: 0; } .ln-price-row .ln-pay-dot { inset-inline-start: 4px; top: 6px; } .ln-price-row .ln-pay-stop.is-after { padding-inline-start: 54px; } .ln-price-row .ln-pay-stop.is-after .ln-pay-dot { inset-inline-start: 14px; } }

/* ── Cases with one site window: text beside the window ─────────────────────── */
.ln-case.is-side { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .ln-case.is-side { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.ln-case.is-side .ln-case-cols { grid-template-columns: minmax(0, 1fr); }
.ln-shot.is-html { margin: 0; }
.ln-case-media .ln-win { --ar: 16 / 10; }
.ln-case-media .ln-duo .ln-win.is-phone { --ar: 390 / 800; }

/* ══ Product and software (Stage 3, Tasks 12 and 13) ══════════════════════════ */
/* An opening with two pieces that must not share a frame (render.ln_opening with a list):
   each in its own drawn frame with its own caption, side by side, bottoms aligned. The
   product opening: the Ongage flow in a window, the Relyon phone beside it (two clients,
   never overlapping, Tanya Nov 11, 2026). */
.ln-media-set { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 0 clamp(30px, 3.4vw, 52px); align-items: end; }
.ln-media-piece { margin: 0; min-width: 0; }
/* the frames' feet on one line whatever their captions' length */
@supports (grid-template-rows: subgrid) {
  .ln-media-set { grid-template-rows: auto auto; }
  .ln-media-set > .ln-media-piece { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .ln-media-piece > .ln-media-in { align-self: end; }
}
.ln-media-piece .ln-media-cap { margin-block-start: 24px; display: block; font-size: 14px; line-height: 1.5; }
.ln-media-piece .ln-media-cap b { display: block; font-size: 15px; margin-block-end: 2px; }
.ln-open .ln-media-piece + .ln-media-piece .ln-frame { --pen-delay: .8s; }
.ln-pm-flow { --ar: 16 / 10; background: #FFF; }
.ln-pm-flow video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #FFF; }
.ln-pm-phone { position: relative; width: 100%; aspect-ratio: 308 / 666; border: 5px solid var(--ink);
  border-radius: 20px; overflow: hidden; background: #FFF; box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 16%, transparent); }
/* Phones: the window on top, then the phone small with its caption beside it. */
@media (max-width: 640px) {
  .ln-media-set { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .ln-media-set > .ln-media-piece { grid-row: auto; grid-template-rows: none; }
  .ln-media-set > .ln-media-piece.is-phone { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 0 30px; align-items: center; }
  .ln-media-piece.is-phone .ln-media-cap { margin: 0; }
}
.ln-pm-screens { position: absolute; inset: 0; }
.ln-pm-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0;
  animation: ln-tour calc(var(--n) * 2.6s) linear infinite; animation-delay: calc(var(--i) * 2.6s); }
.ln-pm-screens img:first-child { opacity: 1; animation-name: ln-tour-first; }
@keyframes ln-tour-first { 0%, 33% { opacity: 1; } 41%, 92% { opacity: 0; } 100% { opacity: 1; } }
.ln-media-cap span b { margin-inline-end: 6px; }

/* The software opening: the pen draws a portal, stroke by stroke (--d), after the frame. */
.ln-sketch { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; overflow: visible; background: #FFF;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 12%, transparent); }
.ln-sketch path { stroke-width: 2; }
.ln-sketch path.is-thin { stroke-width: 1.5; }
.ln-sketch path.is-bold { stroke-width: 3.4; }
html.ln-doc-js .ln-sketch path { transition: stroke-dashoffset .7s cubic-bezier(.5, 0, .3, 1) calc(var(--pen-delay, 0s) + var(--d, 0s)); }
.ln-open .ln-sketch { --pen-delay: .4s; }

/* Two ways in, side by side. */
.ln-entries { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 760px) { .ln-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-entry { padding-block-start: 16px; border-block-start: 1px solid var(--rule); }
body.page-sheet.ln-doc .ln-entry-q { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--ink); text-wrap: balance; }
.ln-entry > p { margin: 12px 0 0; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.ln-doc .ln-entry p.ln-entry-start { display: flex; align-items: center; gap: 10px; margin-block-start: 18px; font-family: var(--font-note); font-size: clamp(19px, 1.6vw, 23px); color: var(--accent); }
.ln-doc .ln-entry p.ln-entry-start a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ln-doc .ln-entry p.ln-entry-start a:hover span, .ln-doc .ln-entry p.ln-entry-start a:focus-visible span { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ln-entries + p { margin-block-start: clamp(28px, 4vw, 40px); }

/* Steps: the phases' rows, with a when-label above the title. */
/* The steps (render.ln_steps, Nov 11, 2026): the whole path on one screen. Wide screens:
   columns side by side, each number joined to the next by a drawn line. Phones: a compact
   list, the number beside the text. */
.ln-steps .ln-k { display: block; margin-block-end: 2px; }
body.page-sheet.ln-doc .ln-steps h3 { margin: 0 0 6px; }
.ln-doc p.ln-step-p { margin: 0; max-width: 40em; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.ln-step-top { display: flex; align-items: center; gap: 14px; }
.ln-step-link { display: none; flex: 1; min-width: 24px; align-items: center; }
.ln-step-shaft { flex: 1; height: 8px; overflow: visible; }
.ln-step-head { flex: none; width: 10px; height: 14px; margin-inline-start: -6px; overflow: visible; }
.ln-step-link path { stroke-width: 2; }
html.ln-doc-js .ln-step-link { --pen-delay: calc(var(--s, 0) * .35s + .2s); }
html.ln-doc-js .ln-step-link .ln-step-head path { transition-delay: calc(var(--pen-delay) + .8s); transition-duration: .3s; }
[dir="rtl"] .ln-step-link svg { transform: scaleX(-1); }
.ln-phases.ln-steps .ln-phase { grid-template-columns: clamp(44px, 5vw, 64px) minmax(0, 1fr); align-items: start; padding-block: 18px; }
.ln-steps .ln-phase-n { font-size: clamp(30px, 3vw, 40px); }
@media (min-width: 860px) {
  .ln-phases.ln-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 36px); }
  .ln-phases.ln-steps .ln-phase { display: flex; flex-direction: column; gap: 14px; padding-block: 8px 0; }
  .ln-phases.ln-steps .ln-phase + .ln-phase { border-block-start: 0; }
  .ln-steps .ln-phase-n { font-size: clamp(40px, 3.6vw, 52px); }
  .ln-step-link { display: flex; margin-inline-end: calc(-1 * clamp(14px, 2vw, 28px)); }
}
@media (max-width: 560px) {
  .ln-phases.ln-steps .ln-phase { grid-template-columns: 44px minmax(0, 1fr); padding-block: 14px; }
  .ln-steps .ln-phase-n { font-size: 26px; margin: 0; }
}
.ln-steps + p { margin-block-start: clamp(22px, 3vw, 32px); }

/* One offer alone: the card spans the column, two sides inside it. */
.ln-cards.is-one { grid-template-columns: minmax(0, 1fr); }
/* One offer alone (render.ln_pcard wide=, Nov 11, 2026): the head is the hero, the name at
   the reading start and the price at the end; a hairline; then what it is and the CTA, and
   beside it what it holds, each item with a tick the pen draws. */
.ln-pcard.is-wide { display: block; padding: clamp(28px, 3.4vw, 52px) clamp(22px, 3.4vw, 56px); }
.ln-pcard-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 48px;
  padding-block-end: clamp(22px, 2.6vw, 32px); border-block-end: 1px solid color-mix(in srgb, var(--accent) 26%, var(--rule)); }
.ln-pcard-id { min-width: 0; flex: 1 1 18em; }
.ln-pcard.is-wide .ln-glyph { display: block; width: 96px; margin: 0 0 18px; }
.ln-pcard.is-wide .ln-pcard-here, .ln-pcard.is-wide .ln-k { display: block; margin-block-end: 6px; }
body.page-sheet.ln-doc .ln-pcard.is-wide .ln-pcard-name { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; text-wrap: balance; }
.ln-pcard-cost { flex: 0 1 auto; text-align: end; }
.ln-doc .ln-pcard.is-wide p.ln-pcard-price { margin: 0; font-size: clamp(40px, 4.6vw, 66px); line-height: 1; letter-spacing: -.01em; color: var(--accent); white-space: nowrap; }
html[lang="he"] .ln-doc .ln-pcard.is-wide p.ln-pcard-price { letter-spacing: 0; }
.ln-doc .ln-pcard.is-wide p.ln-pcard-meta { margin: 10px 0 0; font-size: 15px; }
.ln-pcard-body { display: grid; gap: 28px clamp(36px, 5vw, 80px); padding-block-start: clamp(24px, 3vw, 36px); }
@media (min-width: 760px) { .ln-pcard-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.ln-pcard.is-wide .ln-pcard-main { display: flex; flex-direction: column; min-width: 0; }
.ln-pcard.is-wide .ln-pcard-acts { margin-block-start: 0; padding-block-start: 26px; justify-content: flex-start; }
.ln-pcard.is-wide .ln-pcard-main > .ln-pcard-acts:first-child { padding-block-start: 0; }
.ln-pcard-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 32px; }
@media (min-width: 1000px) { .ln-pcard-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-pcard-ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ln-pcard-ticks li > span:first-child { flex: none; transform: translateY(.22em); }
.ln-pcard-ticks .ln-tick { width: 20px; height: 17px; }
.ln-pcard-ticks li.is-not { color: var(--sec); }
.ln-pcard-ticks .ln-tick.is-not path { stroke: var(--sec); }
/* the single meeting's list is a menu (pick one), not inclusions: a dash, no tick */
.ln-pcard.is-menu .ln-pcard-ticks .ln-tick path { d: path("M6 10.5 C 10 10, 14 10.4, 18 10"); }
.ln-doc .ln-pcard p.ln-pcard-note { margin: 18px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.ln-doc .ln-pcard.is-wide p.ln-pcard-note { margin: 0; font-size: 17px; line-height: 1.7; max-width: 30em; }

/* What goes into the work: the two scopes side by side. */
.ln-scopes { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 900px) { .ln-scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-scopes .ln-h3 { margin-block-start: 0; }
.ln-scopes .ln-ticks li { font-size: 17px; }
.ln-doc p.ln-scope-not { margin: 22px 0 0; padding-block-start: 12px; border-block-start: 1px solid var(--rule); font-size: 15px; color: var(--sec); }
/* The scopes as stages (render.ln_scopes, Nov 11, 2026): pen-framed panels, a number and a
   title, drawn ticks, what is left out as a note in the hand behind a struck line, and a drawn
   arrow from each stage to the next. */
.ln-scopes.is-panels { gap: 0; align-items: stretch; }
@media (min-width: 900px) { .ln-scopes.is-panels { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); } }
.ln-scope { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.6vw, 36px); min-width: 0; }
.ln-scope.is-next { background: var(--tint); }
.ln-scope-head { display: flex; align-items: baseline; gap: 14px; padding-block-end: 18px; margin-block-end: 22px;
  border-block-end: 1px solid color-mix(in srgb, var(--accent) 24%, var(--rule)); }
.ln-scope-n { flex: none; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
body.page-sheet.ln-doc .ln-scopes.is-panels .ln-h3 { margin: 0; }
.ln-scope-ticks { grid-template-columns: minmax(0, 1fr) !important; gap: 13px; }
.ln-doc .ln-scopes.is-panels p.ln-scope-not { display: flex; gap: 10px; align-items: baseline; margin: auto 0 0; padding: 26px 0 0; border: 0;
  font-family: var(--font-note); font-size: 18px; line-height: 1.4; color: var(--sec); }
.ln-scopes.is-panels .ln-scope-not > span:first-child { flex: none; transform: translateY(.2em); }
.ln-scopes.is-panels .ln-scope-not .ln-tick { width: 20px; height: 17px; }
.ln-scope-join { display: flex; align-items: center; justify-content: center; padding-block: 14px; }
.ln-scope-arrow { width: 44px; height: 20px; overflow: visible; transform: rotate(90deg); }
@media (min-width: 900px) { .ln-scope-join { padding: 0; } .ln-scope-arrow { transform: none; } [dir="rtl"] .ln-scope-arrow { transform: scaleX(-1); } }
html.ln-doc-js .ln-scope-arrow { --pen-delay: .5s; }
html.ln-doc-js .ln-scope-arrow path + path { transition-delay: calc(var(--pen-delay, 0s) + .45s); transition-duration: .4s; }

/* The ending's quieter ways in. */
.ln-doc p.ln-alt { margin: 22px 0 0; font-size: 15px; color: var(--sec); }
.ln-doc .ln-alt a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.ln-faqs + .ln-meta-line { margin-block-start: clamp(28px, 4vw, 40px); }
/* The FAQ as a user flow (render.ln_faq_flow, Nov 11, 2026): decision nodes the pen frames,
   each with a drawn diamond, joined by drawn arrows (a zigzag on wide screens, straight down
   on phones), ending at the terminal node, the closing line and the CTA. */
.ln-flow { display: flex; flex-direction: column; max-width: 980px; }
.ln-flow-node.ln-faq, .ln-flow-node.ln-faq:first-child { position: relative; border: 0; max-width: none; padding-inline: clamp(18px, 2vw, 26px); background: var(--base); }
.ln-flow-node .ln-card-frame { inset: 0; }
.ln-flow-node[open] { background: color-mix(in srgb, var(--tint) 55%, var(--base)); }
.ln-flow-node summary { justify-content: flex-start; padding-block: 18px; }
.ln-flow-node summary > span { flex: 1; }
.ln-flow-node > p { padding-inline-start: 40px; }
.ln-diamond { flex: none; width: 24px; height: 24px; overflow: visible; }
.ln-diamond path { stroke-width: 1.8; }
.ln-flow-node[open] .ln-diamond path { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.ln-flow-link { position: relative; height: 56px; }
.ln-flow-link svg { position: absolute; overflow: visible; }
.ln-flow-wide { display: none; inset: 0; width: 100%; height: 100%; }
.ln-flow-down { inset-inline-start: calc(50% - 10px); top: 0; width: 20px; height: 100%; }
.ln-flow-head { inset-inline-start: calc(50% - 8px); bottom: -2px; width: 16px; height: 10px; }
.ln-flow-link path { stroke-width: 2; }
html.ln-doc-js .ln-flow-link { --pen-delay: .2s; }
html.ln-doc-js .ln-flow-head path { transition-delay: calc(var(--pen-delay) + .7s); transition-duration: .3s; }
.ln-flow-end.ln-end { margin: 0; }
.ln-flow + .ln-meta-line { margin-block-start: clamp(28px, 4vw, 40px); }
@media (min-width: 760px) {
  .ln-flow-node { width: 62%; }
  .ln-flow-node.is-a { align-self: flex-start; }
  .ln-flow-node.is-b { align-self: flex-end; }
  .ln-flow-end.ln-end { width: min(100%, 760px); align-self: center; }
  .ln-flow-link { height: 64px; }
  .ln-flow-wide { display: block; }
  .ln-flow-down { display: none; }
  .ln-flow-head { inset-inline-start: calc(var(--fx, 50%) - 8px); }
  [dir="rtl"] .ln-flow-wide { transform: scaleX(-1); }
}
.ln-posts-all + .ln-faqs { margin-block-start: clamp(40px, 5vw, 64px); }

/* The pains: seven rows that open one at a time. */
.ln-pains { max-width: 52em; }
.ln-pain { border-block-end: 1px solid var(--rule); }
.ln-pain:first-child { border-block-start: 1px solid var(--rule); }
.ln-pain summary { display: flex; align-items: center; gap: 18px; padding-block: 18px; cursor: pointer; list-style: none; }
.ln-pain summary::-webkit-details-marker { display: none; }
.ln-pain summary .ln-n { flex: none; width: 2.2em; }
.ln-pain-l { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.ln-pain summary:hover .ln-pain-l, .ln-pain[open] .ln-pain-l { color: var(--accent); }
.ln-pain[open] .ln-plus-v { transform: scaleY(0); }
.ln-pain summary:focus-visible, .ln-build-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ln-pain-b { padding: 0 0 26px calc(2.2em + 18px); }
html[dir="rtl"] .ln-pain-b { padding: 0 calc(2.2em + 18px) 26px 0; }
body.page-sheet.ln-doc .ln-pain-t { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--ink); }
.ln-doc .ln-pain-b p { margin: 10px 0 0; font-size: 17px; line-height: 1.7; max-width: 42em; text-wrap: pretty; }
.ln-doc .ln-pain-b p.ln-pain-q { font-family: var(--font-note); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; color: var(--accent); }

/* What I build: capabilities beside the projects that carry them. */
.ln-build { display: grid; gap: clamp(28px, 4vw, 56px); margin-block-start: clamp(24px, 3vw, 36px); }
@media (min-width: 900px) { .ln-build { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.ln-build-list { list-style: none; margin: 0; padding: 0; }
.ln-build-list li + li { border-block-start: 1px solid var(--rule); }
.ln-build-item { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; align-items: baseline; width: 100%;
  padding-block: 14px; cursor: pointer; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--ink); }
.ln-build-item .ln-k { font-size: 16px; }
.ln-build-item:hover, .ln-build-item.is-on { color: var(--accent); }
.ln-examples .ln-h3 { margin-block-start: 0; }
.ln-doc p.ln-xref { margin: 0 0 18px; font-family: var(--font-note); font-size: 18px; color: var(--sec); min-height: 1.4em; }
.ln-example-list { display: grid; gap: 18px; }
.ln-example { position: relative; padding: 18px 20px; border-inline-start: 2.4px solid var(--rule); transition: border-color .25s, background-color .25s; }
.ln-example.is-hit { border-inline-start-color: var(--accent); background: var(--tint); }
.ln-chip { display: inline-block; margin-block-start: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--sec); }
body.page-sheet.ln-doc .ln-example h4 { margin: 8px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--ink); }
.ln-doc .ln-example p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; }
.ln-doc p.ln-examples-note { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--sec); }
/* The software page, Nov 11, 2026 (Tanya: too wordy, gaps, nothing aligned): every block
   spans the one content column, edge to edge, and long text is set as components. */
.ln-doc p.ln-lead { max-width: 46em; font-size: clamp(18px, 1.3vw, 20px); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.ln-ticks.is-grid { max-width: none; }
@media (min-width: 760px) { .ln-ticks.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(32px, 4vw, 64px); } }
.ln-ticks.is-grid li { font-size: clamp(17px, 1.25vw, 19px); }
/* the pains: pen-framed cards, the number, the name and what was heard; open for the story */
.ln-pains.is-grid { max-width: none; display: grid; gap: clamp(16px, 1.8vw, 24px); align-items: start; }
@media (min-width: 860px) { .ln-pains.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-pain.is-card, .ln-pain.is-card:first-child { position: relative; border: 0; background: var(--base); }
.ln-pain.is-card .ln-card-frame { inset: 0; }
.ln-pain.is-card[open] { background: color-mix(in srgb, var(--tint) 55%, var(--base)); }
.ln-pain.is-card summary { align-items: flex-start; gap: 16px; padding: 20px clamp(18px, 2vw, 24px); }
.ln-doc .ln-pain.is-card summary .ln-n { display: block; width: auto; font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1; color: var(--accent); }
.ln-pain-h { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ln-pain.is-card .ln-pain-l { font-size: clamp(19px, 1.5vw, 21px); }
.ln-pain-q { font-family: var(--font-note); font-size: 18px; line-height: 1.35; color: var(--accent); }
.ln-pain.is-card .ln-plus { margin-block-start: 4px; }
.ln-pain.is-card .ln-pain-b, html[dir="rtl"] .ln-pain.is-card .ln-pain-b { padding: 0 clamp(18px, 2vw, 24px) 22px; padding-inline-start: calc(clamp(18px, 2vw, 24px) + 46px); }
.ln-pain.is-card .ln-pain-b > p:first-child { margin-block-start: 0; }
/* what I build: the capability rows and the examples start on one line; examples are pen-framed */
body.page-sheet.ln-doc .ln-build .ln-examples > .ln-h3 { margin: 0 0 4px; }
.ln-example { border-inline-start: 0; padding: 20px 22px; }
.ln-example .ln-card-frame { inset: 0; }
.ln-example.is-hit .ln-card-frame path { stroke-width: 3; }
.ln-build-list li:first-child .ln-build-item { padding-block-start: 0; }

/* The work frame: the scoping CTA and the way back to product. */
.ln-frame-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-block-start: clamp(28px, 4vw, 40px); }
.ln-doc p.ln-rel { margin: 0; font-size: 16px; color: var(--sec); }

@media (max-width: 560px) {
  .ln-pm-phone { border-width: 4px; border-radius: 14px; }
  .ln-pain-b, html[dir="rtl"] .ln-pain-b { padding-inline: 0; }
  .ln-build-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ln-pm-screens img:not(:first-child) { animation: none; opacity: 0; }
  .ln-pm-screens img:first-child { animation: none; opacity: 1; }
  .ln-example { transition: none; }
}
html.a11y-motion .ln-pm-screens img:not(:first-child) { animation: none; opacity: 0; }
html.a11y-motion .ln-pm-screens img:first-child { animation: none; opacity: 1; }
/* A Hebrew portal keeps its sidebar on the right: the sketch is mirrored, as the reader reads. */
[dir="rtl"] .ln-sketch, html[dir="rtl"] .ln-sketch { transform: scaleX(-1); }

/* ══ Mentorship, recommendations, book, thanks, 404 (Stage 3, Tasks 14 and 15) ══ */
/* The mentorship opening: a globe the pen draws, the land in pencil under it, the four
   voices around it with a pen line to where each is. A map: never mirrored in RTL. */
.ln-globe { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; margin-inline: auto; }
.ln-globe > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ln-globe-land path { fill: none; stroke: var(--pencil); stroke-width: 1; stroke-linejoin: round; opacity: .42; }
.ln-globe-pen path { stroke-width: 2; }
.ln-globe-pen path.is-thin { stroke-width: 1.2; opacity: .55; }
.ln-globe-pen path.is-link { stroke-width: 1.8; }
html.ln-doc-js .ln-globe-pen path { transition: stroke-dashoffset .9s cubic-bezier(.5, 0, .3, 1) calc(var(--pen-delay, 0s) + var(--d, 0s)); }
.ln-open .ln-globe-pen { --pen-delay: .3s; }
.ln-globe-who { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: clamp(54px, 7vw, 84px); }
.ln-globe-who img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--base); box-shadow: 0 0 0 1.5px var(--accent), 0 10px 26px color-mix(in srgb, var(--ink) 16%, transparent); }
/* the name over the photo on the top row, under it on the bottom row, clear of the pen lines */
.ln-globe-who > span { position: absolute; left: 50%; transform: translateX(-50%); width: 190px; display: grid; gap: 1px; text-align: center;
  font-size: 13px; line-height: 1.3; color: var(--ink); }
.ln-globe-who.is-top > span { bottom: calc(100% + 8px); }
.ln-globe-who.is-bot > span { top: calc(100% + 8px); }
.ln-globe-who b { font-weight: 600; }
.ln-globe-arc { font-family: var(--font-note); font-size: 14px; line-height: 1.25; color: var(--accent); }
.ln-media:has(.ln-globe) .ln-media-in > .ln-frame { display: none; }
.ln-media:has(.ln-globe) .ln-media-cap { justify-content: center; text-align: center; margin-block-start: 8px; }
.ln-globe.has-who { margin-block: 56px; }
@media (max-width: 560px) {
  .ln-globe-who > span { width: 128px; font-size: 12px; }
  .ln-globe-arc { display: none; }
  .ln-globe.has-who { margin-block: 30px; }
}
[dir="rtl"] .ln-glyph.is-sprint { transform: scaleX(-1); }
/* The recommendations page: the same globe, alone and a little smaller. */
.ln-globe:not(.has-who) { max-width: 460px; }

/* The two routes: a menu (pick one) and an order (the sprint). Two wide cards, stacked. */
.ln-cards.is-one > .ln-pcard + .ln-pcard { margin-block-start: clamp(8px, 1.4vw, 16px); }
.ln-pcard-rows dd strong { display: block; font-weight: 600; font-size: 16px; margin-block-end: 2px; }
.ln-pcard.is-wide .ln-pcard-rows { margin-block-start: 0; gap: 14px; }
.ln-pcard.is-wide .ln-pcard-rows div:first-child { border-block-start: 0; padding-block-start: 0; }
.ln-glyph.is-sprint path:last-child { stroke-width: 1.8 !important; }

/* What people say: the voices, in the companion hand. */
.ln-voices { display: grid; gap: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 72px); }
@media (min-width: 900px) { .ln-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ln-voice { margin: 0; min-width: 0; }
.ln-voice figcaption { display: flex; gap: 14px; align-items: center; }
.ln-voice figcaption img, .ln-voice-mono { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ln-voice-mono { display: grid; place-items: center; background: var(--tint); color: var(--accent); font-weight: 600; font-size: 20px; }
.ln-voice figcaption > span { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--sec); }
.ln-voice figcaption b { color: var(--ink); font-weight: 600; font-size: 16px; }
.ln-voice-arc { font-family: var(--font-note); color: var(--accent); font-size: 16px; }
.ln-voice .ln-quote { margin-block-start: 16px; }
.ln-voice .ln-quote p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
.ln-recs-line { margin-block-start: clamp(32px, 4vw, 48px) !important; }
.ln-doc .ln-recs-line a.ln-more, .ln-doc .ln-media-cap a.ln-more { display: inline; font-size: 16px; }
/* The recommendations by country. */
body.page-sheet.ln-doc .ln-recs-country { display: flex; align-items: baseline; gap: 10px; }
body.page-sheet.ln-doc .ln-sec > .ln-u + .ln-recs-country { margin-block-start: 0; }
.ln-recs-country .ln-n { display: inline; }

/* /book/: the calendar is the opening's media, inside the pen's frame, usable at once. */
.ln-cal { position: relative; min-height: 680px; background: var(--base); }
.ln-cal iframe { display: block; width: 100%; min-height: 680px; border: 0; }
.ln-cal .calendly-inline-widget, .ln-cal > div { min-height: 680px; }
.ln-doc p.ln-cal-wait { margin: 0; padding: 14px 16px; font-size: 15px; color: var(--sec); }
.ln-doc .ln-cal-wait a { color: var(--accent); font-weight: 600; }
.ln-open-after > .ln-facts { margin-block-start: 0; }
@media (min-width: 640px) { .ln-open-after > .ln-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ln-doc .ln-sec p.ln-big, .ln-doc .ln-open p.ln-big { margin: 0; max-width: 26em; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; color: var(--ink); text-wrap: balance; }
html[lang="he"] .ln-doc .ln-sec p.ln-big, html[lang="he"] .ln-doc .ln-open p.ln-big { font-weight: 400; }
.ln-doc p.ln-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 17px; }
.ln-doc .ln-links a { color: var(--accent); font-weight: 600; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ln-doc p.ln-muted { margin: clamp(18px, 2.4vw, 26px) 0 0; font-size: 16px; line-height: 1.6; color: var(--sec); max-width: 36em; }
.ln-doc .ln-leadform, .ln-doc .ln-leadform.vn-contact { margin-block-start: clamp(28px, 4vw, 40px); margin-inline: 0; max-width: 640px; }

/* Thanks and 404: ways on, as rows; the pen draws each row's arrow on load. */
.ln-routes { list-style: none; margin: clamp(20px, 3vw, 30px) 0 0; padding: 0; max-width: 40em; }
.ln-routes li { border-block-end: 1px solid var(--rule); }
.ln-routes li:first-child { border-block-start: 1px solid var(--rule); }
.ln-doc a.ln-route { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 16px; color: var(--ink); text-decoration: none; }
.ln-route-t { display: grid; gap: 3px; min-width: 0; }
.ln-route-t .ln-k { font-size: 16px; }
.ln-route-t b { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.ln-route-line { font-size: 15px; line-height: 1.5; color: var(--sec); }
.ln-doc a.ln-route:hover b { color: var(--accent); }
.ln-doc a.ln-route:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ln-routes .ln-arrow { --pen-delay: var(--rd, .9s); }
.ln-open .ln-end { margin-block-start: clamp(36px, 5vw, 56px); }
.ln-doc .ln-open p.ln-end-line { margin: 0 0 clamp(18px, 2.4vw, 24px); font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--ink); }
html[lang="he"] .ln-doc .ln-open p.ln-end-line { font-weight: 400; }
.ln-open:not(.has-media) .ln-open-text { max-width: 48em; }
/* A recommendation is written in English: English marks on its words, on the Hebrew page too. */
html .ln-voice[lang="en"] .ln-quote p::before { content: "\201C"; }
html .ln-voice[lang="en"] .ln-quote p::after { content: "\201D"; }
/* The mentorship opening: the text column is the wider one, so its h1 breaks at its full stop. */
@media (min-width: 900px) { .ln-open.has-media.is-text-wide { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
/* …and it reads left to right inside the Hebrew page (an RTL text-align must not reach it). */
.ln-doc .ln-voice[dir="ltr"], .ln-doc .ln-voice[dir="ltr"] :is(p, span, b, figcaption) { text-align: left; }
.ln-open-k { margin-block-end: 12px; }

/* ── The contact node (render.ln_end, Nov 11, 2026, Tanya: "not just a box") ──
   The flow's destination and every page's end: a terminal the pen draws with rounded ends;
   inside, a drawn call (a laptop, a coffee cup on the screen, the TR mark in the corner
   tile, a camera dot that breathes) with the hand note "30 min · on Zoom" and a drawn curl
   toward the button; then the closing line and the CTA. All in the HTML: without JS
   everything shows, under reduced motion it is drawn and still. */
.ln-meet { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: clamp(22px, 3.4vw, 48px); max-width: 760px; padding: clamp(26px, 3vw, 40px) clamp(28px, 4vw, 56px);
  border-radius: 30px; background: color-mix(in srgb, var(--tint) 70%, var(--base)); }
.ln-meet-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ln-meet-frame path { stroke-width: 2; }
html.ln-doc-js .ln-meet-frame path { transition-duration: 1.6s; }
.ln-meet-art { position: relative; width: clamp(150px, 17vw, 184px); }
.ln-meet-call { display: block; width: 100%; height: auto; overflow: visible; }
.ln-meet-call path { stroke-width: 2; }
.ln-meet-call svg path { stroke-width: 9; }
html.ln-doc-js .ln-meet [data-pen] path { transition-delay: calc(var(--pen-delay, 0s) + var(--pd, 0s)); }
.ln-meet-live { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: ln-meet-live 2.6s ease-in-out infinite; }
@keyframes ln-meet-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.ln-doc .ln-meet p.ln-meet-note { margin: 8px 0 0; max-width: none; text-align: center; font-family: var(--font-note); font-size: 19px;
  line-height: 1.3; color: var(--accent); letter-spacing: 0; }
.ln-meet-n { font-family: var(--font-body); font-weight: 600; font-size: .88em; font-variant-numeric: tabular-nums; }
.ln-meet-curl { position: absolute; inset-inline-end: -50px; bottom: 2px; width: 54px; height: 34px; overflow: visible; }
.ln-meet-curl path { stroke-width: 2; }
[dir="rtl"] .ln-meet-curl { transform: scaleX(-1); }
.ln-meet-body { min-width: 0; text-align: start; }
.ln-doc .ln-sec .ln-meet p.ln-end-line, .ln-doc .ln-open .ln-meet p.ln-end-line { margin: 0 0 clamp(18px, 2.4vw, 26px); max-width: 22em; }
.ln-doc .ln-meet .ln-btn { margin: 0; }
@media (max-width: 639px) {
  .ln-meet { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 30px 22px 28px; border-radius: 26px; }
  .ln-meet-art { width: 150px; }
  .ln-meet-curl { display: none; }
  .ln-meet-body { text-align: center; }
  .ln-doc .ln-sec .ln-meet p.ln-end-line, .ln-doc .ln-open .ln-meet p.ln-end-line { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .ln-meet-live { animation: none; } }
html.a11y-motion .ln-meet-live { animation: none; }