/* Brand Logo — Figma 554:403 (chapter 04). Prefix: lg- */
body[data-chapter="logo"] { --dock-y: 168; --dock-x: 160; --lg-grey: #F0F0F0; --lg-ok: #1F9D55; --lg-bad: #E5484D; }

/* ---------- hero (navy, Figma "Brand Mindmap" chip is lilac) ---------- */
.fh.th-navy { color: #fff; }
.fh.th-navy .fh__chips .chip:first-child { background: var(--m-lilac); color: var(--m-navy); }
.lg-chips { max-width: min(1240px, 92%); }
.fh.th-navy .fh__s img { filter: blur(var(--strip-blur, 7px)) saturate(.55) contrast(1.15) brightness(1.05); }

/* ---------- shared bits ---------- */
.lg-grey { --bg: var(--lg-grey); }
.lg-rule { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; padding: 0; background: var(--m-lilac); }
.lg-hint { margin-top: var(--s-3); }
.lg-tool { display: grid; gap: .6em; margin-top: var(--s-4); justify-items: start; }
.lg-layers { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-layers .ctrl { font: 500 var(--t-small)/1 var(--font-display); padding: .72em 1.05em; }
.lg-layers .ctrl .t-ar { font-weight: 700; line-height: .8; }
.ctrl { color: var(--fg); }
.lg-play { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .25s, background .25s, transform .35s var(--ease); }
.lg-play:hover { box-shadow: inset 0 0 0 1.5px var(--fg); transform: scale(1.05); }
.lg-play__i { width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.lg-play.is-playing .lg-play__i { width: 11px; height: 13px; margin: 0; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.lg-range { display: flex; align-items: center; gap: .8em; flex: 1 1 200px; min-width: 0; }
.lg-range--wide { flex-basis: 320px; }
.lg-range > span { white-space: nowrap; }
.lg-range input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; --pct: 50%; }
.lg-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(var(--m-purple), var(--m-purple)) 0 0 / var(--pct) 100% no-repeat, var(--line); }
.lg-range input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line); }
.lg-range input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--m-purple); }
.lg-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--m-purple), 0 6px 14px -4px rgba(14,19,60,.45); transition: transform .25s var(--ease); }
.lg-range input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--m-purple), 0 6px 14px -4px rgba(14,19,60,.45); }
.lg-range input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.lg-range input[type="range"]:focus-visible { outline: none; }
.lg-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-purple); }
.lg-out { font: 600 var(--t-small)/1 var(--font-display); min-width: 6.5em; font-variant-numeric: tabular-nums; }
.lg-out--big { font-size: var(--t-h4); min-width: 6.2em; }
.lg-copy { padding: .5em .8em; border-radius: 10px; font: 600 var(--t-small)/1 ui-monospace, Menlo, monospace; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .25s; }
.lg-copy:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.seg--dark { --line: rgba(255,255,255,.3); --fg: #fff; --bg: #282828; --fg-soft: rgba(255,255,255,.7); }

/* reusable inline lock-up (built by ch-logo.js) */
.lg-lock { display: block; width: 100%; height: auto; overflow: visible; }
.lg-lock [data-p] { transition: opacity .6s var(--ease), transform .9s var(--ease), fill .5s; transform-box: fill-box; transform-origin: center; }

/* ---------- 02 Brand Mindmap (code stand-in for the Figma video) ---------- */
.lg-mind { min-height: 100svh; display: flex; align-items: center; }
.lg-mind__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(400 * var(--fx) + 60px)); align-items: center; gap: var(--s-6); }
.lg-mind__map svg { width: 100%; height: auto; max-height: 80svh; overflow: visible; }
.lg-mind__head .t-h2 { max-width: 6em; }
.mm-link { fill: none; stroke: var(--m-lilac); stroke-width: 1.6; stroke-linecap: round; transition: stroke .35s, opacity .35s, stroke-width .35s; }
.mm-node { cursor: pointer; transition: opacity .35s; }
.mm-node .mm-bg { fill: #fff; transition: fill .35s, r .45s var(--ease); }
.mm-node .mm-ring { fill: none; stroke: var(--m-lilac); stroke-width: 1.4; transition: stroke .35s; }
.mm-node use, .mm-node .mm-dot { transition: color .35s, fill .35s; }
.mm-dot { fill: var(--m-lilac); }
#mind.has-hot .mm-link { opacity: .25; }
#mind.has-hot .mm-node:not(.is-hot) { opacity: .35; }
#mind .mm-link.is-hot { opacity: 1; stroke: var(--m-purple); stroke-width: 2.4; }
#mind .mm-node.is-hot .mm-ring { stroke: var(--m-purple); }
#mind .mm-node.is-hot .mm-bg { fill: var(--m-lilac-3); }
.mm-core { pointer-events: none; }
.mm-float { animation: mmf var(--dur, 7s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes mmf { from { transform: translate(-3px, 2px); } to { transform: translate(3px, -3px); } }

/* ---------- 03 Feelings Mindmap ---------- */
.lg-feel { min-height: 100svh; display: flex; align-items: center; }
.lg-feel__grid { width: 100%; min-height: 66svh; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 11fr); grid-template-rows: auto 1fr auto; gap: var(--s-6); }
.lg-feel__title { grid-column: 1; grid-row: 1; max-width: 6em; }
.lg-feel__words { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: space-between; row-gap: var(--s-7); padding-top: .2em; }
.lg-word {
  position: relative; justify-self: start; padding: .14em .3em .2em; margin-left: -.3em; border-radius: clamp(10px, calc(16 * var(--fx)), 16px);
  font: 700 clamp(20px, calc(39 * var(--fx)), 39px)/1.2 var(--font-display); letter-spacing: -.02em; color: #fff;
  transition: background .35s var(--ease), color .35s, transform .45s var(--ease);
}
.lg-word::after { content: ""; position: absolute; left: .2em; right: .2em; bottom: calc(-1 * clamp(8px, calc(14 * var(--fx)), 14px)); height: 4px; border-radius: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.lg-word:hover { background: rgba(255,255,255,.14); }
.lg-word[aria-pressed="true"] { background: var(--m-lilac); color: #000; }
.lg-word[aria-pressed="true"]::after { transform: scaleX(1); }
.lg-word.is-focus { transform: translateY(-3px); }
.lg-feel__copy { grid-column: 1; grid-row: 3; align-self: end; max-width: 25ch; font-size: clamp(16px, calc(24 * var(--fx)), 24px); line-height: 1.45; }
.lg-feel__link {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3);
  padding: .7em 1.1em .7em .7em; border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  transition: background .3s, box-shadow .3s;
}
.lg-feel__link:hover { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.lg-feel__mini { width: clamp(52px, calc(72 * var(--fx)), 72px); aspect-ratio: 1; border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 8px; }
.lg-feel__to { display: grid; gap: .25em; }
.lg-feel__to small { opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.lg-feel__to b { font: 700 var(--t-h4)/1 var(--font-display); }
.lg-feel__arrow { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.lg-feel__link:hover .lg-feel__arrow { transform: translateX(5px); }

/* ---------- 04 Logo Moodboard (light grey slide) ---------- */
.lg-mood { min-height: 100svh; display: flex; align-items: center; }
.lg-mood__grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; }
.lg-mood__head .t-h2 { max-width: 6em; }
.lg-mood__board { --gap: clamp(3px, calc(6 * var(--fx)), 6px); position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: var(--gap); aspect-ratio: 3 / 2; }
.lg-cl { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--gap); transition: opacity .5s var(--ease), filter .5s var(--ease), transform .7s var(--ease); }
.lg-cl img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease), box-shadow .5s; }
.lg-cl img:hover { transform: scale(1.04); box-shadow: 0 18px 30px -16px rgba(14,19,60,.5); position: relative; z-index: 1; }
.lg-cl--compass { grid-column: 1 / 3; grid-row: 1 / 3; }
.lg-cl--negative { grid-column: 3 / 5; grid-row: 3 / 5; }
.lg-cl--intel { grid-column: 5 / 7; grid-row: 1 / 3; }
.lg-cl__lbl { display: flex; flex-direction: column; align-items: center; gap: .9em; place-self: center; padding: .5em .8em; border-radius: 10px; font: 700 clamp(13px, calc(20 * var(--fx)), 20px)/1 var(--font-display); color: var(--m-navy); transition: background .3s, color .3s, box-shadow .3s; }
.lg-cl__lbl i { width: 1em; height: .85em; background: var(--m-purple); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: transform .5s var(--ease); }
.lg-cl__lbl--negative i { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lg-cl__lbl--compass { grid-column: 1 / 3; grid-row: 3 / 5; }
.lg-cl__lbl--negative { grid-column: 3 / 5; grid-row: 1 / 3; }
.lg-cl__lbl--intel { grid-column: 5 / 7; grid-row: 3 / 5; }
.lg-cl__lbl:hover { box-shadow: inset 0 0 0 1.5px var(--line); }
.lg-cl__lbl:hover i { transform: translateY(-4px); }
.lg-cl__lbl--negative:hover i { transform: translateY(4px); }
.lg-cl__lbl[aria-pressed="true"] { background: var(--m-navy); color: #fff; }
.lg-mood__board.has-pick .lg-cl:not(.is-on) { opacity: .3; filter: grayscale(1); }
.lg-mood__board.has-pick .lg-cl.is-on { transform: scale(1.02); }

/* ---------- 05 Sketching Phase ---------- */
.lg-sketch__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: var(--s-6); margin-bottom: var(--s-7); }
.lg-sketch__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); }
.lg-shapes-col { display: grid; gap: clamp(14px, calc(28 * var(--fx)), 28px); font-size: clamp(28px, calc(40 * var(--fx)), 40px); justify-items: start; }
.lg-shapes-col .shape { transition: transform .7s var(--ease); }
.lg-sketch__aside:hover .shape:nth-child(odd) { transform: rotate(90deg); }
.lg-sketch__aside:hover .shape:nth-child(even) { transform: rotate(-90deg); }
.lg-sketch__text { display: grid; gap: var(--s-4); align-content: start; }
.lg-sketch__text h2 { margin-bottom: var(--s-4); }
.lg-sketch__text p { max-width: 46ch; }
.lg-sk { position: relative; aspect-ratio: 2000 / 948; overflow: hidden; border-radius: 6px; background: #ECEBE7; }
.lg-sk__img { width: 100%; height: 100%; object-fit: cover; }
.lg-sk__spot { position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); width: var(--sw, 10%); height: var(--sh, 10%); translate: -50% -50%; border-radius: 16px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 200vmax rgba(14,19,60,.5), inset 0 0 0 2px var(--m-purple);
  transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .5s var(--ease); }
.lg-sk.is-spot .lg-sk__spot { opacity: 1; }
.lg-sk__final { position: absolute; left: 70.9%; top: 25.6%; width: 22%; aspect-ratio: 1; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease), transform .8s var(--ease); transform: scale(.96); }
.lg-sk__final::before { content: ""; position: absolute; inset: -6%; border-radius: 12px; background: radial-gradient(closest-side, #ECEBE7 70%, rgba(236,235,231,0)); }
.lg-sk__final svg { position: relative; width: 100%; height: 100%; }
.lg-sk.show-vec .lg-sk__final { opacity: 1; transform: none; }
.lg-sk__hits { position: absolute; inset: 0; }
.lg-sk__hit { position: absolute; translate: -50% -50%; border-radius: 14px; cursor: pointer; }
.lg-sk__hit:focus-visible { outline: 2px solid var(--m-purple); outline-offset: 2px; }
.lg-sk__hit:hover { box-shadow: inset 0 0 0 1.5px rgba(101,47,234,.6); }
.lg-sk__ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* ---------- 06 Logo Structure ---------- */
.lg-struct__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.lg-struct__fig { width: min(100%, max(320px, calc(600 * var(--fx)))); }
.lg-struct__svg { position: relative; aspect-ratio: 522 / 521; }
.lg-struct__svg > svg, .lg-struct__svg > img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-struct__svg [data-layer] { transition: opacity .5s var(--ease), fill .4s, stroke .4s; }
.lg-struct__svg.off-grid [data-layer="grid"], .lg-struct__svg.off-bands [data-layer="bands"],
.lg-struct__svg.off-measures [data-layer="measures"], .lg-struct__svg.off-mark [data-layer="mark"] { opacity: 0 !important; }
.lg-struct__svg.hot-grid [data-layer="grid"] { stroke: var(--m-purple); }
.lg-struct__svg.hot-bands [data-layer="bands"] { fill: var(--m-purple); }
.lg-struct__svg.hot-measures [data-layer="measures"] path, .lg-struct__svg.hot-measures path[data-layer="measures"] { fill: var(--m-purple); }
.lg-struct__svg.hot-mark [data-layer="mark"] path, .lg-struct__svg.hot-mark path[data-layer="mark"] { fill: var(--m-purple); }
.lg-struct__px { font: 400 15px/1 var(--font-display); fill: #000; transition: fill .4s; }
.lg-struct__svg.hot-measures .lg-struct__px { fill: var(--m-purple); }
.lg-struct__logo { opacity: 0; transition: opacity .8s var(--ease); }
.lg-struct__svg.on-logo .lg-struct__logo { opacity: 1; }
.lg-struct__text { display: grid; gap: var(--s-3); align-content: center; }
.lg-struct__text .t-lead { max-width: 34ch; margin-top: var(--s-3); }
.lg-scrub { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; width: min(100%, 520px); }

/* ---------- 07 Logo ---------- */
.lg-logo__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.lg-logo__text { display: grid; gap: var(--s-4); }
.lg-logo__text .t-lead { max-width: 40ch; margin-top: var(--s-5); }
.lg-logo__fig { justify-self: end; width: min(100%, max(300px, calc(760 * var(--fx)))); cursor: pointer; }
.lg-logo__fig .lg-lock [data-p] { transition: transform 1s var(--ease), opacity .6s var(--ease); }
.lg-logo__fig.is-exploded [data-p="mark"] { transform: translate(-30px, -30px); }
.lg-logo__fig.is-exploded [data-p="star"] { transform: scale(1.3); }
.lg-logo__fig.is-exploded:hover [data-p="star"] { transform: scale(1.3) rotate(90deg); }
.lg-logo__fig.is-exploded [data-p="tm"] { transform: translate(40px, -34px); }
.lg-logo__fig.is-exploded [data-p="ar"] { transform: translate(0, 30px); }
.lg-logo__fig.is-exploded [data-p="en"] { transform: translate(0, 62px); }
.lg-logo__fig:hover .lg-lock [data-p="star"] { transform: rotate(90deg); }
.lg-logo__fig .lg-x-lbl { opacity: 0; transition: opacity .5s var(--ease) .15s; }
.lg-logo__fig.is-exploded .lg-x-lbl { opacity: 1; }
.lg-x-lbl text { font: 600 19px var(--font-display); fill: var(--m-navy); }
.lg-x-lbl text.t-ar { font-family: var(--font-ar); font-weight: 700; font-size: 23px; direction: ltr; unicode-bidi: normal; }
.lg-x-lbl line { stroke: var(--m-purple); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lg-x-lbl circle { fill: var(--m-purple); }
.lg-dl { display: grid; gap: .7em; margin-top: var(--s-3); }
.lg-dl__list { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-dl__a { display: inline-flex; align-items: center; gap: .7em; padding: 6px 14px 6px 6px; border-radius: 14px; font: 500 var(--t-small)/1 var(--font-display); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .25s, transform .35s var(--ease); }
.lg-dl__a:hover { box-shadow: inset 0 0 0 1.5px var(--fg); transform: translateY(-2px); }
.lg-dl__sw { width: 38px; height: 38px; border-radius: 9px; background: var(--c); display: grid; place-items: center; padding: 6px; box-shadow: inset 0 0 0 1px rgba(14,19,60,.08); }
.lg-dl__sw img { max-width: 100%; max-height: 100%; }
.lg-dl__a::after { content: ""; width: 12px; height: 12px; margin-left: .2em; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 3v13m-6-6 6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 3v13m-6-6 6 6 6-6M4 21h16'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- 08 Logo Textures ---------- */
.lg-tex__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.lg-tex__copy { display: grid; gap: var(--s-4); margin-top: var(--s-5); max-width: 34ch; }
.lg-tex__grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, calc(24 * var(--fx)), 24px); width: min(100%, max(320px, calc(640 * var(--fx)))); justify-self: end; }
.lg-tx { position: relative; aspect-ratio: 1; border-radius: var(--r-card); background: #fff; transition: transform .6s var(--ease), box-shadow .5s var(--ease); }
.lg-tx:hover { box-shadow: 0 30px 60px -36px rgba(14,19,60,.45); }
.lg-tx img { position: absolute; left: 6%; top: 10%; width: 78%; height: 84%; object-fit: contain; transition: transform .6s var(--ease); }
.lg-tx__tm { position: absolute; right: 6%; top: 7%; width: 12%; height: auto; fill: #000; }

/* ---------- 09 Typeface Structure ---------- */
.lg-tf__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.lg-tf__text .t-lead { max-width: 36ch; margin-top: var(--s-6); }
.lg-tf__fig { position: relative; justify-self: end; width: min(100%, max(260px, calc(470 * var(--fx)))); aspect-ratio: 552 / 833; }
.lg-tf__img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s var(--ease), filter .6s; }
.lg-tf__ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-tf__ov [data-tfp] { opacity: 0; transition: opacity .5s var(--ease); }
.lg-tf__band { fill: var(--m-purple); opacity: 0; transition: opacity .5s var(--ease); }
.lg-tf__fig[data-hl] .lg-tf__img { filter: saturate(0) brightness(1.04); }
.lg-tf__fig[data-hl="mark"] [data-tfp="mark"], .lg-tf__fig[data-hl="ar"] [data-tfp="ar"], .lg-tf__fig[data-hl="en"] [data-tfp="en"] { opacity: 1; }
.lg-tf__fig[data-hl="mark"] .lg-tf__band[data-b="mark"], .lg-tf__fig[data-hl="ar"] .lg-tf__band[data-b="ar"], .lg-tf__fig[data-hl="en"] .lg-tf__band[data-b="en"] { opacity: .12; }
.lg-tf__fig.is-logo .lg-tf__img { opacity: 0; }
.lg-tf__fig.is-logo [data-tfp] { opacity: 1; }
.lg-tf__fig.is-logo[data-hl] [data-tfp] { opacity: .18; }
.lg-tf__fig.is-logo[data-hl="mark"] [data-tfp="mark"], .lg-tf__fig.is-logo[data-hl="ar"] [data-tfp="ar"], .lg-tf__fig.is-logo[data-hl="en"] [data-tfp="en"] { opacity: 1; }
.lg-tf__hit { fill: transparent; cursor: pointer; }

/* ---------- 10 Arabic wordmark construction (charcoal) ---------- */
.lg-ar { --bg: #282828; padding: 0; height: 230svh; overflow: visible; }
.lg-ar__pin { position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lg-ar__track { position: relative; overflow: hidden; }
.lg-ar__svg { position: absolute; left: 0; top: 53%; height: 88%; width: auto; max-width: none; overflow: visible; transform: translate3d(var(--panx, 0px), -50%, 0); will-change: transform; }
.lg-ar__ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-bottom: var(--s-5); }
.lg-ar__hint { color: rgba(255,255,255,.6); }
.ar-fill { transition: opacity .6s var(--ease); }
.ar-outline { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .6s var(--ease); }
.ar-anchor { fill: #fff; transition: opacity .5s var(--ease), transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
.ar-h line { stroke: rgba(255,255,255,.85); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ar-h circle { fill: #282828; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ar-h { opacity: 0; transition: opacity .35s var(--ease); }
.ar-h.is-near, .lg-ar.show-handles .ar-h { opacity: 1; }
.lg-ar.off-fill .ar-fill, .lg-ar.off-outline .ar-outline, .lg-ar.off-anchors .ar-anchor { opacity: 0; }
.lg-ar .ar-outline { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); }

/* ---------- 11 Latin wordmark grid ---------- */
.lg-lat { padding-block: var(--s-6) var(--s-7); }
.lg-lat__svg { display: block; width: 100%; height: auto; }
.lat-col { fill: rgba(0,0,0,.05); transition: fill .4s, x .25s, width .25s; }
.lat-col-edge { stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .55; transition: stroke .4s; }
.lat-lbl { font: 400 3.4px var(--font-display); fill: #000; transition: fill .4s; }
.lat-band { fill: rgba(0,0,0,.2); }
.lat-line { stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lat-letter { fill: #7A7A7A; transition: transform .25s var(--ease); }
.lg-lat.is-off .lat-col { fill: rgba(229,72,77,.22); }
.lg-lat.is-off .lat-col-edge { stroke: var(--lg-bad); opacity: 1; }
.lg-lat.is-off .lat-lbl { fill: var(--lg-bad); text-decoration: line-through; }
.lg-lat__ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.lg-lat__ctrl .lg-range { flex: 0 1 420px; }
.lg-lat__warn { display: inline-flex; align-items: center; gap: .55em; padding: .55em .9em; border-radius: 999px; font: 700 var(--t-small)/1.2 var(--font-display); color: var(--lg-bad); background: rgba(229,72,77,.08); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.lg-lat.is-off .lg-lat__warn { opacity: 1; transform: none; }

/* ---------- 12 Logo Meaning (light grey) ---------- */
.lg-mean__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
.lg-mean__stick { position: sticky; top: calc(var(--bar-h) + var(--s-3)); display: grid; gap: var(--s-4); }
.lg-mean__logo { width: min(100%, max(240px, calc(400 * var(--fx)))); }
.lg-mean__list { display: grid; gap: var(--s-3); padding-block: 4vh 10vh; }
.lg-mc {
  display: grid; grid-template-columns: clamp(56px, calc(122 * var(--fx)), 122px) minmax(0, 1fr); gap: var(--s-4); align-items: start; text-align: left;
  min-height: 30svh; align-content: center; padding: var(--s-5) var(--s-4); border-radius: var(--r-card); opacity: .4;
  transition: opacity .5s var(--ease), background .5s var(--ease), box-shadow .3s;
}
.lg-mc:hover { opacity: .85; box-shadow: inset 0 0 0 1.5px var(--line); }
.lg-mc.is-on { opacity: 1; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(101,47,234,.45), 0 30px 60px -40px rgba(14,19,60,.35); }
.lg-mc__ic { width: 100%; height: auto; max-height: clamp(48px, calc(95 * var(--fx)), 95px); object-fit: contain; object-position: left center; transition: transform .7s var(--ease); }
.lg-mc.is-on .lg-mc__ic { transform: scale(1.06); }
.lg-mc__body { display: grid; gap: .55em; }
.lg-mc__title { font: 700 var(--t-h4)/1.1 var(--font-display); color: #000; letter-spacing: -.01em; }
.lg-mc__title--letter { font-weight: 400; font-size: var(--t-h3); }
.lg-mc__title--letter .t-ar { font-weight: 700; }
.lg-mc--letter { min-height: 22svh; }
.lg-mc__meta { font: 700 var(--t-small)/1.3 var(--font-display); color: #000; }
.lg-mc__p { font-size: var(--t-small); line-height: 1.55; color: rgba(0,0,0,.82); max-width: 52ch; }
.lg-mc__p b { font-weight: 700; color: #000; }

/* meaning overlays inside the lock-up (shared by Feelings mini, Logo Meaning) */
.lg-lock .ov { opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.lg-lock .ov-neg { fill: url(#lg-hatch); }
.lg-lock .ov-neg-edge, .lg-lock .ov-arrow { fill: none; stroke: var(--m-purple); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lg-lock .ov-pixel { fill: rgba(101,47,234,.14); stroke: var(--m-purple); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lg-lock .ov-meter { fill: none; stroke: var(--m-purple); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
.lg-lock .ov-ring circle { fill: none; stroke: var(--m-purple); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.lg-lock .ov-ring path { fill: var(--m-purple); }
.lg-lock .ov-meem { fill: var(--m-purple); }
.lg-lock .hit { fill: transparent; cursor: pointer; pointer-events: all; }
.lg-lock[data-on] [data-p] { opacity: .2; }
.lg-lock[data-on="letter"] [data-p="mark"], .lg-lock[data-on="letter"] [data-p="star"], .lg-lock[data-on="letter"] [data-p^="ar"] { opacity: 1; }
.lg-lock[data-on="letter"] .ov-letter { opacity: 1; }
.lg-lock[data-on="negative"] [data-p="mark"] { opacity: .5; }
.lg-lock[data-on="negative"] .ov-negative { opacity: 1; }
.lg-lock[data-on="meter"] [data-p="mark"] { opacity: .32; }
.lg-lock[data-on="meter"] .ov-meterg { opacity: 1; }
.lg-lock[data-on="meter"] .ov-meter { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
.lg-lock[data-on="pixel"] [data-p="mark"] { opacity: .45; }
.lg-lock[data-on="pixel"] .ov-pixelg { opacity: 1; }
.lg-lock[data-on="compass"] [data-p="star"] { opacity: 1; transform: rotate(360deg) scale(1.35); transition: transform 1.4s var(--ease), opacity .5s; }
.lg-lock[data-on="compass"] [data-p="mark"] { opacity: .35; }
.lg-lock[data-on="compass"] .ov-compass { opacity: 1; }
.lg-lock .ov-pixelg .ov-pixel { animation: none; }
.lg-lock[data-on="pixel"] .ov-pixel { animation: lgpx 2.4s ease-in-out infinite; }
@keyframes lgpx { 50% { fill: rgba(101,47,234,.3); } }

/* ---------- 13–16 Logo on backgrounds ---------- */
.lg-bg__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--s-6); align-items: start; }
.lg-bg__left { position: sticky; top: calc(var(--bar-h) + var(--s-3)); display: grid; gap: var(--s-3); }
.lg-bg__stage { --tbg: #652FEA; --lc: #fff; --lblc: #fff; position: relative; aspect-ratio: 676 / 600; max-height: calc(100svh - var(--bar-h) - 140px); width: 100%; overflow: hidden; border-radius: 6px; background: var(--tbg); box-shadow: 0 40px 80px -50px rgba(14,19,60,.6); transition: background-color .7s var(--ease); isolation: isolate; }
.lg-bg__img { position: absolute; inset: 0; background: url("../img/logo/backgrounds-gradient.webp") center / cover; opacity: 0; transition: opacity .7s var(--ease); }
.lg-bg__stage.is-img .lg-bg__img { opacity: 1; animation: lgdrift 16s ease-in-out infinite alternate; }
@keyframes lgdrift { from { transform: scale(1.06) translate(-1.5%, 1%); } to { transform: scale(1.1) translate(1.5%, -1%); } }
.lg-bg__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(34% 40% at var(--lx, 70%) var(--ly, 30%), rgba(255,255,255,.22), transparent 70%); opacity: 0; transition: opacity .5s; mix-blend-mode: soft-light; pointer-events: none; }
.lg-bg__stage.is-img:hover::after { opacity: 1; }
.lg-bg__logo { position: absolute; left: 50%; top: 50%; width: 31%; translate: -50% -50%; color: var(--lc); transition: color .7s var(--ease); }
.lg-bg__logo .lg-lock { position: absolute; inset: 0; transition: opacity .7s var(--ease); }
.lg-bg__logo .lg-lock.is-grad { opacity: 0; }
.lg-bg__stage.is-grad .lg-bg__logo .lg-lock.is-grad { opacity: 1; }
.lg-bg__stage.is-grad .lg-bg__logo .lg-lock.is-mono { opacity: 0; }
.lg-bg__logo::before { content: ""; display: block; padding-top: calc(244.908 / 289.235 * 100%); }
.lg-bg__lbl { position: absolute; right: 5.5%; bottom: 6%; text-align: right; font: 700 clamp(13px, calc(22 * var(--fx)), 22px)/1.35 var(--font-display); color: var(--lblc); transition: color .7s var(--ease); white-space: pre-line; }
.lg-bg__grp { position: absolute; left: 5.5%; top: 6%; font: 600 var(--t-micro)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--lblc); opacity: .7; transition: color .7s var(--ease); }
.lg-bg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5em .9em; }
.lg-bg__lc { display: inline-flex; align-items: center; gap: .5em; font: 600 var(--t-small)/1 ui-monospace, Menlo, monospace; }
.lg-bg__lc i { width: 16px; height: 16px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(14,19,60,.18); }
.lg-bg__pick { display: grid; gap: var(--s-5); }
.lg-bg__group h3 { font: 700 var(--t-h4)/1.15 var(--font-display); letter-spacing: -.01em; margin-bottom: var(--s-3); }
.lg-sws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, calc(14 * var(--fx)), 14px); }
.lg-sws--one { grid-template-columns: minmax(0, 1fr); }
.lg-sws--one .lg-sw { aspect-ratio: 1398 / 635; }
.lg-sws--accent { gap: var(--s-4); }
.lg-sws__block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, calc(10 * var(--fx)), 10px); }
.lg-sw { position: relative; aspect-ratio: 264 / 240; border-radius: 4px; background: var(--c) center / cover; box-shadow: inset 0 0 0 1px rgba(14,19,60,.1); transition: transform .45s var(--ease), box-shadow .3s; }
.lg-sw:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(14,19,60,.1), 0 18px 30px -18px rgba(14,19,60,.5); }
.lg-sw[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-purple); transform: translateY(-2px); }
.lg-sw .lg-lock { position: absolute; left: 50%; top: 47%; width: 34%; translate: -50% -50%; color: var(--lc); }
.lg-sw small { position: absolute; right: 7%; bottom: 6%; text-align: right; font: 700 clamp(8px, calc(12 * var(--fx)), 12px)/1.25 var(--font-display); color: var(--lblc); white-space: pre-line; }
.lg-sws--one .lg-sw .lg-lock { width: 15%; }
.lg-sw__hex { position: absolute; left: 7%; top: 7%; font: 500 clamp(8px, calc(11 * var(--fx)), 11px)/1 ui-monospace, Menlo, monospace; color: var(--lblc); opacity: .7; letter-spacing: .02em; }

/* ---------- 17 App Icon showcase ---------- */
.lg-appx { padding: 0; overflow: clip; }
.lg-appx__dock { position: relative; }
.lg-appx__dockimg { width: 100%; height: auto; }
.lg-appx__title { position: absolute; left: 0; top: 13%; color: #fff; pointer-events: none; }
.lg-appx__icon { position: absolute; left: 36.5%; top: 18.4%; width: 26.5%; aspect-ratio: 391 / 390; border-radius: 20%; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), filter .4s; }
.lg-appx__icon svg { width: 100%; height: 100%; display: block; }
.lg-appx__icon:hover { transform: scale(1.06) translateY(-2%); filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); }
.lg-appx__icon.is-bounce { animation: lgbounce 1.1s cubic-bezier(.28, .84, .42, 1); }
@keyframes lgbounce { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-16%); } 40% { transform: translateY(0); } 58% { transform: translateY(-7%); } 74% { transform: translateY(0); } }
.lg-appx__row { position: relative; display: grid; grid-template-columns: 34.75% minmax(0, 1fr); background: #fff; }
.lg-appx__glass { position: relative; z-index: 2; aspect-ratio: 816 / 951; background: var(--m-purple); overflow: hidden; isolation: isolate; }
.lg-appx__cursor { position: absolute; left: .2%; top: 8%; width: 98.4%; height: auto; mix-blend-mode: lighten; will-change: transform; transition: transform .2s linear; }
.lg-appx__tile { position: absolute; left: 24.5%; top: 30%; width: 43.75%; aspect-ratio: 1; border-radius: 17%; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 60%, rgba(255,255,255,.12)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95); will-change: transform; transition: transform .2s linear; }
.lg-appx__mark { width: 41%; color: #fff; }
.lg-appx__badge { position: absolute; right: -6.4%; top: -7.6%; width: 20.7%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #D70004; color: #fff; font: 700 clamp(12px, calc(30 * var(--fx)), 30px)/1 var(--font-display); }
.lg-appx__phone { position: relative; z-index: 1; }
.lg-appx__phone img { position: absolute; right: 0; bottom: 0; width: 107.3%; max-width: none; height: auto; }

/* ---------- 18 App Icon ---------- */
.lg-app__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.lg-app__text .t-lead { max-width: 34ch; margin-top: var(--s-6); }
.lg-app__shapes { display: inline-flex; gap: clamp(10px, calc(18 * var(--fx)), 18px); margin-top: var(--s-6); font-size: clamp(22px, calc(32 * var(--fx)), 32px); }
.lg-app__ui { display: grid; justify-items: center; gap: var(--s-3); }
.lg-app__surface { width: 100%; aspect-ratio: 1.12; border-radius: var(--r-panel); display: grid; place-items: center; align-content: center; gap: .8em; background: var(--surf, #F4F5FA); transition: background .7s var(--ease); }
.lg-app__surface.is-dark { --surf: #1C1C22; }
.lg-app__icon { width: clamp(160px, calc(330 * var(--fx)), 330px); aspect-ratio: 391 / 390; filter: drop-shadow(0 30px 40px rgba(101,47,234,.35)); }
.lg-app__icon svg { width: 100%; height: 100%; display: block; }
.lg-app__name { font: 500 var(--t-small)/1 var(--font-plex); color: var(--m-navy); transition: color .7s; }
.lg-app__surface.is-dark .lg-app__name { color: #fff; }

/* ---------- 19 Other platforms ---------- */
.lg-plat__btns { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }
.lg-cw { display: inline-flex; align-items: center; justify-content: space-between; gap: 2em; width: clamp(230px, calc(363 * var(--fx)), 363px); height: clamp(62px, calc(108 * var(--fx)), 108px); padding: 0 1.3em 0 2.2em; border-radius: 20px; background: #fff; color: #000; box-shadow: inset 0 0 0 1px #000; font: 400 clamp(14px, calc(21 * var(--fx)), 21px)/1 var(--font-display); transition: transform .35s var(--ease), box-shadow .3s; }
.lg-cw:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #000, 0 20px 34px -22px rgba(14,19,60,.55); }
.lg-cw:active { transform: translateY(0) scale(.98); }
.lg-cw__ic { display: grid; place-items: center; width: clamp(34px, calc(60 * var(--fx)), 60px); aspect-ratio: 1; }
.lg-cw__ic svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-cw.is-copied .lg-cw__ic { animation: lgpop .6s var(--ease); }
@keyframes lgpop { 40% { transform: scale(1.18) rotate(-6deg); } }

/* ---------- 20 Logo on Photography ---------- */
.lg-ph__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: start; }
.lg-ph__text h2 { max-width: 7em; }
.lg-ph__note { max-width: 30ch; min-height: 3em; }
.lg-ph__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, max(320px, calc(976 * var(--fx)))); }
.lg-pf { position: relative; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.lg-pf img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.lg-pf:hover img { transform: scale(1.07); }
.lg-pf__mark { position: absolute; left: 7.6%; top: 7.6%; width: 10%; aspect-ratio: 1; color: var(--mc, #fff); pointer-events: none; transition: color .5s var(--ease), transform .6s var(--ease); }
.lg-pf__mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-pf:hover .lg-pf__mark { transform: scale(1.25); transform-origin: 0 0; }
.lg-pf__lum { position: absolute; left: 7.6%; bottom: 7%; padding: .45em .65em; border-radius: 6px; font: 600 11px/1 var(--font-display); background: rgba(14,19,60,.78); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.lg-pf:hover .lg-pf__lum, .lg-ph__photos.show-lum .lg-pf__lum { opacity: 1; transform: none; }

/* ---------- 21 Unacceptable to use ---------- */
.lg-mis__hd { align-items: center; flex-wrap: wrap; }
.lg-mis__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.lg-mi__rule { display: flex; align-items: flex-start; gap: .6em; min-height: 2.7em; font: 700 clamp(15px, calc(20 * var(--fx)), 20px)/1.3 var(--font-display); color: #696969; max-width: 15em; }
.lg-mi__rule img { flex: none; width: 1.05em; height: 1.05em; margin-top: .1em; }
.lg-mi__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); gap: 0; width: 100%; min-height: clamp(170px, calc(290 * var(--fx)), 290px); margin-top: var(--s-3); border-radius: var(--r-card); text-align: left; transition: grid-template-columns .8s var(--ease), gap .8s var(--ease), transform .4s var(--ease); }
.lg-mi__card[aria-pressed="true"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.lg-mi__card:hover { transform: translateY(-3px); }
.lg-mi__face { position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center; padding: var(--s-4) var(--s-3); border-radius: var(--r-card); transition: box-shadow .3s, opacity .5s var(--ease); }
.lg-mi__face--bad { background: rgba(229,72,77,.06); }
.lg-mi__face--bad img { mix-blend-mode: multiply; }
.lg-mi__face--good { background: rgba(31,157,85,.07); opacity: 0; padding-inline: 0; }
.lg-mi__card[aria-pressed="true"] .lg-mi__face--good { opacity: 1; padding-inline: var(--s-3); transition: opacity .6s var(--ease) .25s, padding .8s var(--ease); }
.lg-mi__card:hover .lg-mi__face { box-shadow: inset 0 0 0 1.5px var(--line); }
.lg-mi__face::after { position: absolute; top: 10px; right: 10px; padding: .38em .62em; white-space: nowrap; border-radius: 999px; font: 600 11px/1 var(--font-display); letter-spacing: .04em; color: #fff; }
.lg-mi__face--bad::after { content: "✕ Unacceptable"; background: var(--lg-bad); }
.lg-mi__face--good::after { content: "✓ Correct"; background: var(--lg-ok); }
.lg-mi__face img { width: calc(var(--w, 120) * var(--fx)); min-width: calc(var(--w, 120) * .62px); max-width: 100%; height: auto; }
.lg-mi__face .lg-lock { width: calc(var(--w, 120) * var(--fx)); min-width: calc(var(--w, 120) * .62px); max-width: 100%; }
.lg-mi:nth-child(1) { --w: 112; } .lg-mi:nth-child(2) { --w: 113; } .lg-mi:nth-child(3) { --w: 270; }
.lg-mi:nth-child(4) { --w: 168; } .lg-mi:nth-child(5) { --w: 300; } .lg-mi:nth-child(6) { --w: 172; }
.lg-mi:nth-child(3) .lg-mi__face--good .lg-lock { width: calc(112 * var(--fx)); min-width: 70px; }

/* ---------- 22 Logo Sizes ---------- */
.lg-sizes__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); padding-inline: 5%; }
.lg-sz { display: grid; justify-items: center; gap: clamp(10px, calc(26 * var(--fx)), 26px); padding: 10px; border-radius: 14px; opacity: .45; transition: opacity .45s var(--ease), box-shadow .3s; }
.lg-sz:hover { opacity: .8; box-shadow: inset 0 0 0 1.5px var(--line); }
.lg-sz[aria-checked="true"] { opacity: 1; }
.lg-sz__logo { display: grid; place-items: end center; }
.lg-sz__logo .lg-lock { width: calc(var(--w) * var(--fx)); min-width: calc(var(--w) * .38px); }
.lg-sz__br { width: clamp(44px, calc(96 * var(--fx)), 96px); height: 9px; border: 1px solid #8F8F8F; border-top: 0; }
.lg-sz__lbl { font: 300 clamp(12px, calc(16 * var(--fx)), 16px)/1 var(--font-display); white-space: nowrap; }
.lg-sz[aria-checked="true"] .lg-sz__lbl { font-weight: 600; color: var(--m-purple); }
.lg-sizes__ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5); align-items: center; margin-top: var(--s-6); }
.lg-sizes__ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.lg-sizes__stage { position: relative; height: clamp(220px, calc(300 * var(--fx)), 300px); border-radius: var(--r-card); background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.lg-sizes__one .lg-lock { height: calc(var(--h) * 1px); width: auto; transition: height .2s linear; }
.lg-sizes__stage.is-actual .lg-sizes__one .lg-lock { transition: height .4s var(--ease); }

/* ---------- 23 Logo on Signs ---------- */
.lg-sign__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.lg-sign__text .t-lead { max-width: 30ch; margin-top: var(--s-6); }
.lg-sign__fig { position: relative; overflow: hidden; aspect-ratio: 830 / 650; background: #E9EAEC; }
.lg-sign__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lg-sign__fig:hover img { transform: scale(1.03); }
.lg-sign__glint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(22% 34% at var(--gx, 60%) var(--gy, 40%), rgba(255,255,255,.7), rgba(160,190,255,.2) 45%, transparent 70%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .45s; }
.lg-sign__fig:hover .lg-sign__glint { opacity: 1; }

/* ---------- 24–25 Logo on Stationery ---------- */
.lg-stat__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); align-items: stretch; }
.lg-stat__text { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--s-5); }
.lg-stat__text h2 { max-width: 6em; }
.lg-stat__card { width: min(100%, max(240px, calc(331 * var(--fx)))); padding: clamp(14px, calc(14 * var(--fx)), 14px) clamp(14px, calc(14 * var(--fx)), 14px) clamp(24px, calc(56 * var(--fx)), 56px); background: var(--m-purple); color: #fff; }
.lg-stat__card h3 { font: 600 clamp(22px, calc(32 * var(--fx)), 32px)/1.2 var(--font-display); margin-bottom: var(--s-3); }
.lg-stat__card p { font-size: clamp(13px, calc(16 * var(--fx)), 16px); line-height: 1.45; opacity: .95; letter-spacing: .01em; }
.lg-stat__text .lg-hint { margin-top: 0; }
.lg-lh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: center; }
.lg-sheet { position: relative; aspect-ratio: 294 / 437; }
.lg-sheet > svg.lg-sheet__paper { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-pl { position: absolute; translate: -50% -50%; display: grid; place-items: center; padding: 3%; border-radius: 10px; color: var(--m-navy); transition: opacity .5s var(--ease), transform .45s var(--ease), box-shadow .3s; }
.lg-pl .lg-lock { transition: opacity .4s; }
.lg-pl .lg-lock.is-grad { position: absolute; inset: 3%; width: 94%; opacity: 0; }
.lg-pl .lg-lock.is-mono { opacity: .5; }
.lg-pl.is-primary .lg-lock.is-grad, .lg-pl:hover .lg-lock.is-grad, .lg-pl:focus-visible .lg-lock.is-grad, .lg-pl[aria-pressed="true"] .lg-lock.is-grad { opacity: 1; }
.lg-pl.is-primary .lg-lock.is-mono, .lg-pl:hover .lg-lock.is-mono, .lg-pl:focus-visible .lg-lock.is-mono, .lg-pl[aria-pressed="true"] .lg-lock.is-mono { opacity: 0; }
.lg-pl:hover { box-shadow: inset 0 0 0 1.5px var(--line); transform: scale(1.08); }
.lg-sheet.is-solo .lg-pl:not([aria-pressed="true"]) { opacity: .12; }
.lg-sheet.is-solo .lg-pl:not([aria-pressed="true"]):hover { opacity: .5; }
.lg-sheet.is-solo .lg-pl[aria-pressed="true"] { transform: scale(1.12); }
.lg-sheet.is-solo .lg-pl.is-primary:not([aria-pressed="true"]) .lg-lock.is-grad { opacity: 0; }
.lg-sheet.is-solo .lg-pl.is-primary:not([aria-pressed="true"]) .lg-lock.is-mono { opacity: .5; }
.lg-sheet[data-kind="markTm"] .lg-pl { width: 12.5%; }
.lg-sheet[data-kind="lockup"] .lg-pl { width: 13%; }

.lg-stat__grid--id { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.lg-ids { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: var(--s-5); align-items: center; }
.lg-ids__flags { display: grid; gap: var(--s-4); }
.lg-ids figcaption { font: 400 clamp(20px, calc(32 * var(--fx)), 32px)/1 var(--font-display); color: #696969; margin-bottom: var(--s-2); }
.lg-inl svg, .lg-inl img, .lg-flag svg, .lg-flag img { display: block; width: 100%; height: auto; }
.lg-inl [stroke-width="0.25"], .lg-flag .fl-guide { transition: opacity .5s var(--ease); }
.lg-ids.no-guides [stroke-width="0.25"], .lg-ids.no-guides .fl-guide { opacity: 0; }
.lg-inl .lg-drop, .lg-flag .lg-drop { transition: transform .9s var(--ease), opacity .6s var(--ease); }
.js .lg-ids:not(.is-in) .lg-drop { transform: translateY(-14px); opacity: 0; }
.lg-ids__card { width: min(100%, 300px); justify-self: center; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .lg-mis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-bg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .lg-mind__grid, .lg-mood__grid, .lg-sketch__top, .lg-struct__grid, .lg-logo__grid, .lg-tex__grid, .lg-tf__grid, .lg-mean__grid,
  .lg-bg__grid, .lg-app__grid, .lg-ph__grid, .lg-sizes__ui, .lg-sign__grid, .lg-stat__grid, .lg-stat__grid--id, .lg-ids { grid-template-columns: minmax(0, 1fr); }
  .lg-mind__head { order: -1; }
  .lg-feel__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .lg-feel__title, .lg-feel__words, .lg-feel__copy, .lg-feel__link { grid-column: 1; grid-row: auto; }
  .lg-feel__words { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .lg-sketch__aside { flex-direction: row; align-items: center; }
  .lg-shapes-col { grid-auto-flow: column; }
  .lg-logo__fig, .lg-tf__fig { justify-self: center; }
  .lg-mean__stick { position: sticky; top: 0; z-index: 2; grid-template-columns: auto 1fr; align-items: center; background: var(--bg); padding-block: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); box-shadow: 0 16px 20px -20px rgba(14,19,60,.4); }
  .lg-mean__stick h2 { grid-column: 2; grid-row: 1; font-size: 26px; }
  .lg-mean__logo { width: 64px; grid-column: 1; grid-row: 1; }
  .lg-mean__stick .lg-hint { display: none; }
  .lg-mc { min-height: 0; grid-template-columns: 56px minmax(0, 1fr); padding: var(--s-4) var(--s-3); }
  .lg-bg__left { position: sticky; top: 0; z-index: 2; background: #fff; padding-block: 10px 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .lg-bg__stage { aspect-ratio: 16 / 9; max-height: 34svh; }
  .lg-bg__logo { width: 20%; }
  .lg-app__surface { aspect-ratio: 1.3; }
  .lg-sizes__row { padding-inline: 0; }
  .lg-stat__text { gap: var(--s-4); }
  .lg-lh { gap: var(--s-4); }
  .lg-ids__card { width: min(70%, 260px); }
}
@media (max-width: 560px) {
  .lg-mis__grid { grid-template-columns: minmax(0, 1fr); }
  .lg-feel__words { grid-template-columns: minmax(0, 1fr); }
  .lg-sizes__row { gap: 2px; }
  .lg-sz { padding: 4px; }
  .lg-sz__lbl { font-size: 10px; }
  .lg-ph__photos { width: 100%; }
  .lg-cw { width: 100%; }
  .lg-ar__ctrl { justify-content: center; }
  .lg-ar__hint { display: none; }
  .lg-ar__svg { height: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-float, .lg-bg__stage.is-img .lg-bg__img, .lg-lock[data-on="pixel"] .ov-pixel { animation: none !important; }
}

/* nested logo SVGs inside other SVGs keep their x/y/width/height attributes */
.lg-nest { overflow: visible; }