/* Trilles AI — /personal-injury-law-firms
 *
 * Section styles for the PI landing page. Shell, buttons, forms and FAQ come
 * from site.css; everything here is prefixed pi- so nothing collides.
 */

/* ══════ HERO ══════ */
.pi-hero { padding-top: clamp(var(--s-lg), 4vw, var(--s-2xl)); border-bottom: var(--mid) solid var(--ink); overflow: hidden; }
.pi-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: end; }
.pi-hero__copy { padding-bottom: clamp(var(--s-xl), 6vw, var(--s-3xl)); align-self: center; }
.pi-hero__title { font-size: clamp(2.9rem, 1.2rem + 5.8vw, 6.6rem); line-height: 0.92; letter-spacing: -0.055em; margin-bottom: var(--s-xl); }
.pi-hero__title span { display: block; white-space: nowrap; }
.pi-hero__title .pi-gap { margin-top: 0.1em; }
.pi-hero__title span:nth-child(n+3) { color: var(--volt-deep); }
.pi-hero .btn-row { margin-top: var(--s-xl); }
.pi-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2xs) var(--s-lg); margin: var(--s-lg) 0 0; font-size: var(--t-sm); color: var(--muted); }
.pi-facts li { display: inline-flex; align-items: center; gap: var(--s-xs); }
.pi-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 1px var(--volt-deep); }
.pi-hero__alt { margin-top: var(--s-lg); font-size: var(--t-sm); color: var(--muted); }

.pi-hero__art { position: relative; margin-right: calc(max(var(--gutter), (100vw - var(--page)) / 2) * -1); align-self: end; }
.pi-hero__art img { width: 100%; }
@media (min-width: 961px) { .pi-hero__art img { width: auto; max-width: none; height: clamp(32rem, 72vh, 46rem); } }
.pi-cap { position: absolute; left: 0; bottom: var(--s-xl); display: grid; gap: 2px; padding: var(--s-sm) var(--s-md); background: var(--paper); border-left: 3px solid var(--volt); border-radius: 0 var(--r-sm) var(--r-sm) 0; box-shadow: var(--lift); font-size: var(--t-xs); line-height: 1.25; color: var(--muted); }
.pi-cap strong { font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.02em; }
.pi-cap span:first-child { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt-deep); }

/* ══════ WATCH ══════ */
.pi-watch { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--s-2xl); align-items: end; }
.pi-guest__name { margin: var(--s-sm) 0 var(--s-2xs); font-family: var(--f-display); font-size: var(--t-large); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--dark-ink); }
.pi-guest__firm { margin: 0; color: var(--dark-mute); }
.pi-guest .rule { border-top-color: var(--dark-rule); }
.pi-guest p:not(.tag):not(.pi-guest__name):not(.pi-guest__firm) { color: var(--dark-ink); max-width: 38ch; }
.pi-guest__links { display: flex; flex-wrap: wrap; gap: var(--s-sm) var(--s-lg); margin-top: var(--s-lg); }

/* ══════ GUEST VALUE ══════ */
.pi-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--mid) solid var(--ink); }
.pi-stat { padding: var(--s-lg) var(--s-xl) var(--s-xl) 0; }
.pi-stat + .pi-stat { padding-left: var(--s-xl); border-left: var(--hair) solid var(--rule); }
.pi-stat__fig { margin: 0 0 var(--s-md); font-family: var(--f-display); font-size: clamp(5rem, 2.5rem + 9vw, 10.5rem); font-weight: 800; line-height: 0.82; letter-spacing: -0.065em; color: var(--ink); }
.pi-stat__fig span { color: var(--volt-deep); }
.pi-stat h3 { font-size: var(--t-xl); line-height: 1.1; margin-bottom: var(--s-sm); max-width: 20ch; }
.pi-stat p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.pi-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-xl); padding-block: var(--s-xl); border-block: var(--hair) solid var(--rule); }
.pi-statement h3 { font-size: var(--t-xl); max-width: 16ch; }
.pi-statement p { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); max-width: 50ch; margin: 0; }
.pi-next { margin-top: var(--s-2xl); padding: var(--s-xl); border: var(--hair) dashed var(--rule-input); border-radius: var(--r-card); }
.pill { display: inline-block; margin: 0 0 var(--s-lg); padding: var(--s-2xs) var(--s-sm); border: var(--hair) dashed var(--ink); border-radius: 100px; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.pi-next__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-xl); }
.pi-next h3 { font-size: var(--t-xl); max-width: 18ch; }
.pi-next p { color: var(--ink-2); max-width: 54ch; }
.pi-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-lg) var(--s-xl); margin-top: var(--s-2xl); padding-top: var(--s-xl); border-top: var(--mid) solid var(--ink); }
.pi-cta p { margin: 0; max-width: 34ch; font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); }

/* ══════ THEMES ══════ */
.pi-themes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--s-2xl); align-items: start; }
.pi-themes__head { position: sticky; top: calc(var(--nav-h) + var(--s-xl)); }
.pi-themes__head .mega { max-width: 11ch; margin-bottom: var(--s-lg); }
.pi-list { list-style: none; margin: 0; padding: 0; border-top: var(--mid) solid var(--ink); }
.pi-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-md); padding-block: var(--s-lg) var(--s-xl); border-bottom: var(--hair) solid var(--rule); }
.num { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--volt-deep); padding-top: 0.9em; }
.pi-list h3 { font-size: var(--t-large); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: var(--s-sm); }
.pi-list p { color: var(--muted); max-width: 46ch; margin: 0; }

/* ══════ HOST ══════ */
.pi-host { overflow: hidden; }
.pi-host__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--s-xl), 6vw, 6rem); align-items: center; }
.pi-host__art { position: relative; width: min(100%, 32rem); justify-self: center; }
.pi-host__art::before { content: ""; position: absolute; inset: -4.5%; border: var(--hair) solid var(--volt); border-radius: 50%; opacity: 0.7; }
.pi-host__art img { position: relative; width: 100%; border-radius: 50%; }
.pi-host .rule { border-top-color: var(--dark-rule); }
.pi-host p:not(.lede):not(.eyebrow) { color: var(--dark-mute); max-width: 52ch; }

/* ══════ PROCESS ══════ */
.pi-process { padding-bottom: 0; overflow: hidden; }
.pi-process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-2xl); align-items: end; }
.pi-process__copy { padding-bottom: var(--s-3xl); }
.pi-process__copy .mega { max-width: 12ch; margin-bottom: var(--s-xl); }
.pi-process__art { margin-right: calc(max(var(--gutter), (100vw - var(--page)) / 2) * -1); }
.pi-process__art img { width: 100%; }

/* ══════ CHECKUP ══════ */
.pi-res { border-top: var(--mid) solid var(--ink); }
.pi-res__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(var(--s-xl), 6vw, 6.5rem); align-items: start; }
.pi-res__cover { position: sticky; top: calc(var(--nav-h) + var(--s-xl)); width: min(100%, 30rem); justify-self: center; }
.pi-res__sheet { position: relative; }
.pi-res__sheet::before { content: ""; position: absolute; inset: 0; background: var(--paper); border: var(--hair) solid var(--rule); transform: translate(14px, 14px) rotate(1.2deg); }
.pi-res__sheet img { position: relative; width: 100%; border: var(--hair) solid var(--rule); box-shadow: var(--lift); }
.pi-res__cover figcaption { margin-top: calc(var(--s-md) + 14px); font-size: var(--t-xs); color: var(--muted); }
.pi-res__copy .large { max-width: 18ch; }
.pi-res__list { list-style: none; margin: var(--s-xl) 0; padding: 0; border-top: var(--mid) solid var(--ink); }
.pi-res__list li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-xs); padding-block: var(--s-sm); border-bottom: var(--hair) solid var(--rule); color: var(--ink); }
.pi-res__list li::before { content: ""; width: 0.6rem; height: 0.6rem; margin-top: 0.45em; background: var(--volt); box-shadow: 0 0 0 1px var(--volt-deep); border-radius: 2px; }

.lead__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }
.lead__btn { width: 100%; margin-top: var(--s-xs); }
.lead__micro { margin: var(--s-sm) 0 0; font-size: var(--t-xs); color: var(--muted); }
.lead__micro a { text-decoration: underline; }
.lead__err { margin: var(--s-sm) 0 0; color: oklch(48% 0.19 27); font-size: var(--t-sm); font-weight: 500; }
.lead__err:empty { display: none; }
.lead__done { padding: var(--s-xl); border-radius: var(--r-card); background: var(--ink); color: var(--dark-mute); }
.lead__done:focus { outline: none; }
.lead__done .lead__h { color: var(--dark-ink); margin-bottom: var(--s-sm); }
.lead__done b { color: var(--volt); font-weight: 500; overflow-wrap: anywhere; }
.lead__done .link { color: var(--volt); }
.lead__done .small { color: var(--dark-mute); margin-top: var(--s-md); }

/* ══════ TRILLES FOR PI ══════ */
.pi-results { list-style: none; margin: 0 0 var(--s-2xl); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair) solid var(--dark-rule); }
.pi-results li { display: grid; gap: var(--s-xs); align-content: start; padding: var(--s-lg) var(--s-lg) 0 0; font-size: var(--t-sm); }
.pi-results li + li { padding-left: var(--s-lg); border-left: var(--hair) solid var(--dark-rule); }
.pi-results b { font-family: var(--f-display); font-weight: 800; font-size: var(--t-3xl); letter-spacing: -0.05em; line-height: 1; color: var(--volt); }
.pi-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-md); }
.pi-caps article { padding: var(--s-lg); border-radius: var(--r-card); background: var(--dark-2); border: var(--hair) solid var(--dark-rule); }
.pi-caps h3 { font-size: var(--t-lg); margin-bottom: var(--s-xs); }
.pi-caps p { margin: 0; font-size: var(--t-sm); }

/* ══════ INVITE ══════ */
.pi-invite__btn { width: 100%; min-height: 4rem; font-size: var(--t-lg); }
.pi-invite p { margin: var(--s-md) 0 0; font-size: var(--t-sm); color: var(--ink); }
.pi-invite__alt { padding-top: var(--s-sm); border-top: var(--hair) solid rgb(0 0 0 / 0.2); }
.copy { margin-left: var(--s-xs); padding: 2px var(--s-sm); border: var(--hair) solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); font-size: var(--t-xs); font-weight: 600; cursor: pointer; }
.copy:hover { background: var(--ink); color: var(--volt); }
#guest-h:focus { outline: none; }

/* ══════ MOBILE DOCK ══════ */
.dock { display: none; }
@media (max-width: 960px) {
  .dock {
    position: fixed; z-index: 250; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs);
    padding: var(--s-xs) var(--gutter) calc(var(--s-xs) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklch, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: var(--hair) solid var(--rule);
    transform: translateY(110%); transition: transform var(--d-short) var(--ease-out);
  }
  .dock.is-on { transform: none; }
  .dock .btn { min-height: 2.75rem; font-size: var(--t-sm); }
  body.pi .foot { padding-bottom: 5rem; }
}

/* ══════ RESPONSIVE ══════ */
@media (max-width: 1100px) {
  .pi-caps, .pi-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-results li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 960px) {
  .pi-hero__grid, .pi-watch, .pi-themes, .pi-host__grid, .pi-process__grid, .pi-res__grid, .pi-statement, .pi-next__grid { grid-template-columns: minmax(0, 1fr); }
  .pi-hero__copy { padding-bottom: 0; }
  .pi-hero__art { margin-inline: calc(var(--gutter) * -1); }
  .pi-cap { left: var(--gutter); bottom: var(--s-md); }
  .pi-themes__head, .pi-res__cover { position: static; }
  .pi-host__art { width: min(80%, 24rem); }
  .pi-process__copy { padding-bottom: 0; }
  .pi-process__art { margin-inline: calc(var(--gutter) * -1); }
  .pi-res__cover { width: min(80%, 24rem); }
}
@media (max-width: 640px) {
  .pi-hero__title { font-size: clamp(2.5rem, 12.5vw, 3.6rem); }
  .pi-stats, .pi-caps, .pi-results, .lead__row { grid-template-columns: minmax(0, 1fr); }
  .pi-stat, .pi-stat + .pi-stat { padding: var(--s-lg) 0 var(--s-xl); border-left: 0; }
  .pi-stat + .pi-stat { border-top: var(--hair) solid var(--rule); }
  .pi-results li, .pi-results li + li { padding: var(--s-md) 0; border-left: 0; border-bottom: var(--hair) solid var(--dark-rule); }
  .pi-next { padding: var(--s-lg); }
  .pi-list li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-sm); }
  .pi-cap { padding: var(--s-xs) var(--s-sm); }
  .pi-cap strong { font-size: var(--t-base); }
}

/* ══════ PRODUCT ARTIFACTS ══════ */
.artifacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); align-items: end; margin-bottom: var(--s-sm); }
.art { margin: 0; display: grid; gap: var(--s-sm); }
.art figcaption { font-size: var(--t-xs); color: var(--dark-mute); text-align: center; }
.artifacts__note { margin: 0 0 var(--s-2xl); font-size: var(--t-2xs); color: var(--dark-mute); text-align: center; opacity: 0.7; }
/* Phone DM */
.phone { margin-inline: auto; width: min(100%, 19rem); border-radius: 2.2rem; padding: 0.6rem; background: #0b0f0c; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 60px -30px rgb(0 254 83 / 0.45); }
.phone__bar { display: flex; align-items: center; gap: var(--s-xs); padding: 0.7rem 0.9rem; border-radius: 1.7rem 1.7rem 0 0; background: #fff; color: #111; font-size: var(--t-xs); }
.phone__ava { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); color: #fff; font-size: 0.6rem; font-weight: 700; }
.phone__bar b { font-size: var(--t-xs); }
.phone__live { margin-left: auto; color: #14611a; font-weight: 600; font-size: 0.65rem; }
.phone__msgs { display: grid; gap: 0.45rem; padding: 0.9rem; min-height: 21rem; background: #fff; border-radius: 0 0 1.7rem 1.7rem; align-content: start; }
.msg { margin: 0; max-width: 82%; padding: 0.5rem 0.75rem; border-radius: 1.1rem; font-size: 0.74rem; line-height: 1.35; }
.msg--in { justify-self: start; background: #efefef; color: #111; border-bottom-left-radius: 0.3rem; }
.msg--out { justify-self: end; background: linear-gradient(135deg, #7b3ff2, #3a7bfd); color: #fff; border-bottom-right-radius: 0.3rem; }
.msg--out u { text-decoration-color: rgb(255 255 255 / 0.6); }
.msg__typing { display: flex; gap: 3px; margin: 0; padding: 0.55rem 0.7rem; background: #efefef; border-radius: 1rem; width: max-content; }
.msg__typing i { width: 6px; height: 6px; border-radius: 50%; background: #999; animation: typing 1.2s infinite ease-in-out; }
.msg__typing i:nth-child(2) { animation-delay: .15s } .msg__typing i:nth-child(3) { animation-delay: .3s }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .4 } 30% { transform: translateY(-3px); opacity: 1 } }
/* Call card */
.callc { padding: var(--s-lg); border-radius: var(--r-card); background: linear-gradient(160deg, #0e4420, #0b1a10); border: var(--hair) solid rgb(237 255 31 / 0.25); box-shadow: 0 30px 60px -30px rgb(0 254 83 / 0.45); color: #e8eee6; }
.callc__top { display: flex; align-items: center; gap: var(--s-xs); margin: 0; font-size: var(--t-xs); font-family: var(--f-mono); color: var(--lime); }
.callc__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 4px rgb(255 77 77 / 0.25); animation: pulse 1.4s infinite; }
.callc__time { margin-left: auto; color: #fff; }
.callc__wave { display: flex; align-items: center; gap: 3px; height: 3.2rem; margin: var(--s-md) 0; }
.callc__wave i { flex: 1; height: var(--h); border-radius: 2px; background: var(--electric); opacity: 0.85; animation: wave 1.1s ease-in-out infinite alternate; transform-origin: center; }
.callc__wave i:nth-child(odd) { animation-delay: -.4s } .callc__wave i:nth-child(3n) { animation-delay: -.8s }
@keyframes wave { from { transform: scaleY(0.35) } to { transform: scaleY(1) } }
.callc__h { margin: 0 0 var(--s-xs); font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-mute); }
.gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.gates li { display: flex; align-items: center; gap: var(--s-xs); font-size: var(--t-sm); color: #fff; }
.gates li::before { content: "✓"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--electric); color: #0b1a10; font-size: 0.7rem; font-weight: 800; }
.callc__out { margin: var(--s-md) 0 0; padding-top: var(--s-sm); border-top: var(--hair) dashed rgb(255 255 255 / 0.2); font-size: var(--t-xs); color: var(--lime); }
/* Slack */
.slack { border-radius: var(--r-card); background: #fff; color: #1d1c1d; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(0 254 83 / 0.45); }
.slack__ch { margin: 0; padding: 0.7rem 1rem; background: #3f0e40; color: #fff; font-weight: 700; font-size: var(--t-sm); }
.slack__msg { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.6rem; padding: 1rem; }
.slack__bot { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 6px; background: var(--grad-deep); color: var(--lime); font-weight: 800; }
.slack__who { margin: 0; font-size: var(--t-sm); }
.slack__who span { margin-left: 0.3rem; font-size: 0.65rem; color: #616061; background: #eee; padding: 1px 4px; border-radius: 3px; }
.slack__t { margin: 0.2rem 0 0.5rem; font-size: var(--t-sm); font-weight: 600; }
.slack__card { margin: 0; padding: 0.6rem 0.75rem; border-left: 4px solid var(--forest); background: #f8f8f8; border-radius: 4px; display: grid; gap: 0.25rem; }
.slack__card div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); font-size: 0.74rem; }
.slack__card dt { color: #616061; }
.slack__card dd { margin: 0; font-weight: 600; }
.slack__links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.slack__links span { padding: 0.25rem 0.55rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.7rem; }
@media (max-width: 1000px) { .artifacts { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .msg__typing i, .callc__wave i, .callc__dot { animation: none; } }