/* Practice-area LPs (lib/service-lx-renderer.js) — additions on top of lx.css.
   lx.css is shared with the three bespoke LPs and regenerated by samples/lp-2026-value/make.cjs, so everything that
   only the practice-area pages need lives here. Same tokens, same rhythm: navy for weight, teal for the AI Agent's
   work, red for the lawyer's judgment and the one action per screen. Flat fills only. */

/* long practice names (more than ten characters) wrap between phrases instead of overflowing the masthead */
.lx-hero--video .lx-h1--long .lx-h1__name { white-space: normal; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.22; }
@media (max-width: 900px) { .lx-hero--video .lx-h1--long .lx-h1__name { font-size: clamp(32px, 7.4vw, 52px); } }
.lx-clients__row p:last-child { flex: 1 1 22em; }

/* how: the process can have three to five steps; each step shows what we do and what you receive */
.lx-run__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-run__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lx-run__steps p.lx-run__out { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--lx-line); font-size: 14.5px; color: var(--lx-faint); }
.lx-run__steps p.lx-run__out::before { content: "お返しするもの　"; font-weight: 600; color: var(--lx-navy-3); }
html[lang="en"] .lx-run__steps p.lx-run__out::before { content: "You receive: "; }
@media (max-width: 1099px) { .lx-run__steps--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 900px) { .lx-run__steps--3, .lx-run__steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 560px) { .lx-run__steps--3, .lx-run__steps--5 { grid-template-columns: 1fr; row-gap: 8px; } }

/* scenes: when to call us → what happens if left alone → what we do → what you receive */
.lx-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lx-scene { display: flex; flex-direction: column; padding: 28px 30px 26px; background: #fff; border-radius: 12px; border: 1px solid rgba(23, 103, 95, .14); }
.lx-scene__no { margin: 0; font-family: var(--lx-en); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--lx-teal); }
.lx-scene h3 { margin: 8px 0 0; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.55; color: var(--lx-navy); }
.lx-scene p { margin: 16px 0 0; font-size: 16px; line-height: 1.85; color: var(--lx-mute); }
.lx-scene small { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; }
.lx-scene__risk small { color: var(--lx-faint); }
.lx-scene__do { padding-top: 14px; border-top: 1px solid var(--lx-line); }
.lx-scene__do small { color: var(--lx-red-deep); }
.lx-scene__out { margin-top: auto; padding-top: 18px; }
.lx-scene__out small { color: var(--lx-teal); }
.lx-scene__out ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.lx-scene__out li { padding: 6px 12px; border-radius: 6px; background: var(--lx-teal-soft); color: var(--lx-teal); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.lx-deals--wide { margin-top: 24px; }
.lx-deals--wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 1099px) { .lx-scenes { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .lx-scene { padding: 22px 20px; }
  .lx-deals--wide ul { grid-template-columns: 1fr; }
}

/* scope: each group with its one-line lead and the items as a short list */
.lx-scope--groups dd { color: var(--lx-mute); }
.lx-scope__items ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.lx-scope__items li { padding: 5px 12px; border: 1px solid rgba(23, 103, 95, .25); border-radius: 6px; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--lx-navy); background: #fff; }

/* policy: four principles, numbered */
.lx-policy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lx-navy); }
.lx-policy li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding: 26px 0 28px; border-bottom: 1px solid var(--lx-line); }
.lx-policy i { grid-row: 1 / span 2; font-style: normal; font-family: var(--lx-en); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--lx-teal-2); }
.lx-policy h3 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; color: var(--lx-navy); }
.lx-policy p { margin: 10px 0 0; font-size: 16px; line-height: 1.85; color: var(--lx-mute); }
@media (max-width: 1099px) { .lx-policy { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .lx-policy li { grid-template-columns: 40px minmax(0, 1fr); } .lx-policy i { font-size: 22px; } }

/* fees: how fees are set (navy card), the first consultation, and what we check before quoting */
.lx-pricecard--text { padding-bottom: 28px; }
.lx-pricecard__k { margin: 0; font-size: 14px; color: var(--lx-teal-hi); }
.lx-pricecard--text strong { display: block; margin-top: 8px; font-family: var(--lx-serif); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.45; color: #fff; }
.lx-pricecard--text .lx-pricecard__cap { color: var(--lx-on-navy-mute); line-height: 1.8; font-size: 15.5px; }
.lx-note-card--first { margin-top: 18px; background: #fff; color: var(--lx-ink); border: 1px solid var(--lx-line); }
.lx-note-card--first .k { color: var(--lx-teal); font-weight: 600; }
.lx-note-card--first strong { color: var(--lx-navy); font-size: 22px; }
.lx-note-card--first .d { color: var(--lx-mute); }
.lx-big-list--factors li { position: relative; padding-left: 30px; font-size: clamp(18px, 1.6vw, 21px); }
.lx-big-list--factors li::before { content: ""; position: absolute; left: 2px; top: 31px; width: 10px; height: 10px; border-radius: 2px; background: var(--lx-teal-2); }
@media (min-width: 1100px) { .lx-price > .a { grid-column: 1 / span 5; } .lx-price > .b { grid-column: 7 / -1; } }
.lx-price .b .lx-h3 { margin-bottom: 18px; }

/* guide: related practice areas under the articles */
.lx-related__k { margin: 32px 0 10px; font-size: 14px; font-weight: 600; color: var(--lx-faint); }
.lx-guide--rel .lx-related__k { margin-top: 0; }
.lx-related { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lx-related a { display: inline-block; padding: 9px 16px; border: 1px solid rgba(23, 103, 95, .25); border-radius: 999px; text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--lx-navy); background: #fff; }
.lx-related a:hover { border-color: var(--lx-teal); color: var(--lx-teal); }
.lx-guide--rel > .b { grid-column: 1 / -1; }

/* the form uses assets/js/service-lp.js, which sets its own status classes */
.lx-form .slp-form__status { grid-column: 1 / -1; margin: 0; font-size: 15px; min-height: 1.5em; }
.lx-form .slp-form__status--success { color: var(--lx-teal); }
.lx-form .slp-form__status--error { color: var(--lx-red-deep); }

/* hero image: the practice-area LPs show a still image (same tone as the three LPs' images) where the three LPs show a film.
   16:9 on wide screens; at 900px and below 4:3 (the image keeps its objects in the centre, so the sides can be cropped) */
.lx-hero--still .lx-hero__film { aspect-ratio: 16 / 9; overflow: hidden; }
.lx-hero--still .lx-hero__film picture,
.lx-hero--still .lx-hero__film img { display: block; width: 100%; height: 100%; }
.lx-hero--still .lx-hero__film img { object-fit: cover; object-position: 50% 50%; background: #fff; }
@media (max-width: 900px) { .lx-hero--still .lx-hero__film { aspect-ratio: 4 / 3; } }