/* LanceTek page CSS: only what sits inside a visual, the app frame, the card link and one --p-h per group.
   Everything else is the kit (system.css, cards.css, layout.css, motion.css). */

/* a card whose title links: the whole card is the target (it lifts 2px through motion.css's .card:has(a)) */
.card { position: relative; }
.card .card-link { color: inherit; text-decoration: none; }
.card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }

/* hand-drawn windows (hero and collage pieces) on the page's ink */
.lt-win { background: #fffdf8; color: #14213f; border-radius: 12px; overflow: hidden; font: 400 14px/1.4 var(--font-text);
  box-shadow: 0 0 0 1px rgb(6 43 138 / .10), 0 24px 60px -28px rgb(6 25 70 / .45); text-align: left; }
.lt-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(6 43 138 / .09); font-size: 13px; color: #4a5672; white-space: nowrap; }
.lt-win__bar b { color: #14213f; font-weight: 500; }
.lt-win__bar .sp { flex: 1; }
.lt-win__dots { display: flex; gap: 6px; } .lt-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcd6ca; }
.lt-win__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 420px; }
.lt-inbox { border-right: 1px solid rgb(6 43 138 / .08); padding: 10px; display: grid; align-content: start; gap: 2px; }
.lt-inbox .q { height: 32px; margin-bottom: 6px; border-radius: 8px; background: rgb(6 43 138 / .05); display: flex; align-items: center; padding: 0 10px; color: #5b6580; font-size: 13px; }
.lt-inbox .t { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 1px 10px; padding: 9px 8px; border-radius: 8px; font-size: 13px; }
.lt-inbox .t.is-on { background: rgb(6 43 138 / .07); }
.lt-inbox .t i { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px rgb(6 43 138 / .1); }
.lt-inbox .t i img { width: 18px; height: 18px; }
.lt-inbox .t b { font-weight: 500; color: #14213f; } .lt-inbox .t time { color: #5b6580; font-size: 13px; }
.lt-inbox .t span { grid-column: 2 / -1; color: #4a5672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-convo { display: grid; align-content: start; gap: 10px; padding: 16px 20px; min-width: 0; }
.lt-msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.lt-msg--in { background: rgb(6 43 138 / .06); color: #14213f; }
.lt-msg--in small, .lt-msg--out small { display: block; margin-top: 4px; color: #5b6580; font-size: 13px; }
.lt-tool { display: flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--font-mono); color: #4a5672; }
.lt-tool::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f8a5b; flex: none; }
.lt-msg--out { background: #062b8a; color: #f4efe4; justify-self: start; }
.lt-msg--out small { color: #c9d2ec; }
.lt-acts { display: flex; gap: 8px; } .lt-acts span { height: 30px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; background: #062b8a; color: #f4efe4; }
.lt-acts span + span { background: rgb(6 43 138 / .08); color: #14213f; }
@media (max-width: 639px) {
  .lt-win__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lt-inbox { display: none; }
  .lt-win__bar .sp ~ span { display: none; }
  .lt-convo { padding: 12px 14px; }
  .lt-convo .lt-tool, .lt-msg small { display: none; }
}

/* a small result card over a window (collage hero) */
.lt-note { background: #fffdf8; color: #14213f; border-radius: 12px; padding: 14px 16px; font: 400 13px/1.4 var(--font-text);
  box-shadow: 0 0 0 1px rgb(6 43 138 / .10), 0 18px 40px -20px rgb(6 25 70 / .45); }
.lt-note h5 { margin: 0 0 8px; font: 500 14px/1.3 var(--font-text); display: flex; justify-content: space-between; gap: 12px; }
.lt-note h5 span { font-weight: 500; font-size: 13px; color: #1f6b45; background: #e4f1e8; border-radius: 6px; padding: 1px 8px; }
.lt-note .ln { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgb(6 43 138 / .08); color: #4a5672; }
.lt-note .ln b { font-weight: 500; color: #14213f; font-variant-numeric: tabular-nums; }

/* tool icons in a panel (journal cards, stack grid) */
.tool-panel { display: grid; place-items: center; }
.tool-panel .ic-tile { width: 96px; height: 96px; border-radius: 20px; background: #fffdf8; display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgb(6 43 138 / .08), 0 18px 40px -24px rgb(6 25 70 / .5); }
.tool-panel .ic-tile img { width: 56px; height: 56px; object-fit: contain; }
.meta-line { margin-top: var(--s-3); font-size: var(--t-small); color: var(--muted); font-family: var(--font-mono); }

/* the stack grid (about) */
.stack-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); padding: var(--s-7); }
.stack-grid .tool { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.stack-grid .tool span:first-child { width: 72px; height: 72px; border-radius: 16px; background: #fffdf8; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(6 43 138 / .08); }
.stack-grid .tool img { width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 1023px) { .stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--s-6); } }
@media (max-width: 639px) { .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); padding: var(--s-5); } .stack-grid .tool span:first-child { width: 64px; height: 64px; } }

/* journal entries */
.entries { list-style: none; margin: 0; padding: 0; display: grid; }
.entry { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); align-items: start; }
.entry > .ic { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 14px; background: #fffdf8; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(6 43 138 / .08); }
.entry > .ic img { width: 32px; height: 32px; object-fit: contain; }
.entry h3 { margin: 0; font-size: var(--t-card); font-weight: 500; }
.entry p { margin: 0; grid-column: 2; max-width: 62ch; }
.entry .entry__meta { grid-row: 1; grid-column: 3; font: 400 var(--t-small)/1.6 var(--font-mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 639px) {
  .entry { grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--s-4); }
  .entry > .ic { width: 44px; height: 44px; grid-row: 1; } .entry > .ic img { width: 26px; height: 26px; }
  .entry .entry__meta { grid-column: 2; grid-row: auto; }
  .entry p { grid-column: 1 / -1; }
}

/* price rows (services) */
.price-table { display: grid; }
.price-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.price-row--head { padding-top: 0; color: var(--muted); font-size: var(--t-label); font-weight: 500; }
.price-row h3 { margin: 0; font-size: var(--t-card); font-weight: 500; }
.price-row p { margin: 0; }
.price-row .price { font: 500 var(--t-card)/1.3 var(--font-display); font-variant-numeric: tabular-nums; }
.price-row .price small { display: block; font: 400 var(--t-small)/1.5 var(--font-text); color: var(--muted); }
@media (max-width: 1023px) {
  .price-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3) var(--s-6); }
  .price-row--head { display: none; }
  .price-row h3 { grid-column: 1; } .price-row .price { grid-column: 2; grid-row: 1; text-align: right; }
  .price-row p { grid-column: 1 / -1; }
}

/* feature names under a chapter frame */
.feature-names { margin-top: var(--s-7); }
.feature-names h3 { margin: 0 0 4px; font-size: var(--t-body); font-weight: 500; }
.feature-names p { margin: 0; color: var(--muted); }

/* project plan window (services hero) */
.lt-plan { padding: 8px 16px 16px; display: grid; }
.lt-plan__head, .lt-plan__row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 92px 96px; gap: 12px; align-items: center; padding: 0 8px; }
.lt-plan__head { height: 36px; font-size: 13px; color: #5b6580; }
.lt-plan__row { height: 52px; border-top: 1px solid rgb(6 43 138 / .08); font-size: 14px; color: #4a5672; font-variant-numeric: tabular-nums; }
.lt-plan__row.is-on { background: rgb(6 43 138 / .05); border-radius: 8px; }
.lt-plan__row b { font-weight: 500; color: #14213f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-plan__row em { font-style: normal; font-size: 13px; justify-self: start; padding: 2px 8px; border-radius: 6px; background: rgb(6 43 138 / .06); color: #4a5672; }
.lt-plan__row em.is-done { background: #e4f1e8; color: #1f6b45; }
.lt-plan__row em.is-run { background: #062b8a; color: #f4efe4; }
@media (max-width: 639px) { .lt-plan__head, .lt-plan__row { grid-template-columns: minmax(0, 1fr) 70px 84px; } .lt-plan__head span:nth-child(2), .lt-plan__row span:nth-of-type(1) { display: none; } }

/* lit ground of the collage hero's art */
.hero__art { background: radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface, #e9e0d2) 80%, white), transparent 70%), var(--ground-bg, #d9ccb7); }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }

/* text beside a visual */
.split-lede { margin: var(--s-5) 0 0; }
.muted-lede { margin: 0 0 var(--s-4); font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 52ch; }
.fact-list { list-style: none; margin: var(--s-6) 0; padding: 0; display: grid; gap: var(--s-4); }
.fact-list li { display: grid; gap: 2px; max-width: 46ch; }
.fact-list b { font-weight: 500; font-size: var(--t-label); color: var(--muted); }
.chapter-frame { margin-top: var(--s-7); }

/* about: the collage pieces (sized by the collage, text in container units) */
.ly-collage { container-type: inline-size; }
.ly-collage .ly-piece { box-shadow: 0 1px 2px rgb(6 25 70 / .1), 0 22px 48px -22px rgb(6 25 70 / .4); }
.ly-collage .pc-card { background: #fffdf8; color: #14213f; padding: 3.2cqw 3.6cqw; display: grid; gap: 1.2cqw; align-content: start; font: 400 max(13px, 2cqw)/1.35 var(--font-text); }
.pc-card .pc-lbl { font-size: max(13px, 1.7cqw); color: #5b6580; }
.pc-card .pc-title { font: 500 max(14px, 2.8cqw)/1.2 var(--font-display); letter-spacing: -0.01em; }
.pc-card .pc-text { margin: 0; color: #2c3a5e; }
.pc-card .ln { display: flex; justify-content: space-between; gap: 2cqw; padding-top: 1.2cqw; border-top: 1px solid rgb(6 43 138 / .09); }
.pc-card .ln em { font-style: normal; font-weight: 500; text-align: right; }
.pc-card .ln em.ok { color: #1f6b45; }
.ly-collage .pc-mono { background: #0e1d47; color: #dfe6f7; font-family: var(--font-mono); }
.pc-mono .pc-lbl { color: #9fb0d8; } .pc-mono .ln { border-color: rgb(255 255 255 / .1); } .pc-mono .ln span { color: #9fb0d8; }
@media (max-width: 639px) { .pc-card .ln:nth-of-type(n+4) { display: none; } .pc-card .pc-text { display: none; } }

.stack-frame { background: var(--g-alt, var(--surface)); border-radius: var(--r-lg); margin-top: var(--s-7); }

/* contact: the form on the alternate ground, the pinned steps' windows */
.form-card { display: grid; gap: var(--s-5); }
.form-card > .form { background: var(--g-alt, var(--surface)); border-radius: var(--r-lg); padding: var(--s-7); }
.form-card > .tools-frame { margin-top: 0; }
@media (max-width: 639px) { .form-card > .form { padding: var(--s-5); } }
.pc-visual { background: var(--g-alt, var(--surface)); padding: var(--s-6); display: grid; align-content: start; }
.pc-visual .lt-win { width: 100%; }
.lt-cal { display: grid; padding: 8px 16px 16px; }
.lt-cal__day { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-top: 1px solid rgb(6 43 138 / .08); font-size: 14px; color: #4a5672; }
.lt-cal__day:first-child { border-top: 0; }
.lt-cal__day b { grid-row: 1 / span 2; font-weight: 500; color: #14213f; }
.lt-cal__day span { grid-column: 2; padding: 4px 10px; border-radius: 6px; background: rgb(6 43 138 / .05); }
.lt-cal__day span.is-on { background: #062b8a; color: #f4efe4; }
.pc-visual .lt-plan__row { grid-template-columns: minmax(0, 1fr) 72px 84px; }

/* journal: the tools row under the entries */
.marquee-wrap { margin-top: var(--s-7); font: 500 var(--t-h3)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--muted); }
.marquee-wrap ul { list-style: none; margin: 0; padding: 0; }
.marquee-wrap { overflow: hidden; max-width: 100%; min-width: 0; }
#entries .wrap > div, #more .wrap > div { min-width: 0; }
@media (max-width: 639px) { .pc-visual { padding: var(--s-3); } .pc-visual .lt-msg--in { display: none; } .pc-visual .lt-cal__day:nth-child(3) { display: none; } }
/* price rows on the page's 12 columns: 3, 4, 3, 2 */
@media (min-width: 1024px) {
  .price-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter, 24px); gap: 0 var(--gutter, 24px); }
  .price-row > :nth-child(1) { grid-column: 1 / span 3; } .price-row > :nth-child(2) { grid-column: 4 / span 4; }
  .price-row > :nth-child(3) { grid-column: 8 / span 3; } .price-row > :nth-child(4) { grid-column: 11 / span 2; }
}
.marquee-wrap { margin-top: var(--s-8); }
.marquee-wrap .mo-mq__track { font-size: var(--t-h2); letter-spacing: -0.03em; }

/* readable text in the ink (7:1 on the sand ground) */
.card { --c-text: var(--ink); }
.hero--centred .hero__lead { color: var(--ink); }
.muted-lede { color: var(--ink); }
.close__word { line-height: 1.04; padding-top: .04em; }
.card .card-link { display: inline-block; padding-block: 8px; margin-block: -8px; }
.entry h3 a { color: inherit; text-decoration: none; display: inline-block; padding-block: 8px; margin-block: -8px; }

/* journal entries v2: the tool and its meta on the left, the entry from the split line */
.entry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--s-6) 0; }
.entry__side { grid-column: 1 / span 6; display: flex; align-items: center; gap: var(--s-5); }
.entry__body { grid-column: 7 / -1; display: grid; gap: var(--s-2); }
.entry > .ic, .entry__side .ic { width: 72px; height: 72px; border-radius: 16px; background: #fffdf8; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(6 43 138 / .08); flex: none; }
.entry__side .ic img { width: 40px; height: 40px; object-fit: contain; }
.entry .entry__meta { color: var(--ink); font: 400 var(--t-small)/1.6 var(--font-mono); }
.entry__body p { grid-column: auto; }
@media (max-width: 1023px) { .entry__side { grid-column: 1 / -1; } .entry__body { grid-column: 1 / -1; margin-top: var(--s-4); } }
@media (max-width: 639px) { .entry { grid-template-columns: minmax(0, 1fr); } .entry__side .ic { width: 56px; height: 56px; } .entry__side .ic img { width: 32px; height: 32px; } }

/* home: the latest entries beside the open article */
.latest { list-style: none; margin: var(--s-6) 0; padding: 0; display: grid; }
.latest a { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--t-lead); }
.latest img { width: 28px; height: 28px; object-fit: contain; flex: none; }
a.frame { color: inherit; text-decoration: none; }

/* services: stacked price list beside the example quote */
.price-list { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; }
.price-list li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.price-list li:first-child { padding-top: 0; }
.pr__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); }
.pr__top h3 { margin: 0; font-size: var(--t-card); font-weight: 500; }
.pr__price { font: 500 var(--t-card)/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr__price small { font: 400 var(--t-small)/1 var(--font-text); }
.price-list p { margin: 0; }
.pr__shape { font: 400 var(--t-small)/1.6 var(--font-mono); }
.prices-frame { --ratio: 0px; height: 100%; min-height: 560px; }
@media (max-width: 1023px) { .prices-frame { min-height: 420px; height: auto; margin-top: var(--s-7); } }
.fn-name { margin: 0 0 4px; font-weight: 500; }
.feature-names p { color: var(--ink); }

/* real tool icons in a frame (services questions, contact) */
.tools-frame { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); padding: var(--s-6); background: var(--g-alt, var(--surface)); border-radius: var(--r-lg); --ratio: 0px; }
.tools-frame .ic-t { height: 88px; border-radius: 16px; background: #fffdf8; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(6 43 138 / .08); }
.tools-frame img { width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 639px) { .tools-frame { gap: var(--s-3); padding: var(--s-4); } .tools-frame .ic-t { height: 64px; } }

/* about: the stack on the page's 12 columns */
.stack-frame { background: none; margin-top: var(--s-7); }
.stack-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7); padding: 0; }
.stack-grid .tool { grid-column: span 2; justify-items: start; text-align: left; }
.stack-grid .tool span:first-child { width: 100%; height: 120px; background: var(--g-alt, #fffdf8); border-radius: var(--r-lg); }
.stack-grid .tool img { width: 48px; height: 48px; }
@media (max-width: 1023px) { .stack-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0; } .stack-grid .tool { grid-column: span 3; } }
@media (max-width: 639px) { .stack-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); padding: 0; } .stack-grid .tool { grid-column: span 4; } .stack-grid .tool span:first-child { width: 100%; height: 88px; } }
.fact-list b { color: var(--ink); }

/* journal entries: the tool on a panel */
.entry__side.frame { --ratio: 0px; padding: var(--s-5); min-height: 136px; background: var(--g-alt, var(--surface)); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.pr__name { margin: 0; font-size: var(--t-card); font-weight: 500; }
.prices-cta { margin-top: var(--s-6); }
@media (max-width: 639px) { .pr__top { flex-wrap: wrap; gap: 0 var(--s-4); } .pr__price { white-space: normal; } .tools-frame { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-3); } .tools-frame .ic-t { height: 48px; border-radius: 10px; } .tools-frame img { width: 26px; height: 26px; } }
.tools-frame.panel { --p-h: auto; height: auto; }
.entry__side.panel { --p-h: auto; height: auto; padding: var(--s-5); min-height: 112px; background: var(--g-alt, var(--surface)); border-radius: var(--r-lg); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-5); }
#entries .entry, #more .entry { padding: var(--s-4) 0; }
.price-list li { gap: 2px; padding: var(--s-3) 0; }
.pr__shape { color: var(--ink); }
@media (max-width: 639px) { .hero__media .doc-more { display: none; } #enquiry .tools-frame { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } #enquiry .tools-frame .ic-t { height: 72px; } #enquiry .tools-frame img { width: 36px; height: 36px; } }
@media (min-width: 640px) { #enquiry .tools-frame { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4); } #enquiry .tools-frame .ic-t { height: 64px; } #enquiry .tools-frame img { width: 32px; height: 32px; } .form-card > .form { padding: var(--s-6); } .form-card { gap: var(--s-4); } }
.hero--triptych .ly-collage { background: radial-gradient(60% 50% at 25% 10%, #efe7d8, transparent 70%), radial-gradient(60% 60% at 85% 95%, #c9d3df, transparent 70%), #d9ccb7; border-radius: var(--r-lg); }
.ly-collage .pc-card { font-size: max(13px, 2.4cqw); padding: 4cqw 4.4cqw; gap: 1.6cqw; }
.pc-card .pc-title { font-size: max(15px, 3.4cqw); }
.pc-card .pc-lbl { font-size: max(13px, 2cqw); }
.pc-mono .ln em { font-weight: 400; }
.frame.stack-frame { display: block; padding: 0; border: 0; background: none; --ratio: 0px; }
.frame.stack-frame::before { display: none; }
.stack-frame > .stack-grid { width: 100%; }
.pr__shape { font: inherit; }