/* GENERATED from tools/screens/screens.css by tools/inline.mjs. Do not edit. */
@layer components {
  /* ---------------------------------------------------------------- frames */
  :where([data-ui]) .frame { position: relative; container-type: inline-size; background: #fff; }
  :where([data-ui]) .frame--desktop {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(42, 38, 34, 0.07), 0 44px 80px -44px rgba(96, 64, 18, 0.38), 0 14px 28px -20px rgba(96, 64, 18, 0.22);
  }
  :where([data-ui]) .frame__bar {
    --u: calc(100cqw / 1280);
    display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 18);
    background: #f6f3ee; border-bottom: 1px solid rgba(42, 38, 34, 0.06);
  }
  :where([data-ui]) .frame__bar i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #e2dbd0; }
  :where([data-ui]) .frame__bar b { width: 30%; height: calc(var(--u) * 18); margin: 0 auto; translate: calc(var(--u) * -27) 0; border-radius: calc(var(--u) * 9); background: #fff; }
  :where([data-ui]) .frame--phone {
    padding: 5px; border-radius: 26px;
    box-shadow: 0 0 0 1px rgba(42, 38, 34, 0.08), 0 40px 70px -36px rgba(96, 64, 18, 0.42), 0 12px 24px -18px rgba(96, 64, 18, 0.24);
  }
  :where([data-ui]) .frame--phone > .screen { border-radius: 21px; }
  :where([data-ui]) .frame--post, :where([data-ui]) .frame--card {
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(42, 38, 34, 0.06), 0 30px 50px -30px rgba(96, 64, 18, 0.4), 0 10px 20px -16px rgba(96, 64, 18, 0.2);
  }
  :where([data-ui]) .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

  /* ---------------------------------------------------------------- screen base */
  :where([data-ui]) .screen {
    --u: calc(100cqw / 1280);
    position: relative; overflow: hidden; aspect-ratio: 1280 / 800;
    font-family: var(--font-text); font-size: calc(var(--u) * 16); line-height: 1.45; text-align: left;
    color: var(--s-ink); background: var(--s-bg);
    -webkit-font-smoothing: antialiased; user-select: none;
  }
  :where([data-ui]) .screen--phone { --u: calc(100cqw / 390); aspect-ratio: 390 / 844; }
  :where([data-ui]) .screen--post { --u: calc(100cqw / 1080); aspect-ratio: 1 / 1; }
  :where([data-ui]) .screen--card { --u: calc(100cqw / 480); aspect-ratio: 480 / 330; }
  :where([data-ui]) .screen :where(*) { margin: 0; padding: 0; }
  :where([data-ui]) .screen svg { display: block; }
  :where([data-ui]) .screen b { font-weight: 600; }

  :where([data-ui]) .s-nav { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 64); }
  :where([data-ui]) .s-links { display: flex; gap: calc(var(--u) * 34); font-size: calc(var(--u) * 14); opacity: 0.8; }
  :where([data-ui]) .s-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8);
    height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 22); border-radius: calc(var(--u) * 22); font-size: calc(var(--u) * 14); font-weight: 600; white-space: nowrap;
  }
  :where([data-ui]) .s-label { display: block; font-size: calc(var(--u) * 12); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
  :where([data-ui]) .s-link { font-size: calc(var(--u) * 14); font-weight: 600; border-bottom: calc(var(--u) * 1.5) solid currentColor; padding-bottom: calc(var(--u) * 2); }
  :where([data-ui]) .s-ico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; }

  /* phone status bar */
  :where([data-ui]) .sb { display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 46); padding: calc(var(--u) * 4) calc(var(--u) * 28) 0; font-size: calc(var(--u) * 14); font-weight: 600; }
  :where([data-ui]) .sb span { display: flex; gap: calc(var(--u) * 5); align-items: center; }
  :where([data-ui]) .sb i { display: block; width: calc(var(--u) * 4); border-radius: calc(var(--u) * 1); background: currentColor; }
  :where([data-ui]) .sb i:nth-child(1) { height: calc(var(--u) * 5); } .sb i:nth-child(2) { height: calc(var(--u) * 7); } .sb i:nth-child(3) { height: calc(var(--u) * 9); } .sb i:nth-child(4) { height: calc(var(--u) * 11); }
  :where([data-ui]) .sb em { display: block; width: calc(var(--u) * 24); height: calc(var(--u) * 11); margin-left: calc(var(--u) * 4); border-radius: calc(var(--u) * 3); border: calc(var(--u) * 1.5) solid currentColor; box-shadow: inset calc(var(--u) * -7) 0 0 calc(var(--u) * -1) var(--s-bg); background: currentColor; opacity: 0.85; }

  /* ================================================================ Casa Calma (wellness studio) */
  :where([data-ui]) .cm { --s-bg: #f3eee7; --s-ink: #3b4034; --cm-soft: #6a6d60; --cm-card: #fbf8f3; --cm-sage: #a3ad94; --cm-clay: #c9a083; }
  :where([data-ui]) .cm-logo { display: flex; align-items: center; gap: calc(var(--u) * 10); font-family: var(--font-display); font-size: calc(var(--u) * 22); font-weight: 400; letter-spacing: 0.04em; }
  :where([data-ui]) .cm-logo svg { width: calc(var(--u) * 22); height: calc(var(--u) * 26); }
  :where([data-ui]) .cm-btn { background: #3b4034; color: #f3eee7; }
  :where([data-ui]) .cm-hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: calc(var(--u) * 56); padding: calc(var(--u) * 28) calc(var(--u) * 64) 0; align-items: end; }
  :where([data-ui]) .cm-hero .s-label { color: var(--cm-soft); }
  :where([data-ui]) .cm-h1 { margin-top: calc(var(--u) * 22) !important; font-family: var(--font-display); font-weight: 300; font-size: calc(var(--u) * 92); line-height: 0.98; letter-spacing: -0.02em; }
  :where([data-ui]) .cm-lead { margin-top: calc(var(--u) * 26) !important; max-width: calc(var(--u) * 430); font-size: calc(var(--u) * 18); color: var(--cm-soft); }
  :where([data-ui]) .cm-actions { display: flex; align-items: center; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 34) !important; padding-bottom: calc(var(--u) * 54) !important; }
  :where([data-ui]) .cm-arch { position: relative; height: calc(var(--u) * 470); border-radius: calc(var(--u) * 240) calc(var(--u) * 240) 0 0; overflow: hidden; background: radial-gradient(circle at 50% calc(var(--u) * 182), rgba(253, 236, 210, 0.95) calc(var(--u) * 60), rgba(253, 236, 210, 0) calc(var(--u) * 190)), linear-gradient(180deg, #ece0cf 0%, #e2cbb2 62%, #d4b393 100%); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cm-sun { position: absolute; left: 50%; top: calc(var(--u) * 104); width: calc(var(--u) * 156); height: calc(var(--u) * 156); translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fdf3e3, #f4d7b2 70%); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cm-hill { position: absolute; left: -20%; right: -20%; bottom: calc(var(--u) * -130); height: calc(var(--u) * 270); border-radius: 50%; background: linear-gradient(180deg, #bfae95, #a89479); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cm-stone { position: absolute; left: 50%; translate: -50% 0; border-radius: 50%; box-shadow: inset 0 calc(var(--u) * -6) calc(var(--u) * 10) rgba(0, 0, 0, 0.12), inset 0 calc(var(--u) * 5) calc(var(--u) * 8) rgba(255, 255, 255, 0.25); }
  :where([data-ui]) .cm-stone.c { bottom: calc(var(--u) * 40); width: calc(var(--u) * 170); height: calc(var(--u) * 54); background: #8a8474; }
  :where([data-ui]) .cm-stone.b { bottom: calc(var(--u) * 86); width: calc(var(--u) * 122); height: calc(var(--u) * 44); background: #a39d8b; }
  :where([data-ui]) .cm-stone.a { bottom: calc(var(--u) * 124); width: calc(var(--u) * 78); height: calc(var(--u) * 34); background: #c2baa7; }
  :where([data-ui]) .cm-treat { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 20); padding: 0 calc(var(--u) * 64); background: #fbf8f3; padding-top: calc(var(--u) * 30) !important; padding-bottom: calc(var(--u) * 40) !important; }
  :where([data-ui]) .cm-treat > span { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 18) calc(var(--u) * 22); border-radius: calc(var(--u) * 14); background: #f3eee7; }
  :where([data-ui]) .cm-treat b { font-size: calc(var(--u) * 16); }
  :where([data-ui]) .cm-treat small { margin-left: auto; font-size: calc(var(--u) * 13); color: var(--cm-soft); }
  :where([data-ui]) .cm-dot { width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9dccb, var(--cm-clay)); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cm-dot.s { background: radial-gradient(circle at 35% 35%, #dfe3d6, var(--cm-sage)); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cm-dot.t { background: radial-gradient(circle at 35% 35%, #ece6da, #a39d8b); } /* taste-skill-ignore: illustration inside a concept screen */
  /* phone: booking */
  :where([data-ui]) .cm-m-top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 14) calc(var(--u) * 22) calc(var(--u) * 10); font-size: calc(var(--u) * 16); }
  :where([data-ui]) .cm-m-top small { font-size: calc(var(--u) * 13); color: var(--cm-soft); }
  :where([data-ui]) .cm-m-pad { padding: calc(var(--u) * 8) calc(var(--u) * 22) 0; }
  :where([data-ui]) .cm-m-card { display: flex; gap: calc(var(--u) * 14); align-items: center; padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--cm-card); }
  :where([data-ui]) .cm-m-card span:last-child { display: grid; font-size: calc(var(--u) * 15); }
  :where([data-ui]) .cm-m-card small { font-size: calc(var(--u) * 13); color: var(--cm-soft); }
  :where([data-ui]) .cm-m-h { margin-top: calc(var(--u) * 26) !important; font-family: var(--font-display); font-size: calc(var(--u) * 20); font-weight: 400; }
  :where([data-ui]) .cm-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 12) !important; }
  :where([data-ui]) .cm-days span { display: grid; place-items: center; padding: calc(var(--u) * 10) 0; border-radius: calc(var(--u) * 14); background: var(--cm-card); font-size: calc(var(--u) * 18); font-weight: 600; line-height: 1.2; }
  :where([data-ui]) .cm-days small { font-size: calc(var(--u) * 11); font-weight: 500; color: var(--cm-soft); }
  :where([data-ui]) .cm-days .on { background: #3b4034; color: #f3eee7; }
  :where([data-ui]) .cm-days .on small { color: #d5d8cc; }
  :where([data-ui]) .cm-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 12) !important; }
  :where([data-ui]) .cm-times span { padding: calc(var(--u) * 11) 0; border-radius: calc(var(--u) * 22); text-align: center; font-size: calc(var(--u) * 14); font-weight: 600; border: calc(var(--u) * 1.5) solid #ddd4c6; }
  :where([data-ui]) .cm-times .off { color: #8f887b; text-decoration: line-through; border-style: dashed; }
  :where([data-ui]) .cm-times .on { background: #3b4034; border-color: #3b4034; color: #f3eee7; }
  :where([data-ui]) .cm-remind { display: flex; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 22) !important; padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: #e5e8dd; font-size: calc(var(--u) * 13); color: #4d5244; }
  :where([data-ui]) .cm-remind b { display: block; font-size: calc(var(--u) * 14); color: #3b4034; }
  :where([data-ui]) .cm-m-cta { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--u) * 26); }
  :where([data-ui]) .cm-m-cta .s-btn { width: 100%; height: calc(var(--u) * 52); border-radius: calc(var(--u) * 26); font-size: calc(var(--u) * 15); }

  /* ================================================================ Hoja Flowers (local florist) */
  :where([data-ui]) .hj { --s-bg: #fbf3ec; --s-ink: #2d2a26; --hj-leaf: #3e5b41; --hj-rose: #d98a7a; --hj-blush: #f1cfc0; --hj-butter: #f3dc9a; --hj-soft: #6b625a; }
  :where([data-ui]) .hj-logo { display: flex; align-items: center; gap: calc(var(--u) * 8); }
  :where([data-ui]) .hj-logo svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
  :where([data-ui]) .hj-logo b { font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: -0.03em; }
  :where([data-ui]) .hj-logo small { margin-top: calc(var(--u) * 6); font-family: var(--font-display); font-size: calc(var(--u) * 11); letter-spacing: 0.24em; text-transform: uppercase; color: var(--hj-soft); }
  :where([data-ui]) .hj-btn { background: var(--hj-leaf); color: #fbf3ec; }
  :where([data-ui]) .hj-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: calc(var(--u) * 40); padding: calc(var(--u) * 22) calc(var(--u) * 64) 0; align-items: center; }
  :where([data-ui]) .hj-hero .s-label { color: #a8503f; }
  :where([data-ui]) .hj-h1 { margin-top: calc(var(--u) * 18) !important; font-size: calc(var(--u) * 70); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
  :where([data-ui]) .hj-lead { margin-top: calc(var(--u) * 22) !important; max-width: calc(var(--u) * 440); font-size: calc(var(--u) * 18); color: var(--hj-soft); }
  :where([data-ui]) .hj-actions { display: flex; align-items: center; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 30) !important; }
  :where([data-ui]) .hj-steps { display: flex; gap: calc(var(--u) * 22); margin-top: calc(var(--u) * 34) !important; font-size: calc(var(--u) * 13); color: var(--hj-soft); }
  :where([data-ui]) .hj-steps span { display: flex; align-items: center; gap: calc(var(--u) * 8); }
  :where([data-ui]) .hj-steps i { display: grid; place-items: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--hj-blush); font-style: normal; font-size: calc(var(--u) * 12); font-weight: 700; color: var(--s-ink); }
  :where([data-ui]) .hj-circle { position: relative; display: grid; place-items: center; width: calc(var(--u) * 440); height: calc(var(--u) * 440); margin-left: auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f8ddd0, var(--hj-blush) 70%); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .hj-circle svg { width: calc(var(--u) * 300); height: calc(var(--u) * 330); }
  :where([data-ui]) .hj-tag { position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 64); padding: calc(var(--u) * 10) calc(var(--u) * 16); border-radius: calc(var(--u) * 14); background: #fff; font-size: calc(var(--u) * 13); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * -12) rgba(80, 40, 20, 0.35); }
  :where([data-ui]) .hj-tag b { display: block; font-size: calc(var(--u) * 15); }
  :where([data-ui]) .hj-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 22); padding: calc(var(--u) * 42) calc(var(--u) * 64) 0; }
  :where([data-ui]) .hj-cards > span { display: grid; grid-template-columns: calc(var(--u) * 92) 1fr; gap: calc(var(--u) * 16); align-items: center; padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 18); background: #fff; }
  :where([data-ui]) .hj-cards i { display: grid; place-items: center; height: calc(var(--u) * 92); border-radius: calc(var(--u) * 12); background: var(--c, var(--hj-blush)); }
  :where([data-ui]) .hj-cards svg { width: calc(var(--u) * 64); height: calc(var(--u) * 70); }
  :where([data-ui]) .hj-cards b { font-size: calc(var(--u) * 16); }
  :where([data-ui]) .hj-cards small { display: block; font-size: calc(var(--u) * 13); color: var(--hj-soft); }
  /* bouquet artwork (shared) */
  :where([data-ui]) .bq .lf { fill: #5e7d55; } .bq .lf2 { fill: #3e5b41; }
  :where([data-ui]) .bq .p1 { fill: var(--p1, #e9a596); } .bq .p2 { fill: var(--p2, #f3dc9a); } .bq .p3 { fill: var(--p3, #c96f60); }
  :where([data-ui]) .bq .ring { fill: none; stroke: var(--p3, #c96f60); stroke-width: 2; opacity: 0.45; }
  :where([data-ui]) .bq .wrap { fill: #e8d2b4; } .bq .wrap2 { fill: #dcc29f; } .bq .tie { stroke: #b78f5e; stroke-width: 4; stroke-linecap: round; }
  /* posts (1080 square) */
  :where([data-ui]) .hj-post { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: calc(var(--u) * 80); }
  :where([data-ui]) .hj-post .hj-logo b { font-size: calc(var(--u) * 46); } .hj-post .hj-logo svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
  :where([data-ui]) .hj-post--a { background: var(--hj-blush); }
  :where([data-ui]) .hj-post--a svg.bq { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 30); width: calc(var(--u) * 520); height: calc(var(--u) * 570); }
  :where([data-ui]) .hj-post--b { background: var(--hj-leaf); color: #fbf3ec; }
  :where([data-ui]) .hj-post--c { background: var(--hj-butter); }
  :where([data-ui]) .hj-post--c svg.bq { position: absolute; right: calc(var(--u) * 60); top: calc(var(--u) * 170); width: calc(var(--u) * 440); height: calc(var(--u) * 480); }
  :where([data-ui]) .hj-big { font-size: calc(var(--u) * 128); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; }
  :where([data-ui]) .hj-post--b .hj-big { color: var(--hj-butter); font-size: calc(var(--u) * 104); }
  :where([data-ui]) .hj-post small { font-size: calc(var(--u) * 40); font-weight: 500; }
  :where([data-ui]) .hj-pill { align-self: flex-start; padding: calc(var(--u) * 26) calc(var(--u) * 44); border-radius: calc(var(--u) * 60); background: #fbf3ec; color: var(--hj-leaf); font-size: calc(var(--u) * 38); font-weight: 700; }

  /* ================================================================ Alba Home (home décor store) */
  :where([data-ui]) .al { /* a dark, gallery-like store: the near-black UI sets Alba apart from the other concepts */
    --s-bg: #1c1a18; --s-ink: #efe7dc; --al-soft: #a99f93; --al-stone: #2a2724; --al-terra: #c98262; --al-line: #36322e;
    --al-solid: #efe7dc; --al-on-solid: #1c1a18; --al-panel: #262320; }
  :where([data-ui]) .al-bar { height: calc(var(--u) * 32); display: grid; place-items: center; background: var(--al-terra); color: #1c1a18; font-size: calc(var(--u) * 12); letter-spacing: 0.04em; }
  :where([data-ui]) .al-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(var(--u) * 76); padding: 0 calc(var(--u) * 56); border-bottom: 1px solid var(--al-line); }
  :where([data-ui]) .al-nav .s-links:last-child { justify-content: flex-end; }
  :where([data-ui]) .al-logo { font-family: var(--font-display); font-size: calc(var(--u) * 24); font-weight: 500; letter-spacing: 0.34em; }
  :where([data-ui]) .al-logo small { margin-left: calc(var(--u) * 4); font-size: calc(var(--u) * 13); font-weight: 300; letter-spacing: 0.3em; }
  :where([data-ui]) .al-crumb { padding: calc(var(--u) * 20) calc(var(--u) * 56); font-size: calc(var(--u) * 12); color: var(--al-soft); }
  :where([data-ui]) .al-main { display: grid; grid-template-columns: calc(var(--u) * 88) calc(var(--u) * 560) 1fr; gap: calc(var(--u) * 20); padding: 0 calc(var(--u) * 56); }
  :where([data-ui]) .al-thumbs { display: grid; gap: calc(var(--u) * 12); align-content: start; }
  :where([data-ui]) .al-thumbs span { display: grid; place-items: center; height: calc(var(--u) * 88); border-radius: calc(var(--u) * 8); background: var(--al-stone); }
  :where([data-ui]) .al-thumbs span.on { box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--al-solid); }
  :where([data-ui]) .al-thumbs svg { width: calc(var(--u) * 44); height: calc(var(--u) * 60); }
  :where([data-ui]) .al-img { position: relative; display: grid; place-items: center; height: calc(var(--u) * 600); border-radius: calc(var(--u) * 10); background: radial-gradient(ellipse at 50% 30%, #302c28, #1f1d1a 75%); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .al-img svg { width: calc(var(--u) * 300); height: calc(var(--u) * 430); margin-top: calc(var(--u) * 30); }
  :where([data-ui]) .al-img small { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 16); padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: rgba(239, 231, 220, 0.12); font-size: calc(var(--u) * 12); }
  :where([data-ui]) .al-info { padding: calc(var(--u) * 6) 0 0 calc(var(--u) * 34); }
  :where([data-ui]) .al-info .s-label { color: var(--al-soft); font-weight: 500; }
  :where([data-ui]) .al-h1 { margin-top: calc(var(--u) * 12) !important; font-family: var(--font-display); font-size: calc(var(--u) * 46); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
  :where([data-ui]) .al-price { margin-top: calc(var(--u) * 8) !important; font-size: calc(var(--u) * 22); }
  :where([data-ui]) .al-desc { margin-top: calc(var(--u) * 18) !important; font-size: calc(var(--u) * 15); color: var(--al-soft); max-width: calc(var(--u) * 420); }
  :where([data-ui]) .al-opt { margin-top: calc(var(--u) * 24) !important; font-size: calc(var(--u) * 13); color: var(--al-soft); }
  :where([data-ui]) .al-opt b { color: var(--s-ink); font-weight: 500; }
  :where([data-ui]) .al-sw { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10) !important; }
  :where([data-ui]) .al-sw i { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
  :where([data-ui]) .al-sw i.on { outline: calc(var(--u) * 1.5) solid var(--al-solid); outline-offset: calc(var(--u) * 3); }
  :where([data-ui]) .al-seg { display: inline-flex; margin-top: calc(var(--u) * 10) !important; border: 1px solid var(--al-line); border-radius: calc(var(--u) * 22); padding: calc(var(--u) * 3) !important; }
  :where([data-ui]) .al-seg span { padding: calc(var(--u) * 8) calc(var(--u) * 22); border-radius: calc(var(--u) * 18); font-size: calc(var(--u) * 13); }
  :where([data-ui]) .al-seg .on { background: var(--al-solid); color: var(--al-on-solid); }
  :where([data-ui]) .al-buy { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 26) !important; }
  :where([data-ui]) .al-qty { display: flex; align-items: center; gap: calc(var(--u) * 18); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 18); border: 1px solid var(--al-line); border-radius: calc(var(--u) * 25); font-size: calc(var(--u) * 15); }
  :where([data-ui]) .al-btn { flex: 1; height: calc(var(--u) * 50); border-radius: calc(var(--u) * 25); background: var(--al-solid); color: var(--al-on-solid); font-size: calc(var(--u) * 15); }
  :where([data-ui]) .al-notes { display: grid; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 20) !important; font-size: calc(var(--u) * 13); color: var(--al-soft); }
  :where([data-ui]) .al-notes span { display: flex; align-items: center; gap: calc(var(--u) * 8); }
  :where([data-ui]) .al-notes i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--al-terra); }
  :where([data-ui]) .al-acc { margin-top: calc(var(--u) * 22) !important; border-top: 1px solid var(--al-line); }
  :where([data-ui]) .al-acc span { display: flex; justify-content: space-between; padding: calc(var(--u) * 14) 0; border-bottom: 1px solid var(--al-line); font-size: calc(var(--u) * 14); }
  /* phone: cart */
  :where([data-ui]) .al-m-head { display: flex; align-items: baseline; justify-content: space-between; padding: calc(var(--u) * 14) calc(var(--u) * 22) 0; }
  :where([data-ui]) .al-m-head b { font-family: var(--font-display); font-size: calc(var(--u) * 26); font-weight: 400; }
  :where([data-ui]) .al-m-head small { font-size: calc(var(--u) * 13); color: var(--al-soft); }
  :where([data-ui]) .al-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); margin: calc(var(--u) * 18) calc(var(--u) * 22) 0 !important; font-size: calc(var(--u) * 11); color: var(--al-soft); }
  :where([data-ui]) .al-steps span { padding-top: calc(var(--u) * 8); border-top: calc(var(--u) * 2.5) solid var(--al-line); }
  :where([data-ui]) .al-steps .on { border-color: var(--al-solid); color: var(--s-ink); font-weight: 600; }
  :where([data-ui]) .al-item { display: grid; grid-template-columns: calc(var(--u) * 82) 1fr auto; gap: calc(var(--u) * 14); align-items: center; margin: calc(var(--u) * 18) calc(var(--u) * 22) 0 !important; padding-bottom: calc(var(--u) * 18) !important; border-bottom: 1px solid var(--al-line); }
  :where([data-ui]) .al-item i { display: grid; place-items: center; height: calc(var(--u) * 96); border-radius: calc(var(--u) * 10); background: var(--al-stone); }
  :where([data-ui]) .al-item i svg { width: calc(var(--u) * 42); height: calc(var(--u) * 62); }
  :where([data-ui]) .al-item i.rn { background: repeating-linear-gradient(90deg, #4a4038 0 calc(var(--u) * 5), #3a332d calc(var(--u) * 5) calc(var(--u) * 9)); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .al-item b { display: block; font-size: calc(var(--u) * 15); font-weight: 500; }
  :where([data-ui]) .al-item small { display: block; font-size: calc(var(--u) * 12); color: var(--al-soft); }
  :where([data-ui]) .al-item em { display: inline-flex; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 8); padding: calc(var(--u) * 4) calc(var(--u) * 12); border: 1px solid var(--al-line); border-radius: calc(var(--u) * 14); font-style: normal; font-size: calc(var(--u) * 12); }
  :where([data-ui]) .al-item > span:last-child { align-self: start; font-size: calc(var(--u) * 15); }
  :where([data-ui]) .al-gift { display: flex; justify-content: space-between; align-items: center; margin: calc(var(--u) * 16) calc(var(--u) * 22) 0 !important; font-size: calc(var(--u) * 13); }
  :where([data-ui]) .al-gift i { width: calc(var(--u) * 38); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 11); background: var(--al-line); box-shadow: inset calc(var(--u) * -16) 0 0 calc(var(--u) * -2) var(--al-line), inset 0 0 0 calc(var(--u) * 3) var(--al-line); background-image: radial-gradient(circle at calc(var(--u) * 11) 50%, #fff calc(var(--u) * 7), transparent calc(var(--u) * 7.5)); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .al-sum { display: grid; gap: calc(var(--u) * 8); margin: calc(var(--u) * 20) calc(var(--u) * 22) 0 !important; padding: calc(var(--u) * 16) !important; border-radius: calc(var(--u) * 12); background: var(--al-panel); font-size: calc(var(--u) * 13); }
  :where([data-ui]) .al-sum span { display: flex; justify-content: space-between; }
  :where([data-ui]) .al-sum .t { padding-top: calc(var(--u) * 8); border-top: 1px solid var(--al-line); font-size: calc(var(--u) * 16); font-weight: 600; }
  :where([data-ui]) .al-m-cta { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--u) * 22); display: grid; gap: calc(var(--u) * 10); text-align: center; font-size: calc(var(--u) * 11); color: var(--al-soft); }
  :where([data-ui]) .al-m-cta .s-btn { height: calc(var(--u) * 52); border-radius: calc(var(--u) * 26); background: var(--al-solid); color: var(--al-on-solid); font-size: calc(var(--u) * 15); }

  /* ================================================================ Clear Counsel (consultant) */
  :where([data-ui]) .cl { --s-bg: #f6f4ef; --s-ink: #1d2733; --cl-soft: #56606c; --cl-brass: #a8864f; --cl-navy: #1d2733; --cl-line: #e1ded6; --cl-brass-ink: #82642c; }
  :where([data-ui]) .cl-logo { display: flex; align-items: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 18); font-weight: 600; letter-spacing: -0.01em; }
  :where([data-ui]) .cl-logo svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
  :where([data-ui]) .cl-logo small { display: block; font-family: var(--font-display); font-size: calc(var(--u) * 10); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cl-soft); }
  :where([data-ui]) .cl-btn { background: var(--cl-navy); color: #f6f4ef; border-radius: calc(var(--u) * 8); }
  :where([data-ui]) .cl-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: calc(var(--u) * 64); padding: calc(var(--u) * 34) calc(var(--u) * 64) 0; align-items: center; }
  :where([data-ui]) .cl-hero .s-label { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.2em; color: var(--cl-brass-ink); }
  :where([data-ui]) .cl-h1 { margin-top: calc(var(--u) * 18) !important; font-size: calc(var(--u) * 64); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; }
  :where([data-ui]) .cl-lead { margin-top: calc(var(--u) * 22) !important; max-width: calc(var(--u) * 470); font-size: calc(var(--u) * 18); color: var(--cl-soft); }
  :where([data-ui]) .cl-actions { display: flex; align-items: center; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 32) !important; }
  :where([data-ui]) .cl-map { position: relative; height: calc(var(--u) * 400); border-radius: calc(var(--u) * 18); background: linear-gradient(160deg, #24303f, #1a2330); overflow: hidden; } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .cl-map svg { position: absolute; inset: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 70); width: calc(100% - calc(var(--u) * 80)); height: calc(100% - calc(var(--u) * 110)); }
  :where([data-ui]) .cl-map small { position: absolute; left: calc(var(--u) * 40); bottom: calc(var(--u) * 30); display: flex; gap: calc(var(--u) * 18); font-family: var(--font-display); font-size: calc(var(--u) * 12); letter-spacing: 0.2em; text-transform: uppercase; color: #c9b38c; }
  :where([data-ui]) .cl-how { margin-top: calc(var(--u) * 56) !important; padding: calc(var(--u) * 44) calc(var(--u) * 64) calc(var(--u) * 60) !important; background: #fff; }
  :where([data-ui]) .cl-how .s-label { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.2em; color: var(--cl-brass-ink); }
  :where([data-ui]) .cl-how > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 40); margin-top: calc(var(--u) * 22) !important; }
  :where([data-ui]) .cl-how i { display: block; width: calc(var(--u) * 32); height: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); border-radius: calc(var(--u) * 2); background: var(--cl-brass); }
  :where([data-ui]) .cl-how b { display: block; margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 19); }
  :where([data-ui]) .cl-how p { margin-top: calc(var(--u) * 6) !important; font-size: calc(var(--u) * 14); color: var(--cl-soft); }
  /* phone: contact & booking */
  :where([data-ui]) .cl-m-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 22); }
  :where([data-ui]) .cl-m-top .cl-logo { font-size: calc(var(--u) * 15); } .cl-m-top .cl-logo svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
  :where([data-ui]) .cl-m-top i { width: calc(var(--u) * 22); height: calc(var(--u) * 10); border-top: calc(var(--u) * 1.5) solid; border-bottom: calc(var(--u) * 1.5) solid; }
  :where([data-ui]) .cl-m-pad { padding: calc(var(--u) * 14) calc(var(--u) * 22) 0; }
  :where([data-ui]) .cl-m-h { font-size: calc(var(--u) * 30); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
  :where([data-ui]) .cl-m-p { margin-top: calc(var(--u) * 10) !important; font-size: calc(var(--u) * 14); color: var(--cl-soft); }
  :where([data-ui]) .cl-chips { display: flex; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 14) !important; }
  :where([data-ui]) .cl-chips span { padding: calc(var(--u) * 5) calc(var(--u) * 11); border-radius: calc(var(--u) * 6); background: #e9e5dc; font-size: calc(var(--u) * 12); }
  :where([data-ui]) .cl-m-l { margin-top: calc(var(--u) * 22) !important; font-family: var(--font-display); font-size: calc(var(--u) * 11); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cl-brass-ink); }
  :where([data-ui]) .cl-day { display: grid; grid-template-columns: calc(var(--u) * 62) 1fr; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10) !important; font-size: calc(var(--u) * 13); }
  :where([data-ui]) .cl-day > span:last-child { display: flex; gap: calc(var(--u) * 6); }
  :where([data-ui]) .cl-day em { padding: calc(var(--u) * 8) 0; flex: 1; border-radius: calc(var(--u) * 8); border: 1px solid var(--cl-line); background: #fff; text-align: center; font-style: normal; font-size: calc(var(--u) * 13); font-weight: 600; }
  :where([data-ui]) .cl-day em.on { background: var(--cl-navy); border-color: var(--cl-navy); color: #f6f4ef; }
  :where([data-ui]) .cl-field { margin-top: calc(var(--u) * 10) !important; padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 8); border: 1px solid var(--cl-line); background: #fff; font-size: calc(var(--u) * 13); color: #6c747e; }
  :where([data-ui]) .cl-field.tall { height: calc(var(--u) * 74); }
  :where([data-ui]) .cl-m-cta { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); bottom: calc(var(--u) * 22); display: grid; gap: calc(var(--u) * 8); text-align: center; font-size: calc(var(--u) * 11); color: var(--cl-soft); }
  :where([data-ui]) .cl-m-cta .s-btn { height: calc(var(--u) * 50); font-size: calc(var(--u) * 15); }

  /* ================================================================ Lumen Coaching (career coach) */
  :where([data-ui]) .lu { --s-bg: #fbf4ec; --s-ink: #3a2a3c; --lu-soft: #6f5f6c; --lu-apricot: #f2b48a; --lu-sun: #f6d78c; --lu-rose: #ecd3c9; --lu-plum: #3a2a3c; }
  :where([data-ui]) .lu-logo { display: flex; align-items: center; gap: calc(var(--u) * 10); }
  :where([data-ui]) .lu-logo svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
  :where([data-ui]) .lu-logo b { font-family: var(--font-display); font-size: calc(var(--u) * 26); font-weight: 500; letter-spacing: -0.01em; line-height: 1; }
  :where([data-ui]) .lu-logo small { display: block; font-size: calc(var(--u) * 11); color: var(--lu-soft); letter-spacing: 0.02em; }
  :where([data-ui]) .lu-btn { background: var(--lu-plum); color: #fbf4ec; }
  :where([data-ui]) .lu-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: calc(var(--u) * 50); padding: calc(var(--u) * 30) calc(var(--u) * 64) 0; align-items: center; }
  :where([data-ui]) .lu-pill { display: inline-block; padding: calc(var(--u) * 6) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: var(--lu-sun); font-size: calc(var(--u) * 13); font-weight: 600; }
  :where([data-ui]) .lu-h1 { margin-top: calc(var(--u) * 20) !important; font-family: var(--font-display); font-size: calc(var(--u) * 58); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; }
  :where([data-ui]) .lu-lead { margin-top: calc(var(--u) * 20) !important; max-width: calc(var(--u) * 470); font-size: calc(var(--u) * 18); color: var(--lu-soft); }
  :where([data-ui]) .lu-form { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 28) !important; max-width: calc(var(--u) * 500); padding: calc(var(--u) * 6) !important; border-radius: calc(var(--u) * 30); background: #fff; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * -18) rgba(58, 42, 60, 0.4); }
  :where([data-ui]) .lu-form span:first-child { flex: 1; align-self: center; padding-left: calc(var(--u) * 18); font-size: calc(var(--u) * 15); color: #7d6e7a; }
  :where([data-ui]) .lu-form .s-btn { height: calc(var(--u) * 48); border-radius: calc(var(--u) * 24); }
  :where([data-ui]) .lu-fine { margin-top: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 12); color: var(--lu-soft); }
  :where([data-ui]) .lu-book { position: relative; height: calc(var(--u) * 470); }
  :where([data-ui]) .lu-book > span { position: absolute; width: calc(var(--u) * 300); height: calc(var(--u) * 400); border-radius: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 10); }
  :where([data-ui]) .lu-book .back { left: calc(var(--u) * 120); top: calc(var(--u) * 40); rotate: 6deg; background: #f3e4d6; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -20) rgba(58, 42, 60, 0.35); }
  :where([data-ui]) .lu-book .cover { left: calc(var(--u) * 70); top: calc(var(--u) * 30); rotate: -4deg; padding: calc(var(--u) * 34) calc(var(--u) * 30); background: linear-gradient(165deg, #f7c9a3, var(--lu-apricot) 55%, #e89a74); box-shadow: inset calc(var(--u) * 8) 0 0 rgba(58, 42, 60, 0.1), 0 calc(var(--u) * 30) calc(var(--u) * 50) calc(var(--u) * -24) rgba(58, 42, 60, 0.5); color: var(--lu-plum); } /* taste-skill-ignore: illustration inside a concept screen */
  :where([data-ui]) .lu-book .cover svg { width: calc(var(--u) * 150); height: calc(var(--u) * 150); margin: calc(var(--u) * 40) 0 calc(var(--u) * 30) calc(var(--u) * -10); }
  :where([data-ui]) .lu-book .cover small { display: block; font-size: calc(var(--u) * 12); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
  :where([data-ui]) .lu-book .cover b { display: block; margin-top: calc(var(--u) * 8); font-family: var(--font-display); font-size: calc(var(--u) * 30); font-weight: 500; line-height: 1.05; }
  :where([data-ui]) .lu-inside { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 24); margin: calc(var(--u) * 40) calc(var(--u) * 64) 0 !important; padding-top: calc(var(--u) * 26) !important; border-top: 1px solid #ecdccd; font-size: calc(var(--u) * 14); }
  :where([data-ui]) .lu-inside span { display: flex; gap: calc(var(--u) * 10); }
  :where([data-ui]) .lu-inside i { flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: var(--lu-sun); box-shadow: inset 0 0 0 calc(var(--u) * 6) var(--lu-sun), inset 0 0 0 calc(var(--u) * 11) var(--lu-plum); }
  /* phone: profile + post grid */
  :where([data-ui]) .lu-m-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 18); font-size: calc(var(--u) * 16); font-weight: 600; }
  :where([data-ui]) .lu-m-top i { width: calc(var(--u) * 20); height: calc(var(--u) * 10); border-top: calc(var(--u) * 1.5) solid; border-bottom: calc(var(--u) * 1.5) solid; }
  :where([data-ui]) .lu-prof { display: flex; gap: calc(var(--u) * 14); align-items: center; padding: calc(var(--u) * 6) calc(var(--u) * 18) 0; }
  :where([data-ui]) .lu-prof > i { display: grid; place-items: center; width: calc(var(--u) * 70); height: calc(var(--u) * 70); flex: none; border-radius: 50%; background: var(--lu-apricot); box-shadow: 0 0 0 calc(var(--u) * 3) #fbf4ec, 0 0 0 calc(var(--u) * 5) var(--lu-apricot); }
  :where([data-ui]) .lu-prof > i svg { width: calc(var(--u) * 38); height: calc(var(--u) * 38); }
  :where([data-ui]) .lu-prof b { display: block; font-size: calc(var(--u) * 15); }
  :where([data-ui]) .lu-prof small { display: block; font-size: calc(var(--u) * 12.5); color: var(--lu-soft); line-height: 1.35; }
  :where([data-ui]) .lu-m-btn { margin: calc(var(--u) * 14) calc(var(--u) * 18) 0 !important; display: flex; height: calc(var(--u) * 36); border-radius: calc(var(--u) * 10); font-size: calc(var(--u) * 13); }
  :where([data-ui]) .lu-hl { display: flex; gap: calc(var(--u) * 16); padding: calc(var(--u) * 16) calc(var(--u) * 18) 0 !important; }
  :where([data-ui]) .lu-hl span { display: grid; justify-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 11); }
  :where([data-ui]) .lu-hl i { width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 calc(var(--u) * 2) #fbf4ec, 0 0 0 calc(var(--u) * 3.5) #dcc8bb; }
  :where([data-ui]) .lu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 18) !important; }
  :where([data-ui]) .lu-grid span { display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: calc(var(--u) * 10); background: var(--c, var(--lu-rose)); color: var(--t, var(--lu-plum)); font-family: var(--font-display); font-size: calc(var(--u) * 14); font-weight: 500; line-height: 1.1; }
  :where([data-ui]) .lu-grid .dk { --c: var(--lu-plum); --t: var(--lu-sun); }
  :where([data-ui]) .lu-grid .ap { --c: var(--lu-apricot); }
  :where([data-ui]) .lu-grid .sn { --c: var(--lu-sun); }
  :where([data-ui]) .lu-grid .cr { --c: #f6ebe1; }
  /* card: content plan */
  :where([data-ui]) .lu-plan { padding: calc(var(--u) * 26) calc(var(--u) * 28); height: 100%; background: #fff; }
  :where([data-ui]) .lu-plan > b { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: calc(var(--u) * 22); font-weight: 500; }
  :where([data-ui]) .lu-plan > b small { font-family: var(--font-text); font-size: calc(var(--u) * 13); font-weight: 500; color: var(--lu-soft); }
  :where([data-ui]) .lu-row { display: grid; grid-template-columns: calc(var(--u) * 52) 1fr auto; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 14) !important; padding: calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 12); background: #fbf4ec; font-size: calc(var(--u) * 14); }
  :where([data-ui]) .lu-row > em { font-style: normal; font-weight: 700; font-size: calc(var(--u) * 13); color: var(--lu-soft); }
  :where([data-ui]) .lu-row small { display: block; font-size: calc(var(--u) * 12); color: var(--lu-soft); }
  :where([data-ui]) .lu-row > i { padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); font-style: normal; font-size: calc(var(--u) * 11); font-weight: 600; background: var(--lu-sun); }
  :where([data-ui]) .lu-row > i.ok { background: #e3d9e4; }

  /* logo colours */
  :where([data-ui]) .hj-logo svg { color: var(--hj-leaf); }
  :where([data-ui]) .hj-post--b .hj-logo svg { color: var(--hj-butter); }
  :where([data-ui]) .hj-post--b .hj-logo small { color: #e7dcc8; }
  :where([data-ui]) .hj-post--a .hj-logo small { color: #4f4740; }
  :where([data-ui]) .lu-logo svg, :where([data-ui]) .lu-prof > i svg { color: var(--lu-plum); }

  /* ================================================================ Bee Seen Social: brand-system sheet (real) */
  :where([data-ui]) .screen--sheet { --u: calc(100cqw / 480); aspect-ratio: 480 / 600; }
  :where([data-ui]) .bs { --s-bg: #ffffff; --s-ink: #2a2622; padding: calc(var(--u) * 34) calc(var(--u) * 34) 0; }
  :where([data-ui]) .bs-head { display: flex; align-items: center; gap: calc(var(--u) * 14); }
  :where([data-ui]) .bs-head img { width: calc(var(--u) * 52); }
  :where([data-ui]) .bs-head b { display: block; font-family: var(--font-display); font-size: calc(var(--u) * 28); font-weight: 300; line-height: 1.1; }
  :where([data-ui]) .bs-head small { display: block; font-size: calc(var(--u) * 13); color: #5e5650; }
  :where([data-ui]) .bs-l { margin-top: calc(var(--u) * 26) !important; font-size: calc(var(--u) * 11); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #8a5606; }
  :where([data-ui]) .bs-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14) calc(var(--u) * 12); margin-top: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 13); font-weight: 500; }
  :where([data-ui]) .bs-sw span { display: grid; gap: calc(var(--u) * 2); }
  :where([data-ui]) .bs-sw i { display: block; height: calc(var(--u) * 58); margin-bottom: calc(var(--u) * 6); border-radius: calc(var(--u) * 10); background: var(--c); box-shadow: inset 0 0 0 1px rgba(42, 38, 34, 0.1); }
  :where([data-ui]) .bs-sw small { font-size: calc(var(--u) * 11); font-weight: 400; color: #5e5650; letter-spacing: 0.04em; }
  :where([data-ui]) .bs-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 18); }
  :where([data-ui]) .bs-type { display: flex; align-items: baseline; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 10) !important; }
  :where([data-ui]) .bs-type b { font-size: calc(var(--u) * 48); line-height: 1; }
  :where([data-ui]) .bs-type b.j { font-family: var(--font-display); font-weight: 300; }
  :where([data-ui]) .bs-type b.f { font-family: var(--font-text); font-weight: 500; font-size: calc(var(--u) * 40); }
  :where([data-ui]) .bs-type span { font-size: calc(var(--u) * 14); font-weight: 600; }
  :where([data-ui]) .bs-type small { display: block; font-size: calc(var(--u) * 11); font-weight: 400; color: #5e5650; }
  :where([data-ui]) .bs .bs-wing { display: block; width: 100%; height: auto; object-fit: contain; margin-top: calc(var(--u) * 8); }
  :where([data-ui]) .bs .bs-head img { height: auto; object-fit: contain; }
}