/* LiveLarge case study: loads after the shared portfolio styles; the type and colour system lives here. */

/* ===== from livelarge-revision.css ===== */
/* LiveLarge case study — revision pass.
   Refines three existing figures in the page's own palette; no new accent colours.
   AI light (from 5.1 / 5.2): #b6dafa blue · #faf8f5 cream · #ead8ba sand. */

/* ---------- 1. From separate pages to one connected conversation ---------- */
/* Before: the same needs, dropped and re-entered at every step. */
/* each need sits inside its own step, so it stays with the step when the steps stack on phones */
.ll-page .ll-change-before .ll-need-cell{grid-column:1/-1;grid-row:3;display:block;margin-top:18px;font-style:normal}
@media(min-width:768px){
  /* every cell is the same height (the note hangs below), so the step arrowheads can be lifted by a fixed amount */
  .ll-page .ll-change-before .ll-need-cell{position:relative;height:28px}
  .ll-page .ll-change-before .ll-need-note{position:absolute;left:0;top:100%}
  .ll-page .ll-change-before .ll-change-steps{padding-bottom:22px}
  .ll-page .ll-change-before .ll-change-steps li:not(:last-child)::before{bottom:64px}
}
.ll-need{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#fff;border:1px dashed #e5e5e5;color:#6e6e73;font:400 var(--t-label)/1 Geist, Arial, sans-serif;white-space:nowrap}
.ll-need.is-lost{color:#86868b;border-color:#e5e5e5}
.ll-need s{text-decoration-color:#9c9c98;text-decoration-thickness:1px}
.ll-need-note{display:block;margin:7px 0 0 13px;font:400 var(--t-label)/1.3 Geist, Arial, sans-serif;color:#6e6e73}
/* After: one band carries the same needs across all four steps, drawn with the 5.2 edge light. */
.ll-change-carry{margin-top:22px;padding:1.5px;border-radius:999px;background:linear-gradient(105deg,#b6dafa,#faf8f5 42%,#ead8ba 82%,#b6dafa)}
.ll-change-carry>div{display:flex;align-items:center;gap:12px;height:38px;padding:0 16px;border-radius:999px;background:#edebe7;font:400 var(--t-callout)/1 Geist, Arial, sans-serif;color:#1d1d1f}
.ll-carry-k{color:#6e6e73;font-size:var(--t-label)}
.ll-carry-end{margin-left:auto;color:#6e6e73}
.ll-js .ll-journey-change .ll-change-carry{clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 1.6s cubic-bezier(.4,0,.2,1) .3s}
.ll-js .ll-journey-change.is-playing .ll-change-carry{clip-path:inset(0 0 0 0 round 999px)}
.ll-js .ll-journey-change .ll-need.is-lost{transition:color .6s,border-color .6s}
.ll-js .ll-journey-change:not(.is-playing) .ll-need.is-lost{color:#6e6e73;border-color:#e5e5e5}
.ll-js .ll-journey-change .ll-change-steps li:nth-child(2) .ll-need{transition-delay:.5s}
.ll-js .ll-journey-change .ll-change-steps li:nth-child(3) .ll-need{transition-delay:1s}
.ll-js .ll-journey-change .ll-change-steps li:nth-child(4) .ll-need{transition-delay:1.5s}
@media(max-width:767px){
  .ll-page .ll-change-before .ll-need-cell{display:flex;align-items:center;gap:10px;margin:8px 0 0}
  .ll-page .ll-change-before .ll-need-note{margin:0}
}

/* ---------- 2. 3.6 · A decision I revised ---------- */
/* Marks sit on the real screenshots: a quiet grey strike for removed wording,
   blue and sand highlighter (the AI light colours) for what replaced it, numbered to the notes below. */
.ll-evo-strike{stroke:#74736f;stroke-width:2.5;stroke-linecap:round}
.ll-evo-mark{mix-blend-mode:multiply}
.ll-evo-pin circle{fill:#151515}
.ll-evo-pin text{fill:#fff;font:500 var(--t-callout) Geist,Arial,sans-serif;text-anchor:middle;dominant-baseline:central}
.ll-evo-notes{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ll-evo-notes li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.ll-evo-notes li>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#111;color:#fff;font:500 var(--t-label)/1 Geist,Arial,sans-serif;margin-top:1px}
.ll-evo-notes b{display:block;font-weight:500;font-size:var(--t-callout);color:#1d1d1f;margin-bottom:4px}
.ll-evo-notes p{margin:0;font-size:var(--t-callout);line-height:1.55;color:var(--ink-read)}
@media(max-width:767px){.ll-evo-notes{grid-template-columns:1fr;gap:16px}}

/* ---------- 3. 5.1 · the greeting, with and without light ---------- */
/* One greeting in the page's light evidence panel; the dividing line sweeps across by itself, rests on each side,
   and is hidden while resting. No labels: the caption and the sweep carry the comparison. */
.ll-page .ll-effects-pair.ll-effects-wipe{display:block;max-width:none;margin:24px 0 0;padding:clamp(24px,5vw,56px);background:#edebe7;border-radius:16px}
.ll-page .ll-effects-wipe>.ll-wipe-frame{display:block;width:min(100%,440px);margin:auto}
.ll-wipe-frame{--cut:50%}
/* ll-effects-*-r2 are 700px wide with a ~5px baked border: crop 6px inside it so the corners stay clean */
.ll-page .ll-effects-wipe .ll-wipe-frame img{position:absolute;top:-.872%;left:-.872%;width:101.744%;max-width:none;height:auto;border:0;border-radius:0;box-shadow:none}
.ll-page .ll-effects-wipe .ll-wipe-frame img.is-fx{clip-path:inset(0 0 0 var(--cut))}
.ll-wipe-line{position:absolute;top:0;bottom:0;left:var(--cut);width:1px;margin-left:-.5px;background:#ffffffd9;box-shadow:0 0 10px #b6dafa;pointer-events:none;transition:opacity .3s}
.ll-effects-wipe:not([data-moving="1"]) .ll-wipe-line{opacity:0}

/* ---------- 4. Recorded prototype clips (shared) ---------- */
/* Clips are captured at 2x from the working prototype's own scripted flows. Chat-only clips are cropped to the
   window at its widest (598 x 742 CSS px, 1px inside the 12px-radius edge); the window here follows the recorded
   width frame by frame (JS sets --w from the capture log), so it widens exactly when the product does.
   --s scales the recording to its slot. */
.ll-chatclip{--s:.86;--w:348;display:flex;justify-content:center}
.ll-chatclip-window{position:relative;flex:none;width:calc(var(--w) * var(--s) * 1px);height:calc(742 * var(--s) * 1px);border-radius:calc(11px * var(--s));overflow:hidden;background:#edebe7;transform:translateZ(0)}
.ll-page .ll-chatclip video{position:absolute;left:0;top:0;display:block;width:calc(598 * var(--s) * 1px);height:calc(742 * var(--s) * 1px);max-width:none;border-radius:0;box-shadow:none}

/* ---------- 5. 03 · Clarify and recommend: pinned stage, scrolling decisions ---------- */
/* Layout and scroll follow the approved prototype: the stage stays while 3.2–3.5 scroll past; each step plays its
   segment of the recording and holds on the last frame. The logic bar is presentation, so it uses the page's Geist;
   the recording is the product, in its own Barlow. Stage = the page's dark stage token. */
.ll-clarify{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(32px,4vw,56px);align-items:start;margin-top:clamp(28px,4vw,44px)}
.ll-page .ll-clarify-stage{position:sticky;top:var(--ll-sticky-top,88px);padding:20px;display:flex;flex-direction:column;gap:16px}
.ll-knows{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ll-knows-card{border-radius:8px;padding:14px 16px 12px;background:#ffffff0d;color:#fff;font:400 var(--t-label)/1.35 Geist,Arial,sans-serif}
.ll-page .ll-knows-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 10px;font-size:var(--t-label);font-weight:500;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.56)}
.ll-page .ll-knows-h span{font-size:var(--t-label);font-weight:400;letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.72);transition:color .42s}
.ll-knows-list{display:grid;gap:7px;margin:0}
.ll-knows-list>div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:center}
/* rows and notes that arrive later keep their space from the start, so nothing on the stage shifts */
.ll-knows-list>div[hidden]{display:grid;visibility:hidden}
.ll-knows-list dt{color:rgba(255,255,255,.56)}
.ll-knows-list dd{margin:0;display:flex;align-items:center;gap:8px;min-width:0;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-knows-list dd::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#b6dafa;transition:background .42s,box-shadow .42s}
.ll-knows-list [data-state="empty"] dd{color:rgba(255,255,255,.56)}
.ll-knows-list [data-state="empty"] dd::before{background:none;box-shadow:inset 0 0 0 1px #ffffff40}
.ll-knows-list [data-state="asking"] dd{color:rgba(255,255,255,.72)}
.ll-knows-list [data-state="asking"] dd::before{background:#ffffffb3;animation:ll-ask 1.4s ease-in-out infinite}
.ll-knows-list [data-k="open"] dd::before{background:none;box-shadow:inset 0 0 0 1px #ead8ba}
.ll-knows-list .is-new dd,.ll-knows-list>div:not([hidden])[data-k="open"] dd{animation:ll-settle .42s cubic-bezier(.22,.8,.22,1)}
@keyframes ll-ask{50%{opacity:.25}}
@keyframes ll-settle{from{opacity:0;transform:translateY(3px)}}
.ll-shortlist{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ll-shortlist li{display:grid;grid-template-columns:1fr auto 44px;gap:10px;align-items:baseline;transition:opacity .42s cubic-bezier(.22,.8,.22,1)}
.ll-shortlist span{display:flex;align-items:center;gap:7px}
.ll-shortlist span::before{content:"";width:6px;height:6px;border-radius:50%;background:transparent;transition:background .42s}
.ll-shortlist em{font-style:normal;font-size:var(--t-label);color:rgba(255,255,255,.56)}
.ll-shortlist b{font-weight:400;text-align:right;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.ll-shortlist .is-out{opacity:.28}
.ll-shortlist .is-hot span::before{background:linear-gradient(90deg,#b6dafa,#ead8ba)}
.ll-page .ll-shortlist-note{margin:9px 0 0;padding-top:8px;border-top:1px solid #ffffff14;font:400 var(--t-label)/1.3 Geist,Arial,sans-serif;color:#ead8ba;animation:ll-settle .42s cubic-bezier(.22,.8,.22,1)}
.ll-page .ll-shortlist-note[hidden]{display:block;visibility:hidden;animation:none}
/* 3.5: the limit and the action it leads to, in focus (the page's 3.6 evidence treatment: fade the rest) —
   window CSS px of the held frame: limit line y502–531, actions y553–588 */
.ll-chatclip-focus{position:absolute;left:calc(10px * var(--s));top:calc(492px * var(--s));width:calc(578px * var(--s));height:calc(106px * var(--s));border-radius:calc(10px * var(--s));box-shadow:0 0 0 1px #ead8ba,0 0 0 9999px #faf8f5b8;opacity:0;pointer-events:none;transition:opacity .42s cubic-bezier(.22,.8,.22,1)}
.ll-clarify.is-limit .ll-clarify-stage .ll-chatclip-focus,.ll-chatclip.is-limit .ll-chatclip-focus{opacity:1;transition-delay:.12s}
.ll-clarify-stage .ll-chatclip-window{box-shadow:0 0 0 1px #ffffff14,0 18px 44px #00000080}
.ll-clarify-steps{list-style:none;margin:0;padding:0}
.ll-clarify-step{min-height:74vh;padding-top:24vh;opacity:.32;cursor:pointer;transition:opacity .42s cubic-bezier(.22,.8,.22,1)}
.ll-clarify-step:first-child{padding-top:8px}
.ll-clarify-step:last-child{min-height:62vh}
.ll-clarify-step.is-active{opacity:1;cursor:default}
.ll-page .ll-clarify-step h3{margin:10px 0 12px;font-size:var(--t-heading);line-height:1.22;font-weight:500;letter-spacing:normal;color:#1d1d1f}
.ll-page .ll-clarify-step p{margin:0;font-size:var(--t-body);line-height:1.7;color:var(--ink-read)}
.ll-clarify-step .ll-chatclip.is-inline,.ll-knows-line{display:none}
.ll-full-flow{margin:20px 0 0}
.ll-full-flow-btn{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 12px;border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#1d1d1f;font:500 var(--t-label)/1 Geist,Arial,sans-serif;cursor:pointer;transition:border-color .22s,transform .22s cubic-bezier(.22,.8,.22,1)}
.ll-full-flow-btn::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:4px}
.ll-full-flow-btn:hover{border-color:#111}
.ll-full-flow-btn:active{transform:scale(.97)}
.ll-full-flow-time{color:#6e6e73;font-weight:400}
@media(max-width:900px){
  .ll-clarify{display:block}
  .ll-page .ll-clarify-stage{display:none}
  .ll-clarify-step,.ll-clarify-step:first-child,.ll-clarify-step:last-child{min-height:0;padding:0 0 48px;opacity:1;cursor:default}
  .ll-clarify-step .ll-chatclip.is-inline{display:flex;margin:18px 0 12px;padding:16px;border-radius:16px;background:#111}
  .ll-clarify-step .ll-chatclip.is-inline .ll-chatclip-window{box-shadow:0 0 0 1px #ffffff14}
  .ll-knows-line{display:block;margin:0 !important;font-size:var(--t-label) !important;line-height:1.5 !important;color:#6e6e73 !important}
  .ll-knows-line b{font-weight:500;color:#1d1d1f}
  .ll-knows-line i{display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:#b3b3b3;vertical-align:middle}
}

/* ---------- 6. Highlights: the interaction itself, recorded ---------- */
/* Apple-style feature loops: one action, its result, one caption per step, lit in time with the recording. */
.ll-hl-frame{position:relative;width:100%;aspect-ratio:1920/1200;border-radius:8px;overflow:hidden;background:#111;box-shadow:0 12px 30px #2726211c}
.ll-page .ll-hl-frame video{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.ll-hl-chat .ll-chatclip-window{box-shadow:0 0 0 1px #0000000d,0 12px 30px #2726211c}
.ll-hl-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;counter-reset:step}
.ll-hl-steps li{counter-increment:step;font-size:var(--t-label);color:#86868b;transition:color .42s cubic-bezier(.22,.8,.22,1)}
.ll-hl-steps li::before{content:counter(step);display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;border-radius:50%;border:1px solid currentColor;font-size:var(--t-label);vertical-align:1px}
.ll-hl-steps li.is-on{color:#1d1d1f}

@media(prefers-reduced-motion:reduce){
  .ll-hl-steps li{color:var(--ink-read)}
  .ll-clarify-step{transition:none}
  .ll-knows-list [data-state="asking"] dd::before,.ll-knows-list .is-new dd{animation:none}
}

/* 01 Reframe, reordered: insight → Before/After → the existing site in three moments → three constraints.
   The audit is three groups instead of a five-card rail, so it reads in one glance. The first group stacks its three
   pages (home, models, a model page) to show browsing across separate pages; every capture carries a small label so
   a skimming reader knows it is LiveLarge's site before the assistant, not the design. */
.ll-audit-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.ll-audit-group{margin:0}
.ll-audit-media{--p:clamp(12px,1.6vw,18px);position:relative;container-type:inline-size;padding:var(--p);border-radius:var(--ll-radius);background:var(--ll-panel)}
.ll-audit-media img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.06);pointer-events:none}
.ll-audit-media.is-stack::after{content:"";display:block;aspect-ratio:1440/900}
.ll-audit-media.is-stack img{position:absolute;width:70cqw;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.12)}
.ll-audit-media.is-stack img:nth-of-type(1){left:var(--p);top:var(--p)}
.ll-audit-media.is-stack img:nth-of-type(2){left:calc(var(--p) + 15cqw);top:calc(var(--p) + 9.375cqw)}
.ll-audit-media.is-stack img:nth-of-type(3){left:calc(var(--p) + 30cqw);top:calc(var(--p) + 18.75cqw)}
.ll-before-tag{position:absolute;z-index:2;bottom:calc(var(--p) + 6px);left:calc(var(--p) + 6px);padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 0 0 1px rgba(0,0,0,.06);font:500 var(--t-label)/1.1 Geist, Arial, sans-serif;letter-spacing:normal;color:var(--ink-read);white-space:nowrap}
.ll-page .ll-audit-group figcaption.ll-audit-copy{display:block;margin-top:16px;max-width:none}
.ll-page .ll-audit-group .ll-audit-copy .ll-fig-tag{display:block;margin-bottom:8px}
.ll-page .ll-audit-group .ll-audit-copy h3{font-size:var(--t-body);line-height:1.3;margin-bottom:8px}
.ll-page .ll-audit-group .ll-audit-copy p{font-size:var(--t-callout) !important;line-height:1.6}

.ll-constraints{margin-top:56px;padding-top:28px;border-top:1px solid #e5e5e5}
.ll-constraints h3{font-size:var(--t-heading);line-height:1.3;margin-bottom:20px}
.ll-constraints ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none;counter-reset:constraint}
.ll-constraints li{counter-increment:constraint}
.ll-constraints li::before{content:counter(constraint,decimal-leading-zero);display:block;margin-bottom:10px;font-size:var(--t-label);color:#86868b;font-variant-numeric:tabular-nums}
.ll-constraints strong{display:block;font-size:var(--t-body);line-height:1.35;font-weight:500;color:#1d1d1f;margin-bottom:6px}
.ll-constraints span{display:block;font-size:var(--t-callout);line-height:1.6;color:var(--ink-read)}
@media(max-width:900px){.ll-audit-groups,.ll-constraints ol{grid-template-columns:1fr;gap:28px}.ll-audit-groups{max-width:560px}}

/* ===== from livelarge-flow.css ===== */
/* LiveLarge: research rules, user-flow camera tour and design samples. Tour timing and references live in js/livelarge-flow.js. */

/* ---------- user flow (end of chapter 01) ---------- */
.ll-flow-tour { margin-top: 56px; padding-top: 28px; border-top: 1px solid #e5e5e5; }
.ll-flow-heading { max-width: 650px; margin-bottom: 28px; }
.ll-flow-heading h3 { margin: 10px 0 0; font-size: var(--t-heading); line-height: 1.3; }

/* Live: the whole diagram is the camera's world; js/livelarge-flow.js moves the view. */
.ll-flow-stage, .ll-flow-caption { display: none; }
.ll-flow-tour.is-live .ll-flow-stage {
  display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--ll-radius); background: #edebe7;
}
.ll-flow-world { position: absolute; left: 0; top: 0; width: 3931px; height: 4469px; transform-origin: 0 0; }
.ll-flow-world img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.ll-flow-marks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.ll-flow-tour.is-live .ll-flow-caption {
  display: flex; align-items: flex-start; gap: 12px; max-width: 640px; min-height: 48px; margin: 20px 0 0;
  font-size: var(--t-body); line-height: 1.5; color: #1d1d1f; opacity: 0;
}
.ll-flow-tour.is-live .ll-flow-shots { display: none; }

/* No JS or reduced motion: the three moments as a list. */
.ll-flow-shots { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.ll-flow-frame { position: relative; overflow: hidden; border-radius: var(--ll-radius); }
.ll-flow-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--ll-radius); background: #edebe7; user-select: none; -webkit-user-drag: none;
}
/* Fades the nodes a shot isn't about, so the caption's path is the part that reads. */
.ll-flow-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.ll-flow-shot p { display: flex; align-items: flex-start; gap: 12px; max-width: 640px; margin: 20px 0 0; font-size: var(--t-body); line-height: 1.5; color: #1d1d1f; }
.ll-flow-num {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: #2463eb; color: #fff; font: 500 var(--t-label)/22px Geist, Arial, sans-serif; text-align: center;
}

/* ---------- before / after: separate pages vs one connected path ---------- */
/* Before: each page is its own card, with gaps and no arrows. After: the same four steps joined into one bar. */
.ll-page .ll-journey-change .ll-change-steps li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ll-page .ll-journey-change .ll-change-steps li::before,
.ll-page .ll-journey-change .ll-change-steps li::after { display: none; }
.ll-page .ll-journey-change .ll-change-steps li > span { margin: 0 0 4px; font-size: var(--t-label); line-height: 1.3; }
.ll-page .ll-journey-change .ll-change-steps strong {
  display: block; width: auto; max-width: 100%; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; font-size: var(--t-body); line-height: 1.3;
}
.ll-page .ll-change-before .ll-change-steps { gap: 16px; padding-bottom: 0; }
.ll-page .ll-change-before .ll-change-steps li { padding: 16px 18px 18px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fff; }
.ll-page .ll-change-before .ll-change-steps li > span { color: #86868b; }
.ll-page .ll-change-before .ll-change-steps strong { color: #1d1d1f; }
.ll-page .ll-change-before .ll-need-cell { position: static; display: block; height: auto; margin: 14px 0 0; }
.ll-page .ll-change-before .ll-need-note { position: static; margin: 6px 0 0 2px; }
.ll-page .ll-change-after .ll-change-steps { gap: 0; overflow: hidden; border-radius: 8px; background: #111; }
.ll-page .ll-change-after .ll-change-steps li { padding: 16px 18px 18px; }
.ll-page .ll-change-after .ll-change-steps li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.ll-page .ll-change-after .ll-change-steps li > span { color: rgba(255,255,255,.56); }
.ll-page .ll-change-after .ll-change-steps strong { color: #fff; }

/* ---------- research ---------- */
.ll-research { margin-top: 56px; padding-top: 28px; border-top: 1px solid #e5e5e5; }
.ll-research h3 { font-size: var(--t-heading); line-height: 1.3; margin-bottom: 12px; }
.ll-research-lead { max-width: 650px; margin-bottom: 28px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-read); }
.ll-research-shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
  padding: clamp(16px, 2.4vw, 32px); border-radius: var(--ll-radius); background: var(--ll-panel);
}
.ll-research-shots figure { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ll-research-shots figcaption { order: -1; font-size: var(--t-label); line-height: 1.5; color: #6e6e73; }
.ll-research-shots figcaption b { display: block; margin-bottom: 2px; font-weight: 500; color: #1d1d1f; }
.ll-research-shots img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.ll-research-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.ll-research-rules strong { display: block; margin-bottom: 6px; font-size: var(--t-body); line-height: 1.35; font-weight: 500; color: #1d1d1f; }
.ll-research-rules span { display: block; font-size: var(--t-callout); line-height: 1.6; color: var(--ink-read); }

/* ---------- hero and 5.1 ---------- */
.ll-stage-hero .ll-hero-still { display: block; width: 100%; height: auto; }
/* 5.1: the lit capture underneath; the unlit one shows only inside the panel (x 24, y 122, 350 x 744 of the
   1440 x 900 capture), left of the line, so nothing outside the panel can change. Without JS: lit. */
.ll-scene-wipe { --cut: 1.667%; position: relative; display: block; }
.ll-page .ll-scene-wipe img { display: block; width: 100%; height: auto; }
.ll-page .ll-scene-wipe img.is-base { position: absolute; top: 0; left: 0; clip-path: inset(13.556% calc(100% - var(--cut)) 3.778% 1.667%); }
/* .ll-visual-scene span styles a label chip; the line needs none of it. */
.ll-page .ll-scene-wipe .ll-wipe-line {
  top: 13.556%; bottom: 3.778%; left: var(--cut); width: 1px; margin-left: -.5px; padding: 0; border-radius: 0;
  background: #ffffffd9; box-shadow: 0 0 10px #b6dafa; backdrop-filter: none;
}
.ll-scene-wipe:not([data-moving="1"]) .ll-wipe-line { opacity: 0; }

/* ---------- design samples (chapter 05): wireframes, greeting before/after, directions ---------- */
/* The captures carry the flow diagram's canvas (#edebe7), so these sheets use it too. */
.ll-process-figure { margin-top: 40px; }
.ll-wf-row, .ll-ab { border-radius: var(--ll-radius); background: #edebe7; }
.ll-wf-row > div, .ll-ab > div { min-width: 0; }
.ll-wf-row img, .ll-ab img { display: block; width: 100%; height: auto; }
/* Wireframes at their true relative widths. */
.ll-wf-row {
  display: grid; grid-template-columns: 628fr 628fr 1068fr; align-items: end;
  gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 4vw, 48px);
}
.ll-wf-row p { margin: 14px 0 0; font-size: var(--t-callout); line-height: 1.45; color: var(--ink-read); }
.ll-wf-row p b {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  background: #111; color: #fff; font-size: var(--t-label); font-weight: 500; vertical-align: 1px;
}
.ll-ab {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; align-items: start;
  gap: clamp(24px, 6vw, 96px); padding: clamp(24px, 4vw, 56px);
}
/* Before and after at the same scale: columns follow the two captures' widths (820 : 690). */
.ll-ab.is-greet { grid-template-columns: minmax(0, 330px) minmax(0, 278px); align-items: center; }
.ll-ab.is-greet > div:last-child img { border-radius: 16px; box-shadow: 0 14px 34px #00000014, 0 0 0 1px #0000000a; }
/* The earlier capture keeps 50px of canvas around its panel (820 px wide): the label starts at the panel edge instead. */
.ll-ab.is-greet > div:first-child p { margin-bottom: 0; padding-left: 6.1%; }
.ll-ab p { margin: 0 0 14px; font-size: var(--t-callout); line-height: 1.3; font-weight: 500; color: #1d1d1f; }
.ll-ab p span { margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: #2463eb; color: #fff; font-size: var(--t-label); font-weight: 500; }

@media (max-width: 1100px) {
  .ll-research-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 767px) {
  .ll-page .ll-journey-change .ll-change-steps { grid-template-columns: 1fr; }
  .ll-page .ll-change-before .ll-change-steps { gap: 10px; }
  .ll-page .ll-change-before .ll-need-cell { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .ll-page .ll-change-before .ll-need-note { margin: 0; }
  .ll-page .ll-change-after .ll-change-steps li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .ll-flow-tour { margin-top: 40px; }
  /* Phones: a square frame; each stop shows its key nodes (framed by --fx on the list items). */
  .ll-flow-tour.is-live .ll-flow-stage { aspect-ratio: 1 / 1; }
  .ll-research-shots { grid-template-columns: 1fr; }
  .ll-wf-row { gap: 8px; padding: 14px; }
  .ll-wf-row p { font-size: var(--t-label); }
  .ll-ab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
  .ll-ab.is-greet { grid-template-columns: minmax(0, 820fr) minmax(0, 690fr); }
  .ll-ab p { font-size: var(--t-label); }
}
@media (max-width: 600px) {
  .ll-research-rules { grid-template-columns: 1fr; }
}

/* ===================================================================================================
   Type, colour and layout system (loads last).
   Type:    six roles that grow with the window: label 13–14 · callout 15–16 · body 16–19 · heading 20–26 · title 28–46 · display 30–56.
            Headings semibold (600), text 400, emphasis 500. No uppercase.
   Greys:   ink #1d1d1f · reading #424245 · secondary #6e6e73 · tertiary #86868b · hairline #e5e5e5
   Colour:  LiveLarge's own light marks what the assistant does: one blue #88c4ec → champagne #d8b67f gradient for markers,
            outlines, focus rings and state dots (numbers on it are ink). Surfaces stay neutral: page #fff, sheet #edebe7, stage #111.
   Layout:  hero and chapters share one centred column (max 1360); from 1400 px the contents rail sits at the header's left edge.
   =================================================================================================== */
.ll-page {
  --t-label: clamp(13px, .66vw, 14px); --t-callout: var(--t-label); --t-body: clamp(16px, .8vw, 17px);
  --t-heading: clamp(19px, 1.05vw, 22px); --t-title: var(--t-display); --t-display: clamp(28px, 1.9vw, 40px);
  --ink: #1d1d1f; --ink-read: #6e6e73; --ink-2: #6e6e73; --ink-3: #86868b; --hairline: #e5e5e5;
  --sheet: #edebe7; --stage: #111;
  --ll-light: linear-gradient(135deg, #a9d6f2 0%, #88c4ec 40%, #d8b67f 100%);
  --ll-blue: #88c4ec; --ll-blue-soft: #b6dafa; --ll-warm: #d8b67f; --ll-warm-soft: #ead8ba;
  --ll-ink: var(--ink); --ll-muted: var(--ink-2); --ll-rule: var(--hairline); --ll-panel: var(--sheet); --ll-stage: var(--stage);
  --ll-on-dark: #f5f5f7; --ll-on-dark-muted: rgba(255, 255, 255, .72);
  color: var(--ink);
}
.ll-page select, .ll-page button, .ll-page input { font-family: inherit; }

/* ---------- one centred column for hero and chapters ----------
   The content column sits in the middle of the page; from 1400 px the contents rail lives in the left margin
   (the layout grid is rail · content · an empty rail-wide column, so the content stays centred). Below 1400 px
   the rail is the sticky chapter menu. */
.pf-selected-case.ll-page .ll-hero.pf-case-intro { width: calc(100% - 2 * var(--ll-pad)) !important; }
.ll-final-inner { max-width: none; padding-inline: var(--ll-pad); padding-bottom: clamp(96px, 9vw, 160px); }
@media (min-width: 768px) and (max-width: 1399px) { .ll-page { --ll-pad: 48px; } }
@media (min-width: 1400px) {
  /* The rail starts where the header's "HARRY WU" starts (the header's own edge padding); the content column
     (max 1360) is centred in the page, between the rail and an equal empty column on the right. */
  .ll-page { --ll-rail-gap: clamp(40px, 3vw, 72px); --ll-edge: var(--pf-edge, 40px);
    --ll-content: min(1360px, calc(100vw - 2 * (var(--ll-edge) + var(--ll-rail) + var(--ll-rail-gap)) - 16px)); }
  .ll-page .ll-layout {
    width: 100%; max-width: none; padding: 0 var(--ll-edge);
    grid-template-columns: var(--ll-rail) minmax(0, 1fr) var(--ll-rail);
  }
  .ll-page .ll-story { width: var(--ll-content); justify-self: center; }
  .pf-selected-case.ll-page .ll-hero.pf-case-intro { width: var(--ll-content) !important; padding-left: 0 !important; }
  .ll-page .ll-rail { transform: none; }
  .ll-final-inner { width: var(--ll-content); margin-inline: auto; padding-inline: 0; }
}
/* 07: the next step reads as a second, quieter paragraph */
.ll-page .ll-commercial-outcome { row-gap: 20px; }
.ll-page .ll-commercial-outcome .ll-outcome-next { grid-column: 2; font-size: var(--t-body); line-height: 1.6; color: var(--ll-on-dark-muted); }
@media (max-width: 767px) { .ll-page .ll-commercial-outcome .ll-outcome-next { grid-column: auto; } }

/* ---------- type ---------- */
.ll-page :is(h2, h3) { font-weight: 600 !important; }
.ll-page h4 { font-weight: 500 !important; }
.ll-page h2 { letter-spacing: -.02em; }
.ll-page :is(h3, h4) { letter-spacing: -.01em; }
.pf-selected-case.ll-page .pf-case-intro .pf-case-title { font-size: var(--t-display) !important; font-weight: 600 !important; letter-spacing: -.025em; }
.pf-selected-case.ll-page .pf-case-copy > p { font: 400 var(--t-body)/1.6 Geist, Arial, sans-serif !important; color: var(--ink-read); }
.pf-selected-case.ll-page .pf-case-label span { font-size: var(--t-label) !important; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink-3); }
.ll-page .ll-facts dt { font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.ll-page .ll-facts dd { font-size: var(--t-callout); color: var(--ink); }
.ll-page .ll-rail-label { font-size: var(--t-label) !important; color: var(--ink-3); }
.ll-page .ll-rail a { font-size: var(--t-callout); color: var(--ink-3); }
.ll-page .ll-rail a:hover, .ll-page .ll-rail a[aria-current="location"] { font-weight: 500; color: var(--ink); }
.ll-page .ll-clarify-step .ll-evidence-number { font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.ll-page b, .ll-page strong { font-weight: 500; }
.ll-page .ll-design-material b { font: 500 30px/1 LLBarlow, sans-serif; letter-spacing: -.01em; }

/* ---------- markers: the same light as the state dots ---------- */
.ll-page .ll-hl-steps li::before,
.ll-page .ll-wf-row p b,
.ll-page .ll-evo-notes li > span,
.ll-page .ll-flow-num {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font: 600 12px/1 Geist, Arial, sans-serif; letter-spacing: normal;
}
.ll-page .ll-wf-row p b, .ll-page .ll-evo-notes li > span, .ll-page .ll-flow-num { background: var(--ll-light); color: var(--ink); border: 0; }
.ll-page .ll-hl-steps li::before { margin-right: 8px; border: 1px solid var(--hairline); background: #fff; color: var(--ink-3); vertical-align: 0; transition: background .42s, color .42s, border-color .42s; }
.ll-page .ll-hl-steps li.is-on::before { border-color: transparent; background: var(--ll-light); color: var(--ink); }
.ll-page .ll-ab p span { background: var(--ll-light); color: var(--ink); font-weight: 500; }
.ll-evo-pin circle { fill: url(#ll-light); }
.ll-evo-pin text { fill: var(--ink); }

/* ---------- 03 · what the assistant knows: state in LiveLarge's light ---------- */
.ll-knows-card { transition: box-shadow .6s cubic-bezier(.22, .8, .22, 1); }
.ll-knows-card:has([data-state="asking"]), .ll-knows-card:has(.is-hot) {
  box-shadow: inset 0 0 0 1px rgba(182, 218, 250, .22), 0 0 32px -10px rgba(136, 196, 236, .55);
}
.ll-knows-list dd::before, .ll-shortlist span::before { width: 8px; height: 8px; }
.ll-knows-list dd { overflow: visible; }   /* the halo must not be clipped to a square */
.ll-knows-list [data-state="set"] dd::before {
  background: linear-gradient(135deg, #a9d6f2 0%, var(--ll-blue) 40%, var(--ll-warm) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 8px 2px rgba(136, 196, 236, .55), 0 0 18px 4px rgba(216, 182, 127, .32);
}
.ll-knows-list [data-state="asking"] dd::before { background: var(--ll-blue-soft); animation: ll-ask-light 1.6s ease-in-out infinite; }
.ll-knows-list [data-state="asking"] dd {
  color: transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0%, #fff 30%, var(--ll-blue-soft) 45%, var(--ll-warm-soft) 60%, rgba(255, 255, 255, .5) 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; animation: ll-shimmer 2.2s linear infinite;
}
.ll-shortlist .is-hot span { color: #fff; }
.ll-shortlist .is-hot span::before {
  background: linear-gradient(135deg, #a9d6f2 0%, var(--ll-blue) 40%, var(--ll-warm) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 8px 2px rgba(136, 196, 236, .55), 0 0 18px 4px rgba(216, 182, 127, .32);
}
.ll-shortlist .is-hot b { color: var(--ll-warm-soft); }
@keyframes ll-ask-light {
  0%, 100% { background: var(--ll-blue-soft); box-shadow: 0 0 0 0 rgba(136, 196, 236, 0), 0 0 6px 1px rgba(136, 196, 236, .6); }
  50% { background: var(--ll-warm-soft); box-shadow: 0 0 0 4px rgba(216, 182, 127, .16), 0 0 12px 2px rgba(216, 182, 127, .55); }
}
@keyframes ll-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ll-knows-list [data-state="asking"] dd::before, .ll-knows-list [data-state="asking"] dd { animation: none; }
  .ll-knows-list [data-state="asking"] dd { color: rgba(255, 255, 255, .72); background: none; }
}

/* ---------- 05 · wireframes: tops aligned ---------- */
.ll-page .ll-wf-row { align-items: start; }

/* 04 · 4.2: a detail of the seam between the chat and the lot review, not the whole screen again (highlight 1 shows it) */
.ll-lot-evidence .ll-stage.ll-lot-detail > img { border-radius: 8px; clip-path: inset(0 round 8px); }

/* ---------- AI light: only on surfaces where the assistant is on screen ----------
   LiveLarge's own rule, applied to the case study: colour appears when the assistant greets or answers.
   Lit: hero, highlights, 2.1–2.5, the 03 stage, 4.1–4.2, 5.1–5.2, 6.x. Neutral: the old site, research, flow,
   wireframes, before/after, directions, 3.6 and the 5.3/5.4 card breakdowns (process material). */
.ll-page {
  --ll-lit-light:
    radial-gradient(46% 65% at 14% 22%, rgba(136, 196, 236, .62), transparent 70%),
    radial-gradient(44% 60% at 90% 86%, rgba(216, 182, 127, .62), transparent 70%),
    radial-gradient(34% 45% at 74% 12%, rgba(182, 218, 250, .42), transparent 70%),
    radial-gradient(32% 42% at 28% 94%, rgba(234, 216, 186, .5), transparent 70%),
    #eeebe6;
  --ll-lit-dark:
    radial-gradient(42% 60% at 22% 30%, rgba(136, 196, 236, .3), transparent 70%),
    radial-gradient(40% 55% at 82% 78%, rgba(216, 182, 127, .26), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #17181b, #0c0d10 72%);
}
.ll-page #overview .ll-highlight-scene,
.ll-page .ll-context-evidence .ll-evidence-media:not(:has(.ll-transcript-card)),
.ll-page #visual .ll-signal-study,
.ll-page #build figure { background: var(--ll-lit-light) !important; }
.ll-page .ll-stage-hero,
.ll-page #context .ll-stage-video,
.ll-page .ll-context-evidence .ll-evidence-media:has(.ll-transcript-card),
.ll-page .ll-clarify-stage,
.ll-page .ll-chatclip.is-inline,
.ll-page .ll-stage-pair,
.ll-page .ll-lot-evidence .ll-stage.ll-lot-detail { background: var(--ll-lit-dark) !important; }
/* 5.1 sits on the light sheet like 4.1 and 4.2 */
.ll-page .ll-visual-scene { background: var(--ll-lit-light) !important; }

/* 3.5 focus: a ring in the markers' light around the qualification; the rest of the answer fades back */
.ll-chatclip-focus { box-shadow: 0 0 0 9999px #faf8f5b8; }
.ll-chatclip-focus::before {
  content: ""; position: absolute; inset: calc(-1.5px * var(--s, 1)); border-radius: inherit; padding: 1.5px;
  background: linear-gradient(115deg, #88c4ec, #b6dafa 35%, #d8b67f 70%, #88c4ec);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 14px rgba(136, 196, 236, .35);
}

/* ---------- 02 · four key moments, all real prototype captures, one framing ---------- */
.ll-page .ll-context-evidence .ll-evidence-media.ll-ctx-shot { aspect-ratio: auto; min-height: 0; padding: clamp(16px, 2vw, 28px); }
.ll-page .ll-ctx-shot img, .ll-page .ll-ctx-shot video {
  display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18);
}

/* ---------- 05 · greeting before/after: same scale (1.25× the old sheet), tops aligned, After ends at its last row ---------- */
.ll-page .ll-ab.is-greet { grid-template-columns: minmax(0, 412px) minmax(0, 347px); align-items: start; gap: clamp(24px, 4vw, 64px); }
.ll-page .ll-ab.is-greet > div:first-child img { margin-top: calc(-50 / 820 * 100%); }   /* the capture's 50 px of canvas above the panel */
.ll-page .ll-ab.is-greet > div:first-child p { margin-bottom: 14px; }
.ll-page .ll-ab.is-greet > div:last-child img {
  aspect-ratio: 690 / 1094; object-fit: cover; object-position: top;
  -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent);
}
@media (max-width: 767px) { .ll-page .ll-ab.is-greet { grid-template-columns: minmax(0, 820fr) minmax(0, 690fr); } }
.ll-page .ll-ab.is-greet p { position: relative; z-index: 1; }
.ll-page .ll-context-evidence .ll-ctx-shot::after { content: none !important; }   /* the old fade was for the earlier captures */

/* Answer evidence: a crop of the actual prototype, with a closer view on phones. */
.ll-page .ll-answer-detail { display: grid; place-items: center; padding: clamp(20px, 4vw, 64px); background: var(--ll-lit-light); }
.ll-page .ll-answer-detail picture { display: block; width: min(100%, 820px); }
.ll-page .ll-answer-detail img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .18); }
.ll-page .ll-answer-evidence h3 { margin: 0 0 10px; font-size: var(--t-heading); line-height: 1.3; color: var(--ink); }
.ll-page .ll-answer-evidence figcaption p { max-width: 660px; color: var(--ink-read); }
.ll-page #visual .ll-signal-copy h3, .ll-page #build figcaption strong { color: #1d1d1f; }
.ll-page #visual .ll-signal-copy p, .ll-page #build figcaption { color: var(--ink-read); }
.ll-page #visual .ll-signal-copy .ll-fig-tag { color: #6e6e73; }
.ll-page .ll-evolution-panel .ll-evidence-media { background: #edebe7; }
@media (max-width: 767px) { .ll-page .ll-answer-detail { padding: 16px; } }

/* 07: an approximate 14-week overview, with overlapping work rather than four full months. */
.ll-page .ll-project-timeline { background: #111; }
.ll-page .ll-timeline { margin-top: 52px; }
.ll-timeline-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 28px; }
.ll-page .ll-timeline-meta p { margin: 0; font-size: var(--t-callout); line-height: 1.5; color: #a1a1a6; }
.ll-timeline-axis { display: grid; grid-template-columns: 4fr 4fr 4fr 2fr; padding-bottom: 20px; font-size: var(--t-label); color: #a1a1a6; }
.ll-timeline-axis span:last-child { text-align: right; }
.ll-timeline-phases { margin: 0; padding: 0; list-style: none; background: linear-gradient(to right, transparent calc(28.571% - 1px), #ffffff0b 28.571%, transparent calc(28.571% + 1px), transparent calc(57.143% - 1px), #ffffff0b 57.143%, transparent calc(57.143% + 1px), transparent calc(85.714% - 1px), #ffffff0b 85.714%, transparent calc(85.714% + 1px)); }
.ll-timeline-phase { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); padding-bottom: 34px; }
.ll-timeline-phase:last-child { padding-bottom: 0; }
.ll-timeline-track { position: relative; grid-column: var(--phase-start) / var(--phase-end); height: 2px; margin: 4px 4px 18px; background: linear-gradient(90deg, #a9d6f270, #88c4ec90 40%, #d8b67f90); }
.ll-timeline-track::before, .ll-timeline-track::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ll-light); }
.ll-timeline-track::before { left: -4px; }
.ll-timeline-track::after { right: -4px; }
.ll-timeline-copy { grid-column: var(--phase-start) / -1; max-width: 440px; padding-right: 20px; }
.ll-page .ll-timeline-copy h3 { margin: 0 0 10px; font-size: var(--t-heading); line-height: 1.3; color: #f5f5f7; }
.ll-page .ll-timeline-copy p { margin: 0; font-size: var(--t-callout); line-height: 1.65; color: rgba(255, 255, 255, .72); }
.ll-page .ll-timeline-outcome { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; margin-top: 48px; padding-top: 24px; border-top: 1px solid #ffffff26; }
.ll-page .ll-timeline-outcome p { margin: 0; font-size: var(--t-callout); line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ll-page .ll-timeline-outcome .ll-timeline-approved { color: #f5f5f7; font-weight: 500; }
.ll-timeline-approved > span { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--ll-light); }
@media (max-width: 767px) {
  .ll-page .ll-timeline { margin-top: 36px; }
  .ll-timeline-meta { display: block; padding-bottom: 28px; }
  .ll-page .ll-timeline-meta p { margin-top: 6px; }
  .ll-timeline-axis { display: none; }
  .ll-timeline-phases { background: none; }
  .ll-timeline-phase { display: block; position: relative; padding: 0 0 30px 24px; margin-left: 4px; border-left: 1px solid #ffffff26; }
  .ll-timeline-phase:last-child { border-left-color: transparent; padding-bottom: 0; }
  .ll-timeline-track { position: absolute; left: -4.5px; top: 7px; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--ll-light); }
  .ll-timeline-track::before, .ll-timeline-track::after { content: none; }
  .ll-timeline-copy { max-width: none; padding: 0; }
  .ll-page .ll-timeline-outcome { display: block; margin-top: 32px; }
  .ll-page .ll-timeline-outcome p + p { margin-top: 8px; }
}

/* Approved copy review: compare the same tasks, keep evidence at a readable scale. */
.ll-page .ll-journey-compare { padding: clamp(20px, 3vw, 36px); background: #edebe7; border-radius: var(--ll-radius); }
.ll-page .ll-journey-key { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0 0 28px; }
.ll-page .ll-journey-key p { margin: 0; font-size: var(--t-callout); line-height: 1.5; color: var(--ink-read); }
.ll-page .ll-journey-key b, .ll-page .ll-journey-key span { display: block; }
.ll-page .ll-journey-key b { margin-bottom: 6px; color: #1d1d1f; }
.ll-page .ll-journey-columns { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: auto auto auto auto; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ll-page .ll-journey-columns > li { min-width: 0; display: grid; grid-template-rows: subgrid; grid-row: 1 / 5; }
.ll-page .ll-journey-columns h4 { display: flex; flex-direction: column; gap: 10px; margin: 0 0 4px; font-size: var(--t-callout); line-height: 1.4; }
.ll-page .ll-journey-columns h4 > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12px; font-weight: 500; color: var(--ink-read); }
.ll-page .ll-journey-before, .ll-page .ll-journey-after { padding: 16px; border: 1px solid #dedcd8; border-radius: 8px; }
.ll-page .ll-journey-before { background: #f7f6f3; }
.ll-page .ll-journey-after { background: var(--ll-lit-light); border-color: transparent; }
.ll-page .ll-journey-before > span, .ll-page .ll-journey-after > span { display: block; margin-bottom: 12px; font-size: var(--t-label); line-height: 1.4; font-weight: 500; color: #1d1d1f; }
.ll-page .ll-journey-columns p { margin: 0; font-size: var(--t-callout); line-height: 1.55; color: var(--ink-read); }
.ll-page .ll-journey-note { padding-top: 10px; border-top: 2px solid #b9cdd3; font-size: var(--t-label) !important; }
.ll-page .ll-journey-columns > li:nth-child(3) .ll-journey-note { border-image: linear-gradient(90deg,#b9cdd3,#d8b67f) 1; }
.ll-page .ll-journey-columns > li:last-child .ll-journey-note { border-color: #d8b67f; }
.ll-page .ll-research-shots { width: min(100%, 880px); margin-inline: auto; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
.ll-page .ll-research-shots figure { align-items: center; }
.ll-page .ll-research-shots figcaption { align-self: stretch; min-height: 74px; }
.ll-page .ll-research-shots img { width: auto !important; max-width: 100% !important; height: 290px; max-height: 290px; object-fit: contain; background: transparent; border-radius: 6px; }
.ll-page .ll-research-rules { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ll-page .ll-evo-strike { stroke: #6e6e73; stroke-width: 1.1; opacity: .7; }
.ll-page .ll-evo-mark { opacity: .3; mix-blend-mode: multiply; rx: 3; }
.ll-page .ll-evo-pin circle { stroke: #fff; stroke-width: 2; }
.ll-page .ll-evo-pin text { font: 500 13px/1 Geist,Arial,sans-serif; }
.ll-page .ll-evolution-panel .ll-evidence-media { border: 1px solid #e1ded8; border-radius: 10px; overflow: hidden; }
.ll-page .ll-answer-detail { padding: clamp(18px,2.5vw,32px); }
.ll-page .ll-answer-detail picture { width: min(100%, 640px); }
.ll-page .ll-answer-detail img { box-shadow: 0 5px 16px -7px rgba(0,0,0,.16); border-radius: 8px; }
.ll-page .ll-shortlist-price-note { margin: 12px 0 0; font-size: var(--t-label); line-height: 1.4; color: rgba(255,255,255,.72); }
.ll-page .ll-shortlist li { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.ll-page .ll-shortlist li b { white-space: nowrap; }
.ll-page .ll-comparison-spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; padding: clamp(20px,3vw,40px); background: #edebe7; border-radius: var(--ll-radius); }
.ll-page .ll-comparison-spec-grid figure { margin: 0; min-width: 0; }
.ll-page .ll-comparison-spec-grid figcaption { display: block; margin: 0 0 14px; padding: 0; font: 500 var(--t-callout)/1.4 Geist,Arial,sans-serif; color: var(--ink-read); }
.ll-page .ll-comparison-spec-grid img { display: block; width: 100%; height: auto; }
@media(max-width:767px) {
 .ll-page .ll-journey-key { grid-template-columns: 1fr; gap: 14px; margin-bottom: 26px; }
 .ll-page .ll-journey-columns { display: block; }
 .ll-page .ll-journey-columns > li { display: grid; grid-template-rows: auto auto auto auto; gap: 10px; margin-top: 28px; }
 .ll-page .ll-journey-columns > li:first-child { margin-top: 0; }
 .ll-page .ll-journey-columns h4 { flex-direction: row; align-items: baseline; font-size: 17px; }
 .ll-page .ll-journey-columns h4 > span { flex: 0 0 22px; }
 .ll-page .ll-journey-columns p { font-size: 16px; }
 .ll-page .ll-journey-columns > li:nth-child(2) .ll-journey-note, .ll-page .ll-journey-columns > li:nth-child(3) .ll-journey-note { display: none; }
 .ll-page .ll-research-shots { max-width: 440px; grid-template-columns: 1fr; gap: 28px; }
 .ll-page .ll-research-shots figcaption { min-height: 0; }
 .ll-page .ll-research-shots img { width: auto !important; height: auto; max-height: 290px; }
 .ll-page .ll-research-rules { grid-template-columns: 1fr; }
 .ll-page .ll-comparison-spec-grid { grid-template-columns: 1fr; padding: 18px; gap: 28px; }
 .ll-page .ll-answer-detail { padding: 16px; }
}

/* Final review: preserve model names and let narrow screens inspect both comparison cards. */
.ll-page .ll-journey-columns h4 > span { background: var(--ll-light); color: #1d1d1f; }
.ll-page .ll-spec-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b6b3ad transparent; border-radius: 6px; }
.ll-page .ll-spec-scroll:focus-visible { outline: 2px solid #88c4ec; outline-offset: 4px; }
.ll-page .ll-shortlist li > span { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1600px) {
 .ll-page .ll-shortlist li { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; row-gap: 2px; }
 .ll-page .ll-shortlist li > span { grid-column: 1; grid-row: 1; }
 .ll-page .ll-shortlist li > em { grid-column: 1; grid-row: 2; padding-left: 14px; }
 .ll-page .ll-shortlist li > b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 767px) {
 .ll-page .ll-comparison-spec-grid .ll-spec-scroll img { width: 560px; min-width: 560px; max-width: none; }
}

/* ---------- 05 · greeting before/after: both panels cropped to their edges, same scale, same frame ----------
   (the earlier crops carried a baked shadow on Before and a fade on After, which read as the wrong way round) */
.ll-page .ll-ab.is-greet { grid-template-columns: repeat(2, minmax(0, 350px)); align-items: start; gap: clamp(24px, 4vw, 64px); }
.ll-page .ll-ab.is-greet > div p { margin: 0 0 14px; padding: 0; }
.ll-page .ll-ab.is-greet > div img,
.ll-page .ll-ab.is-greet > div:first-child img,
.ll-page .ll-ab.is-greet > div:last-child img {
  margin: 0; aspect-ratio: auto; object-fit: fill; border-radius: 14px;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18);
}
@media (max-width: 767px) { .ll-page .ll-ab.is-greet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- 01 · browsing with and without the assistant: two bands, one box per row ----------
   Same four columns everywhere. The existing-site band is divided between steps (each page starts over);
   the assistant band runs without dividers, with one thread under it (needs carry through). */
.ll-page .ll-journey-compare { --jc-pad: 20px; }
.ll-page .ll-journey-steps,
.ll-page .ll-journey-band ol,
.ll-page .ll-journey-thread { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ll-page .ll-journey-steps { margin: 4px 0 14px; padding-inline: 1px; }
.ll-page .ll-journey-steps li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 var(--jc-pad);
  font-size: var(--t-callout); line-height: 1.4; font-weight: 500; color: var(--ink);
}
.ll-page .ll-journey-steps li > span {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ll-light); color: var(--ink); font: 600 12px/1 Geist, Arial, sans-serif;
}
.ll-page .ll-journey-band { border: 1px solid #dedcd8; border-radius: 12px; background: #f7f6f3; }
.ll-page .ll-journey-band + .ll-journey-band { margin-top: 12px; }
.ll-page .ll-journey-band.is-after { border-color: transparent; background: var(--ll-lit-light); }
.ll-page .ll-journey-band-label { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; padding: 16px var(--jc-pad) 0; font-size: var(--t-callout); line-height: 1.5; }
.ll-page .ll-journey-band-label b { font-weight: 500; color: var(--ink); }
.ll-page .ll-journey-band-label span { color: var(--ink-2); }
.ll-page .ll-journey-band li { padding: 12px var(--jc-pad) 18px; font-size: var(--t-callout); line-height: 1.55; color: var(--ink-read); }
.ll-page .ll-journey-band.is-before li + li { border-left: 1px solid #dedcd8; }
.ll-page .ll-journey-band li::before { display: none; }
.ll-page .ll-journey-thread { margin-top: 14px; padding: 10px 1px 0; border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #b9cdd3, #88c4ec 45%, #d8b67f) 1; }
.ll-page .ll-journey-thread span { padding: 0 var(--jc-pad); font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.ll-page .ll-journey-thread span:first-child { grid-column: 1 / 4; }
.ll-page .ll-journey-thread span:last-child { grid-column: 4; }
@media (max-width: 767px) {
  .ll-page .ll-journey-compare { --jc-pad: 16px; }
  .ll-page .ll-journey-steps { display: none; }
  .ll-page .ll-journey-band ol, .ll-page .ll-journey-thread { grid-template-columns: 1fr; }
  .ll-page .ll-journey-band li { padding-top: 12px; padding-bottom: 14px; }
  .ll-page .ll-journey-band li::before { content: attr(data-title); display: block; margin-bottom: 4px; font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
  .ll-page .ll-journey-band.is-before li + li { border-left: 0; border-top: 1px solid #dedcd8; }
  .ll-page .ll-journey-thread span:first-child, .ll-page .ll-journey-thread span:last-child { grid-column: auto; }
}

/* ---------- 02 · 2.2 focus: the page fades back and a ring finds "Viewing L-800" ----------
   The same focus language as 3.5 and the user-flow stops: no zoom, no blur. One loop, 6 s:
   0–1.2 s whole shot · 1.2–1.9 s dim (#faf8f5 at 55%) and ring in (104% → 100%), cubic-bezier(.22, 1, .36, 1)
   · hold to 4.4 s · out by 4.8 s, cubic-bezier(.4, 0, 1, 1) · whole shot to 6 s. Plays only on screen. */
.ll-page .ll-focus-shot { position: relative; overflow: hidden; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18); }
.ll-page .ll-ctx-shot .ll-focus-shot img { box-shadow: none; border-radius: 0; }
.ll-page .ll-focus-shot-mark {
  position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(250, 248, 245, .55); opacity: 0; transform: scale(1.04); pointer-events: none;
}
.ll-page .ll-focus-shot-mark::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(115deg, #88c4ec, #b6dafa 35%, #d8b67f 70%, #88c4ec);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 14px rgba(136, 196, 236, .35);
}
.ll-page .ll-focus-shot.is-running .ll-focus-shot-mark { animation: ll-focus-shot 6s infinite; }
@keyframes ll-focus-shot {
  0%, 20% { opacity: 0; transform: scale(1.04); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  31.667%, 73.333% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  80%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ll-page .ll-focus-shot .ll-focus-shot-mark, .ll-page .ll-focus-shot.is-running .ll-focus-shot-mark { animation: none; opacity: 1; transform: none; }
}

/* ---------- round: no dividers in the existing-site band; greeting panels whole; wider gaps; hero copy to the edge ---------- */
.ll-page .ll-journey-band.is-before li + li { border-left: 0; border-top: 0; }
.ll-page .ll-ab.is-greet { grid-template-columns: repeat(2, minmax(0, 350px)); align-items: center; gap: clamp(32px, 7vw, 120px); padding-block: 56px; }
.ll-page .ll-ab.is-dir { gap: clamp(32px, 7vw, 120px); }
.pf-selected-case.ll-page .ll-hero-side > p { max-width: none; }
@media (max-width: 767px) { .ll-page .ll-ab.is-greet, .ll-page .ll-ab.is-dir { gap: 12px; padding-block: 16px; } }
/* 05 · directions: the same lit sheet as 5.2; panels cropped to their edges with the page's panel shadow */
.ll-page .ll-ab.is-dir { background: var(--ll-lit-light) !important; }
.ll-page .ll-ab.is-dir img { border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18); }

/* ---------- 01 · the assistant band reads as running: the prototype's edge light and a breathing dot ---------- */
@property --ll-edge-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ll-page .ll-journey-band.is-after { position: relative; }
.ll-page .ll-journey-band.is-after::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 13px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ll-edge-angle), rgba(182, 218, 250, .35) 0deg, rgba(182, 218, 250, .35) 200deg, #88c4ec 250deg, #fff 280deg, #d8b67f 315deg, rgba(234, 216, 186, .35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ll-edge-spin 7s linear infinite;
}
@keyframes ll-edge-spin { to { --ll-edge-angle: 360deg; } }
.ll-page .ll-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; vertical-align: 1px;
  background: linear-gradient(135deg, #a9d6f2, #88c4ec 40%, #d8b67f); animation: ll-live-breathe 2.4s ease-in-out infinite; }
@keyframes ll-live-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(136, 196, 236, 0), 0 0 6px 1px rgba(136, 196, 236, .5); } 50% { box-shadow: 0 0 0 4px rgba(216, 182, 127, .18), 0 0 12px 2px rgba(216, 182, 127, .5); } }
@media (prefers-reduced-motion: reduce) { .ll-page .ll-journey-band.is-after::before, .ll-page .ll-live-dot { animation: none; } }

/* ---------- 08 · AI behavior evaluation summary above the timeline (chapter 04's numbers only); seven-sprint axis ---------- */
.ll-page .ll-results { padding-bottom: clamp(56px, 6vw, 96px); margin-bottom: clamp(56px, 6vw, 96px); border-bottom: 1px solid #ffffff26; }
.ll-page .ll-results-label { margin: 0 0 24px; font-size: var(--t-label); color: #a1a1a6; }
.ll-page .ll-results-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
.ll-page .ll-results-stats dt { font-size: var(--t-display); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #f5f5f7; }
.ll-page .ll-results-stats dd { margin: 12px 0 0; font-size: var(--t-callout); line-height: 1.5; color: rgba(255, 255, 255, .72); }
.ll-timeline-axis { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.ll-timeline-axis span:last-child { text-align: left !important; }
.ll-page .ll-timeline-phases { background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 7 - 1px), #ffffff0b calc(100% / 7 - 1px), #ffffff0b calc(100% / 7)) !important; }
@media (max-width: 767px) { .ll-page .ll-results-stats { grid-template-columns: 1fr; gap: 24px; } .ll-page .ll-timeline-phases { background: none !important; } }
/* 05 (Compare & verify): one prototype conversation in three figures — the ask and its table, the sources, the hand-off
   to a lot review. 5.2 and 5.3 use the 2.2 focus loop; 5.1 sits on the AI-light sheet like 5.2. */
.ll-page .ll-compare-fig h3 { margin: 0 0 10px; font-size: var(--t-heading); line-height: 1.3; color: var(--ink); }
.ll-page .ll-compare-fig figcaption p { max-width: 660px; margin: 0; color: var(--ink-read); }
.ll-page .ll-ask-stage { display: grid; place-items: center; padding: clamp(28px, 4vw, 64px); background: var(--ll-lit-light); }
.ll-page .ll-ask-stage img { display: block; width: min(100%, 600px); height: auto; border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .18); }
.ll-page .ll-sources-stage .ll-focus-shot { width: min(100%, 720px); }
.ll-page .ll-sources-stage picture { display: block; width: 100%; }
.ll-page .ll-lot-stage { padding: clamp(20px, 3vw, 48px); background: var(--ll-lit-light); }
.ll-page .ll-sources-stage .ll-focus-shot img, .ll-page .ll-lot-stage .ll-focus-shot img { display: block; width: 100%; height: auto; box-shadow: none; border-radius: 0; }
@media (max-width: 767px) {
  .ll-page .ll-ask-stage { padding: 16px; }
  .ll-page .ll-lot-stage { padding: 12px; }
  .ll-page .ll-sources-shot { --fx: 2.7% !important; --fy: 58.7% !important; --fw: 66.6% !important; --fh: 26% !important; }
}

/* ---------- 04 · AI behavior & evaluation ----------
   Process material, so neutral surfaces (sheet #edebe7, white cards); the AI light appears only as markers.
   One colour meaning throughout: blue = supported by the evidence, sand/warm = outside it or unsupported,
   the full gradient = what the V2 revision changed. Pass/fail cells differ in shape (solid vs dashed), not colour alone. */
.ll-page .ll-bx-heading { max-width: 680px; margin-bottom: 28px; }
.ll-page .ll-bx-heading .ll-fig-tag { display: block; margin-bottom: 10px; }
.ll-page .ll-bx-heading h3 { margin: 0; font-size: var(--t-heading); line-height: 1.3; color: var(--ink); }
.ll-page .ll-bx-heading p { margin: 12px 0 0; line-height: 1.7; color: var(--ink-read); }
.ll-page :is(.ll-bx-zones, .ll-bx-result, .ll-bx-holdout-stage) { padding: clamp(20px, 3vw, 40px); border-radius: var(--ll-radius); background: var(--sheet); }
.ll-page .ll-bx-label, .ll-page .ll-bx-result-label, .ll-page .ll-bx-transcript-label, .ll-page .ll-bx-clusters > p { margin: 0 0 14px; font-size: var(--t-label); line-height: 1.5; color: var(--ink-2); }
.ll-page [class*="ll-bx"] mark { padding: 0 .12em; border-radius: 3px; background: var(--ll-warm-soft); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 4.1 · three zones; "needs verification" is drawn unfilled and dashed: outside the assistant's evidence */
.ll-bx-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(14px, 2vw, 24px); }
.ll-page .ll-bx-zone { margin: 0; padding-bottom: 10px; border-bottom: 1px solid #d3d0ca; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.ll-bx-zone.is-inside { grid-column: 1 / 3; }
.ll-bx-zone.is-outside { grid-column: 3; border-bottom: 1px dashed #b39462; }
.ll-bx-col { min-width: 0; padding: clamp(18px, 2vw, 24px); border-radius: 12px; background: #fff; }
.ll-bx-col.is-verify { background: transparent; outline: 1px dashed #b39462; outline-offset: -1px; }
.ll-page .ll-bx-col h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; font-size: var(--t-body); line-height: 1.3; color: var(--ink); }
.ll-page .ll-bx-col h4 span { flex-basis: 100%; font-size: var(--t-label); font-weight: 400; color: var(--ink-2); }
.ll-bx-col h4 i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ll-bx-col.is-known h4 i { background: var(--ll-blue); }
.ll-bx-col.is-context h4 i { background: linear-gradient(90deg, var(--ll-blue) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ll-blue); }
.ll-bx-col.is-verify h4 i { box-shadow: inset 0 0 0 1.5px #b39462; }
.ll-bx-col ul { margin: 0; padding: 0; list-style: none; }
.ll-page .ll-bx-col li { padding: 10px 0; border-top: 1px solid var(--hairline); font-size: var(--t-callout); line-height: 1.5; color: var(--ink-read); }
.ll-bx-col.is-verify li { border-top-color: #ddd2bf; }
.ll-page .ll-bx-principle { max-width: 680px; margin: 24px 0 0; line-height: 1.7; color: var(--ink-read); }
.ll-page .ll-bx-principle b { color: var(--ink); }

/* 4.2 · method: what was fixed, six example scenarios with their pass condition, the rubric, the scoring note */
.ll-page .ll-bx-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); }
.ll-page .ll-bx-spec dt { font-size: var(--t-title); line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ll-page .ll-bx-spec dd { margin: 10px 0 0; font-size: var(--t-callout); line-height: 1.5; color: var(--ink-2); }
.ll-bx-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ll-bx-cases li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(18px, 2vw, 24px); border-radius: 12px; background: var(--sheet); }
.ll-page .ll-bx-case-cat { margin: 0; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.ll-page .ll-bx-case-q { margin: 0; font-size: var(--t-body); line-height: 1.4; font-weight: 500; color: var(--ink); }
.ll-page .ll-bx-case-pass { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #dedcd8; font-size: var(--t-callout); line-height: 1.55; color: var(--ink-read); }
.ll-page .ll-bx-case-pass b { color: var(--ink); }
.ll-bx-criteria { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; }
.ll-page .ll-bx-criteria > p:first-child { margin: 0 4px 0 0; font-size: var(--t-label); color: var(--ink-2); }
.ll-bx-criteria ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ll-page .ll-bx-criteria li { padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px; font-size: var(--t-callout); line-height: 1.3; color: var(--ink); }
.ll-page .ll-bx-rule { flex-basis: 100%; margin: 4px 0 0; font-size: var(--t-callout); line-height: 1.55; color: var(--ink-read); }
.ll-page .ll-bx-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin: 28px 0 0; padding: 16px 20px; border-left: 2px solid transparent; border-image: linear-gradient(#88c4ec, #d8b67f) 1; background: #f7f6f3; font-size: var(--t-callout); line-height: 1.6; color: var(--ink-read); }
.ll-page .ll-bx-note b { color: var(--ink); }

/* 4.3 · three quoted failures (the unsupported phrase in sand), then all five clustered by cause */
.ll-bx-fails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ll-bx-fails > li { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(18px, 2vw, 24px); border-radius: 12px; background: var(--sheet); }
.ll-page .ll-bx-fails li > p { margin: 0; font-size: var(--t-callout); line-height: 1.6; color: var(--ink-read); }
.ll-page .ll-bx-fails .ll-bx-fail-tag { display: flex; align-items: center; gap: 10px; font-size: var(--t-label); font-weight: 500; color: var(--ink); }
.ll-bx-fail-tag b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ll-light); font: 600 12px/1 Geist, Arial, sans-serif; color: var(--ink); }
.ll-bx-fail-tag span { margin-left: auto; font-weight: 400; color: var(--ink-2); }
.ll-bx-fails blockquote { margin: 0; }
.ll-page .ll-bx-fails blockquote p { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink); }
.ll-page .ll-bx-fails .ll-bx-fix { margin-top: auto; padding-top: 12px; border-top: 1px solid #dedcd8; font-size: var(--t-label); color: var(--ink-2); }
.ll-bx-clusters { margin-top: 28px; }
.ll-bx-clusters ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.ll-bx-clusters li { padding-top: 12px; border-top: 1px solid var(--hairline); }
.ll-page .ll-bx-clusters b { display: block; font-size: var(--t-callout); line-height: 1.45; color: var(--ink); }
.ll-page .ll-bx-clusters span { display: block; margin-top: 6px; font-size: var(--t-label); color: var(--ink-2); }

/* 4.4 · one rule per root cause, numbered in the markers' light; the 3.6 revision restated as the policy's origin */
.ll-bx-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin: 0; padding: 0; list-style: none; }
.ll-bx-rules > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.ll-bx-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ll-light); font: 600 12px/1 Geist, Arial, sans-serif; color: var(--ink); }
.ll-page .ll-bx-rules h4 { margin: 0 0 6px; font-size: var(--t-body); line-height: 1.35; color: var(--ink); }
.ll-page .ll-bx-rules p { margin: 0; font-size: var(--t-callout); line-height: 1.6; color: var(--ink-read); }
.ll-page .ll-bx-rules .ll-bx-from { margin-top: 8px; font-size: var(--t-label); color: var(--ink-2); }
.ll-page .ll-bx-echo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 8px 24px; margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: var(--t-callout); line-height: 1.55; }
.ll-page .ll-bx-echo a { font-size: var(--t-label); color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.ll-page .ll-bx-echo a:hover { text-decoration-color: currentColor; }
.ll-bx-echo-pair { font-size: var(--t-heading); line-height: 1.3; font-weight: 500; white-space: nowrap; color: var(--ink); }
.ll-bx-echo-pair s { color: var(--ink-3); text-decoration-thickness: 1px; }
.ll-bx-echo-pair > span { margin: 0 .35em; color: var(--ink-3); }
.ll-bx-echo > span:last-child { color: var(--ink-read); }

/* 4.5 · the same 15 cells before and after; V2's repaired cells carry the full light (they change in once revealed) */
.ll-page .ll-bx-runs { display: grid; gap: 20px; margin: 0; }
.ll-bx-run { display: grid; grid-template-columns: 44px minmax(120px, auto) minmax(0, 1fr); align-items: center; gap: 20px; }
.ll-page .ll-bx-run dt { font-size: var(--t-heading); font-weight: 600; color: var(--ink); }
.ll-page .ll-bx-run dd { margin: 0; }
.ll-page .ll-bx-score, .ll-page .ll-bx-holdout-num b { font-size: var(--t-display); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ll-page :is(.ll-bx-score, .ll-bx-holdout-num b) small { margin-left: 2px; font-size: var(--t-heading); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.ll-bx-cells { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
.ll-bx-cells > span { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11px/1 Geist, Arial, sans-serif; font-variant-numeric: tabular-nums;
  transition: background-color .5s var(--ll-ease), color .5s var(--ll-ease), outline-color .5s var(--ll-ease); }
.ll-bx-cells > .is-fail { background: transparent; color: var(--ink-2); outline: 1.5px dashed #9a7a45; outline-offset: -1.5px; }
.ll-bx-cells > .is-fixed { background: var(--ll-light); color: var(--ink); outline: 1.5px dashed transparent; outline-offset: -1.5px; }
.ll-js .ll-bx-regression:not(.is-in) .ll-bx-cells > .is-fixed { background: transparent; color: var(--ink-2); outline-color: #9a7a45; }
.ll-js .ll-bx-regression .ll-bx-cells > .is-fixed { transition-delay: .7s; }
.ll-bx-cells.is-holdout { grid-template-columns: repeat(5, minmax(0, 48px)); }
.ll-bx-result-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #d3d0ca; }
.ll-page .ll-bx-delta { margin: 0; line-height: 1.5; color: var(--ink-read); }
.ll-page .ll-bx-delta b { font-weight: 600; color: var(--ink); }
.ll-bx-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.ll-page .ll-bx-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--t-label); color: var(--ink-2); }
.ll-bx-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.ll-bx-legend i.is-fixed { background: var(--ll-light); }
.ll-bx-legend i.is-fail { background: transparent; outline: 1.5px dashed #9a7a45; outline-offset: -1.5px; }
.ll-page .ll-bx-after, .ll-page .ll-bx-judgment { max-width: 720px; margin: 20px 0 0; line-height: 1.7; color: var(--ink-read); }

/* 4.6 · holdout score beside the raw H1 output: wrong pair (sand), recovery (blue) */
.ll-bx-holdout-stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ll-page .ll-bx-holdout-num { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.ll-page .ll-bx-holdout-num span { font-size: var(--t-callout); color: var(--ink-2); }
.ll-page .ll-bx-small { margin: 20px 0 0; font-size: var(--t-label); line-height: 1.6; color: var(--ink-2); }
.ll-bx-transcript { padding: clamp(20px, 2.4vw, 28px); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -12px rgba(0, 0, 0, .18); }
.ll-page .ll-bx-ask { margin: 0 0 20px; font-size: var(--t-body); line-height: 1.45; font-weight: 500; color: var(--ink); }
.ll-page .ll-bx-ask span { display: block; margin-bottom: 4px; font-size: var(--t-label); font-weight: 400; color: var(--ink-2); }
.ll-bx-turns { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ll-bx-turns > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline; padding-left: 14px; border-left: 2px solid var(--ll-blue); }
.ll-bx-turns > li.is-wrong { border-left: 2px dashed #b39462; }
.ll-bx-turns blockquote { margin: 0; }
.ll-page .ll-bx-turns blockquote p { margin: 0; font-size: var(--t-callout); line-height: 1.6; color: var(--ink); }
.ll-page .ll-bx-turns .is-right mark { background: #d4e9f8; }
.ll-page .ll-bx-turn-note { margin: 0; font-size: var(--t-label); white-space: nowrap; color: var(--ink-2); }
.ll-page .ll-bx-verdict { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: var(--t-label); font-weight: 500; color: var(--ink); }
.ll-page .ll-bx-verdict::before { content: ""; width: 12px; height: 12px; border-radius: 3px; outline: 1.5px dashed #9a7a45; outline-offset: -1.5px; }
.ll-page .ll-bx-closing { max-width: 34ch; padding-top: 28px; border-top: 2px solid transparent; border-image: linear-gradient(90deg, #a9d6f2, #88c4ec 40%, #d8b67f) 1;
  font-size: var(--t-display); line-height: 1.25; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; color: var(--ink); }

/* 6.4 · one comparison example instead of four overlays */
.ll-page .ll-comparison-spec-grid.is-single { grid-template-columns: 1fr; }
.ll-page .ll-comparison-spec-grid.is-single .ll-spec-scroll { width: min(100%, 760px); margin-inline: auto; }
/* 08 · the evaluation summary: the before → after figure needs the widest column */
.ll-page .ll-results-stats { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.ll-page .ll-results-stats dt { white-space: nowrap; }
.ll-page .ll-results-note { margin: 24px 0 0; font-size: var(--t-label); line-height: 1.5; color: #a1a1a6; }

@media (max-width: 1100px) {
  .ll-bx-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ll-bx-fails, .ll-bx-holdout-stage { grid-template-columns: 1fr; }
  .ll-bx-rules, .ll-bx-clusters ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ll-bx-zones { grid-template-columns: 1fr; }
  .ll-bx-zone.is-inside, .ll-bx-zone.is-outside { grid-column: auto; }
  .ll-bx-zone.is-outside { order: 3; margin-top: 12px; }
  .ll-bx-col.is-verify { order: 4; }
  .ll-page .ll-bx-spec { grid-template-columns: 1fr; gap: 16px; }
  .ll-bx-cases, .ll-bx-rules, .ll-bx-clusters ul { grid-template-columns: 1fr; }
  .ll-page .ll-bx-note { grid-template-columns: 1fr; gap: 6px; }
  .ll-page .ll-bx-echo { grid-template-columns: 1fr; }
  .ll-bx-echo-pair { white-space: normal; }
  .ll-bx-run { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; }
  .ll-bx-run > dd:last-child { grid-column: 1 / -1; }
  .ll-bx-cells { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .ll-bx-turns > li { grid-template-columns: 1fr; }
  .ll-page .ll-results-stats { grid-template-columns: 1fr; }
  .ll-page .ll-results-stats dt { white-space: normal; }
}

/* 07 review: passed cells go white so the fixed ones carry the colour, the one new V2 failure is named,
   and the results band holds both measures. */
.ll-bx-cells > span { background: #fff; color: var(--ink); }
.ll-bx-legend i { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28); }
.ll-bx-cells > .is-new { position: relative; overflow: visible; }
.ll-bx-cells > .is-new::after { content: attr(data-note); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 500 11px/1.2 Geist, Arial, sans-serif; color: #9a7a45; }
.ll-page .ll-bx-runs { margin-bottom: 18px; }
.ll-page .ll-results-group + .ll-results-group { margin-top: clamp(40px, 4vw, 64px); }
@media (max-width: 767px) { .ll-bx-cells:has(.is-new) { row-gap: 26px; } }

/* Neat pass (Oct 6): one marking language, quieter 7.2, two-column rules, four type roles. */
/* Marks: sand = what was wrong, blue = what fixed it — the same in 3.6 as in chapter 07. */
.ll-page .ll-evo-mark { opacity: 1; mix-blend-mode: multiply; }
.ll-page .ll-evo-mark.is-problem { fill: var(--ll-warm-soft); }
.ll-page .ll-evo-mark.is-fix { fill: #d4e9f8; }
.ll-page .ll-evo-pin circle { r: 12px; }
.ll-page .ll-evo-pin text { font: 600 12px/1 Geist, Arial, sans-serif; }
.ll-bx-cells > span { font-size: 12px; }
/* 7.2: the visitor's question as a chat message, "Pass if" quiet underneath */
.ll-bx-cases.is-chat li { gap: 14px; }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-q { align-self: flex-end; max-width: 92%; padding: 10px 14px; border-radius: 12px 12px 3px 12px; background: #fff; font-weight: 400; line-height: 1.45; }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-q q { quotes: none; }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-pass { border-top: 0; padding-top: 0; color: var(--ink-read); }
.ll-page .ll-bx-also { margin: 14px 0 0; font-size: var(--t-label); line-height: 1.5; color: var(--ink-2); }
/* 7.4: two columns, three rows */
.ll-bx-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; gap: 28px 56px; }
@media (max-width: 767px) { .ll-bx-rules { grid-template-columns: 1fr; } }
/* Reading measure follows the smaller body size (about 65 characters a line). */
.ll-page .ll-text, .ll-page .ll-lot-detail p, .ll-page .ll-answer-evidence figcaption p, .ll-page .ll-compare-fig figcaption p { max-width: 590px; }
.ll-page .ll-flow-heading, .ll-page .ll-research-lead, .ll-page .ll-evolution-heading, .ll-page .ll-evidence-copy, .ll-page .ll-design-note, .ll-page .ll-build-example figcaption { max-width: 580px; }
.ll-page .ll-bx-heading, .ll-page .ll-bx-principle { max-width: 610px; }
.ll-page .ll-audit-intro p { max-width: 625px; }
.ll-page .ll-bx-judgment, .ll-page .ll-bx-after, .ll-page .ll-audit-challenge, .ll-page .ll-callout { max-width: 645px; }
.ll-page .ll-design-intro { max-width: 615px; }

/* Reading emphasis is ink and weight only: one key phrase per chapter intro, never a colour, underline or fill.
   Sand and blue stay with the evidence in figures. Every inline bold and small title shares the same 500. */
/* A key phrase only changes tone and weight, even inside blocks that style their own strong as a title. */
.ll-page .ll-key { display: inline !important; margin: 0 !important; font-size: inherit !important; line-height: inherit !important; font-weight: 500; color: var(--ink); }
.ll-page .ll-bx-delta b, .ll-page .ll-bx-run dt { font-weight: 500; }

/* Reading grey is #6e6e73 so the ink key phrases stand out; on the grey sheets it stays #5f5f64 to keep AA contrast. */
.ll-page :is(.ll-bx-cases li, .ll-bx-fails li, .ll-bx-result, .ll-bx-holdout-stage, .ll-journey-change, .ll-bx-zones) { --ink-read: #5f5f64; }
/* "What I found" card titles in ink, like every other title */
.ll-page .ll-audit-copy h3, .ll-page .ll-audit-copy h4 { color: var(--ink) !important; }

/* Alignment pass (Oct 6) */
/* Numbered steps: the number sits on the text's line, the same as 3.6, 5.x and 7.4. */
.ll-page .ll-journey-steps li { flex-direction: row; align-items: center; gap: 10px; }
.ll-page .ll-journey-steps { margin: 4px 0 12px; }
.ll-constraints li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.ll-constraints li::before { content: counter(constraint); grid-row: 1; display: grid; place-items: center; width: 22px; height: 22px; margin: 0;
  border-radius: 50%; background: var(--ll-light); font: 600 12px/1 Geist, Arial, sans-serif; color: var(--ink); }
.ll-constraints li > * { grid-column: 2; }
.ll-page .ll-constraints strong { margin-top: 1px; }
/* Journey: the three rows share one grid and one gap; the thread keeps its two notes without the rule. */
.ll-page .ll-journey-thread { margin-top: 12px; padding-top: 0; border-top: 0; border-image: none; }
/* 7.2: a little more room, and bubbles that end where their text ends (width set by js/livelarge.js). */
.ll-bx-cases.is-chat li { gap: 18px; padding: clamp(18px, 1.5vw, 32px); }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-q { max-width: 100%; padding: 12px clamp(12px, 1vw, 16px); text-wrap: balance; }
/* 7.3: each explanation rests on the footer line, so the three cards line up at the bottom. */
/* 7.3: the explanation follows its quote; the footer rule sits close above "Led to rule" at the bottom of the card. */
.ll-page .ll-bx-fails li > p:not(.ll-bx-fail-tag):not(.ll-bx-fix) { margin-top: -2px; }
.ll-page .ll-bx-fails .ll-bx-fix { margin-top: auto; padding-top: 8px; line-height: 1.4; }
.ll-bx-fails > li { padding-bottom: clamp(16px, 1.6vw, 22px); }
/* 7.2 criteria chips in the assistant's light: a soft blue-to-champagne fill, ink text, no outline. */
.ll-page .ll-bx-criteria li { border-color: transparent; background: linear-gradient(115deg, #dcecf8, #e9eef0 55%, #efe2cb); }

/* 5.4: cards and table side by side, tops aligned, each image on white like the panel it came from */
.ll-page .ll-comparison-spec-grid.is-rule { grid-template-columns: 1.3fr 1fr; align-items: start; }
.ll-page .ll-comparison-spec-grid.is-rule figure > img { border-radius: 8px; background: #fff; }
@media (max-width: 767px) { .ll-page .ll-comparison-spec-grid.is-rule { grid-template-columns: 1fr; } }

/* 7.2 order: how an answer passes (criteria and the rule) comes before the three examples. */
.ll-page .ll-bx-method .ll-bx-criteria { margin: 0 0 clamp(32px, 3vw, 44px); }
.ll-page .ll-bx-method .ll-bx-rule { margin-top: 2px; }
.ll-page .ll-bx-method .ll-bx-small { margin-top: 16px; }

/* 7.3 cards end with their explanation now that the forward-pointing footer is gone. */
.ll-bx-fails > li { padding-bottom: clamp(18px, 2vw, 24px); }

/* 7.2: label, question and "Pass if" share three rows across the cards, so the three bubbles sit level,
   centred in their row and in the card. 7.3: each explanation rests on the bottom, so the last lines align. */
.ll-bx-cases.is-chat { grid-template-rows: auto auto auto; row-gap: 12px; }
.ll-bx-cases.is-chat li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 18px; }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-q { align-self: center; justify-self: center; }
.ll-page .ll-bx-cases.is-chat .ll-bx-case-pass { align-self: start; margin: 0; }
.ll-page .ll-bx-fails li > p:not(.ll-bx-fail-tag):not(.ll-bx-fix) { margin-top: auto; }