/* look12-ceo.css — v463 · D · the CEO card (Joe 22 Oct 2026 9:42am "Make 5 major upgrades to the look of our dashboard make it look
   like a billion dollar crm … think of yourself as a world class software engineer"; 8:37am about his top: "Add this back
   permanently"). The top of the screen as one crafted block, every piece kept.
   · Joe's own top (html.j12-ceo — look12-ceo.js sets it once the gold plate is drawn; easy2 calls the same top html.je-top3):
     row 1  the logo (its crown sits on the robot's head), the 5.0 button when it is in the bar (html.j2-bar), the language and
            Sign out as quiet capsules;
     block  .who as a grid: the gold plate with a real metal sheen (light from the top-left, one slow shine when it is drawn, none
            under reduced motion) · Answering as a green live capsule with a breathing dot, Note beside it as a glass capsule ·
            the robots on six glass tiles aligned to the plate's top (app.js stands them there through the v463 hook
            window.JetsyParkAt) · the JETSY 5.0 · OWNER + BILLIONAIRE pill as one gold-outlined capsule in the phone's own type;
     row 3  +, ? and Find as 44 px circles (the + is the orange disc).
   · A customer's two-row top (html.je-top without je-top3): look11's layout untouched — the same capsules and circles, no gold.
   Every colour lives in the two blocks of custom properties below (dark, then html.je-light): easy2's light mode recolours the
   literal colours of every rule, so no rule here holds one — the light block wins and is never recoloured (its text says je-light).
   Fits 375 with no wrap of the plate and no sideways scroll, with and without the 5.0 button, with any company picked.
   Specificity: header.appbar:not(#j12-hd) counts as one id, so these rules beat app.css, easy2, look11 and the header styles the
   scripts inject later (the strongest is (1,4,3) with !important) without depending on load order.
   Off: localStorage nolook12 = 1 (html.nolook12). */

/* ------------------------------------------------------------------------------------------------ the colours: dark, then light -- */
html:not(.nolook12){
  --j12c-metal:radial-gradient(140% 190% at 4% -45%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(120,80,10,.04) 1px 2px,rgba(255,255,255,0) 2px 4px),
    linear-gradient(172deg,#FCF1C9 0%,#EED17F 24%,#D7AC4E 54%,#BB8A30 78%,#DDBB66 100%);
  --j12c-metal-sh:inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(112,74,12,.5),inset 0 0 0 1px rgba(150,106,28,.32),0 1px 1px rgba(0,0,0,.42),0 8px 18px -8px rgba(214,171,77,.6);
  --j12c-sheen:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.78) 50%,rgba(255,255,255,0) 82%);
  --j12c-engrave:0 1px 0 rgba(255,248,220,.62);
  --j12c-gold-ink:#2A1C05;
  --j12c-gold-text:#F1D58A;
  --j12c-gold-line:rgba(226,194,107,.55);
  --j12c-gold-tint:rgba(226,194,107,.07);
  --j12c-gold-chip:linear-gradient(165deg,#FCF0C4 0%,#E5C46F 52%,#C99A3E 100%);
  --j12c-gold-chip-sh:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.35);
  --j12c-gold-icon:#E2C26B;
  --j12c-crown-sh:drop-shadow(0 1px 1px rgba(0,0,0,.5));
  --j12c-ok:#34D399; --j12c-ok-bg:rgba(52,211,153,.12); --j12c-ok-line:rgba(52,211,153,.34); --j12c-ok-ink:#A7F3D0; --j12c-ok-ring:rgba(52,211,153,.5);
  --j12c-due:#FBBF24; --j12c-due-bg:rgba(251,191,36,.12); --j12c-due-line:rgba(251,191,36,.38); --j12c-due-ink:#FDE68A;
  --j12c-cap:rgba(255,255,255,.06); --j12c-cap-line:rgba(255,255,255,.10);
  --j12c-tile:rgba(255,255,255,.045); --j12c-tile-line:rgba(255,255,255,.07);
  --j12c-tile-on:rgba(255,255,255,.13); --j12c-tile-on-line:rgba(255,255,255,.26);
  --j12c-or-cap:linear-gradient(180deg,rgba(255,106,26,.24),rgba(255,106,26,.10)); --j12c-or-line:rgba(255,138,61,.55); --j12c-or-ink:#FFD2B5;
  --j12c-plus:linear-gradient(180deg,#FF8A3D 0%,#FF6A1A 100%);
  --j12c-plus-sh:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(120,40,0,.25),0 8px 18px -6px rgba(255,106,26,.7);
  --j12c-plus-ink:#FFFFFF;
  --j12c-lis:linear-gradient(135deg,#FF6B5E,#E0282E);
  --j12c-circle:rgba(255,255,255,.07); --j12c-circle-sh:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.05);
  --j12c-ink1:#F5F7FB; --j12c-ink2:#A7B3C6; --j12c-ink3:#6E7B90;
  --j12c-badge:rgba(255,255,255,.06);
}
html.je-light:not(.nolook12){
  --j12c-metal:radial-gradient(140% 190% at 4% -45%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(120,80,10,.04) 1px 2px,rgba(255,255,255,0) 2px 4px),
    linear-gradient(172deg,#FCF1C9 0%,#EED17F 24%,#D7AC4E 54%,#BB8A30 78%,#DDBB66 100%);
  --j12c-metal-sh:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(112,74,12,.42),inset 0 0 0 1px rgba(150,106,28,.4),0 1px 1px rgba(80,56,10,.22),0 8px 16px -8px rgba(176,128,40,.5);
  --j12c-sheen:linear-gradient(100deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.78) 50%,rgba(255,255,255,0) 82%);
  --j12c-engrave:0 1px 0 rgba(255,248,220,.62);
  --j12c-gold-ink:#2A1C05;
  --j12c-gold-text:#6E4C0E;
  --j12c-gold-line:rgba(176,134,40,.62);
  --j12c-gold-tint:rgba(226,194,107,.18);
  --j12c-gold-chip:linear-gradient(165deg,#FCF0C4 0%,#E5C46F 52%,#C99A3E 100%);
  --j12c-gold-chip-sh:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(80,56,10,.25);
  --j12c-gold-icon:#9A6E1C;
  --j12c-crown-sh:drop-shadow(0 1px 1px rgba(80,56,10,.35));
  --j12c-ok:#10B981; --j12c-ok-bg:rgba(16,185,129,.10); --j12c-ok-line:rgba(5,150,105,.32); --j12c-ok-ink:#047857; --j12c-ok-ring:rgba(16,185,129,.42);
  --j12c-due:#D97706; --j12c-due-bg:rgba(217,119,6,.10); --j12c-due-line:rgba(217,119,6,.38); --j12c-due-ink:#92400E;
  --j12c-cap:rgba(10,20,40,.045); --j12c-cap-line:rgba(10,20,40,.11);
  --j12c-tile:rgba(10,20,40,.04); --j12c-tile-line:rgba(10,20,40,.08);
  --j12c-tile-on:rgba(10,20,40,.09); --j12c-tile-on-line:rgba(10,20,40,.22);
  --j12c-or-cap:linear-gradient(180deg,rgba(255,106,26,.16),rgba(255,106,26,.07)); --j12c-or-line:rgba(234,88,12,.45); --j12c-or-ink:#C2410C;
  --j12c-plus:linear-gradient(180deg,#FF8A3D 0%,#FF6A1A 100%);
  --j12c-plus-sh:inset 0 1px 0 rgba(255,255,255,.4),0 8px 16px -8px rgba(234,88,12,.55);
  --j12c-plus-ink:#FFFFFF;
  --j12c-lis:linear-gradient(135deg,#FF6B5E,#E0282E);
  --j12c-circle:rgba(255,255,255,.92); --j12c-circle-sh:inset 0 0 0 1px rgba(10,20,40,.10),0 1px 2px rgba(16,32,58,.08);
  --j12c-ink1:#0B1220; --j12c-ink2:#475569; --j12c-ink3:#64748B;
  --j12c-badge:rgba(10,20,40,.05);
}
/* the robots' dock is drawn only while the robots are on the page (none under reduced motion, none in a preview) */
html:not(.nolook12){--j12c-dockw:0px}
html.j12-ceo.j12-bots:not(.nolook12){--j12c-dockw:114px}

/* ------------------------------------------------------------------------------------------- both tops: the surface, row 1 -- */
/* the top sits on the page itself (no navy band, no hairline under it): the page's own ground and glow show through */
html:not(.nolook12) body header.appbar:not(#j12-hd){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important}
html:not(.nolook12) body header.appbar:not(#j12-hd)::before{background:transparent!important}
/* the language and Sign out: quiet capsules, drawn 34 px, 44 px to a thumb (a 5 px halo above and below) */
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > #langsw,
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="logout.php"],
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="login.php"]{
  position:relative!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:34px!important;min-height:34px!important;max-height:none!important;min-width:44px!important;margin:0!important;padding:0 12px!important;
  border:0!important;border-radius:999px!important;background:var(--j12c-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-cap-line)!important;
  color:var(--j12c-ink2)!important;font:500 14px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;
  white-space:nowrap!important;text-decoration:none!important;flex:0 0 auto!important;-webkit-tap-highlight-color:transparent;
}
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > #langsw::before,
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="logout.php"]::before,
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="login.php"]::before{content:""!important;position:absolute!important;left:0!important;right:0!important;top:-5px!important;bottom:-5px!important;border-radius:inherit}
/* the 5.0 / Ask / plan button (html.j2-bar): the one orange-tinted capsule in the row */
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn{
  position:relative!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  height:34px!important;min-height:34px!important;max-height:34px!important;min-width:44px!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:0 12px 0 9px!important;gap:6px!important;border:0!important;border-radius:999px!important;
  background:var(--j12c-or-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-or-line)!important;color:var(--j12c-or-ink)!important;
  font:600 14px/1 var(--j12-sf)!important;letter-spacing:0!important;
}
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn::before{content:""!important;position:absolute!important;left:0!important;right:0!important;top:-5px!important;bottom:-5px!important;border-radius:inherit}
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn img{width:22px!important;height:22px!important}
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn::after{font:700 14px/1 var(--j12-sf)!important;letter-spacing:0!important;color:var(--j12c-or-ink)!important}
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn.pc-btn .pc-btn-t{font:600 14px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j12c-or-ink)!important}
html.j2-bar:not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn.pc-btn .pc-mark{width:18px!important;height:18px!important;color:var(--j12c-or-ink)!important}

/* ------------------------------------------------------------------------------------------ both tops: circles, Answering -- */
html:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb,
html:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .j6-hfind,
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > .j6-hfind{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--j12c-circle)!important;box-shadow:var(--j12c-circle-sh)!important;color:var(--j12c-ink1)!important;
  font:600 18px/1 var(--j12-sf)!important;letter-spacing:0!important;-webkit-tap-highlight-color:transparent;
}
html:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-plus{background:var(--j12c-plus)!important;box-shadow:var(--j12c-plus-sh)!important;color:var(--j12c-plus-ink)!important;font-weight:300!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-plus.lis{background:var(--j12c-lis)!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .j6-hfind svg,
html:not(.nolook12) body header.appbar:not(#j12-hd) .in > .j6-hfind svg{width:20px!important;height:20px!important;display:block}
/* Answering: a green capsule with a breathing dot, in sentence case (no spaced monospace capitals) */
html:not(.nolook12) body header.appbar:not(#j12-hd) .live{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;gap:7px!important;
  border:0!important;border-radius:999px!important;background:var(--j12c-ok-bg)!important;box-shadow:inset 0 0 0 1px var(--j12c-ok-line)!important;
  filter:none!important;opacity:1!important;min-width:0!important;
}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live > span:not(.pulse){
  font:600 13px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;color:var(--j12c-ok-ink)!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-width:0!important;max-width:none!important;text-align:left!important;
}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live .pulse{
  position:relative!important;flex:0 0 auto!important;width:8px!important;height:8px!important;margin:0!important;border-radius:50%!important;
  background:var(--j12c-ok)!important;box-shadow:none!important;animation:j12c-breathe 3.2s ease-in-out infinite!important;
}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live .pulse::after{
  content:""!important;position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;border-radius:50%!important;
  box-shadow:0 0 0 3px var(--j12c-ok-ring)!important;opacity:0;animation:j12c-ring 3.2s ease-out infinite!important;
}
/* "Taking messages": the line takes messages only (callrec.js) — amber, waiting on you */
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.msg{background:var(--j12c-due-bg)!important;box-shadow:inset 0 0 0 1px var(--j12c-due-line)!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.msg > span:not(.pulse){color:var(--j12c-due-ink)!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.msg .pulse{background:var(--j12c-due)!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.msg .pulse::after{box-shadow:0 0 0 3px var(--j12c-due-line)!important}
/* "Not connected" / "CRM only": a plain capsule, no dot */
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.off{background:var(--j12c-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-cap-line)!important}
html:not(.nolook12) body header.appbar:not(#j12-hd) .live.off > span:not(.pulse){color:var(--j12c-ink2)!important}
@keyframes j12c-breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.72}}
@keyframes j12c-ring{0%{transform:scale(.7);opacity:.85}70%,100%{transform:scale(2.3);opacity:0}}

/* ======================================================================================== Joe's own top: the CEO card ====== */
/* the grid: row 1 logo · 5.0 · · language · Sign out / the block / + ? Find. Areas keep easy2's names (who, je2) so every piece that
   carries a grid-area of its own lands in its place; the logo's column may shrink (a picked company's wide logo never pushes Sign out
   off the row). */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in{
  display:grid!important;flex-wrap:nowrap!important;
  grid-template-columns:minmax(0,max-content) max-content minmax(0,1fr) max-content max-content!important;
  grid-template-rows:34px auto 44px!important;   /* row 1 is drawn 34 px; its capsules reach 44 px to a thumb through their halos */
  grid-template-areas:"mark ask . lang out" "who who who who who" "je2 je2 je2 je2 je2"!important;
  column-gap:6px!important;row-gap:10px!important;align-items:center!important;justify-items:stretch!important;
  padding:10px 16px 14px!important;padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in::before,
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in::after{content:none!important;display:none!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > *{order:0!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark{
  grid-area:mark!important;justify-self:start!important;align-self:center!important;min-width:0!important;max-width:100%!important;width:auto!important;
  display:flex!important;align-items:center!important;position:relative!important;overflow:visible!important;filter:none!important;margin:0!important;
}
html.j12-ceo:not(.je-light):not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark{height:30px!important}
html.j12-ceo:not(.je-light):not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark img{display:block!important;height:28px!important;width:auto!important;max-width:100%!important;object-fit:contain!important;object-position:left center!important;margin:0!important}
html.j12-ceo:not(.je-light):not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark img[style*="background"]{height:30px!important;padding:2px 5px!important;border-radius:8px!important}   /* a picked company's own logo on its white tile (app.js JetsyLook.paint) */
html.j12-ceo.je-light:not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark img{max-width:100%!important;object-fit:contain!important;object-position:left center!important}
/* the crown sits on the robot's head (the logo's left end), a little tilted */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark.own-lux::before{
  content:"\1F451"!important;display:block!important;position:absolute!important;left:8px!important;top:-12px!important;right:auto!important;
  transform:rotate(-14deg)!important;font-size:13px!important;line-height:1!important;filter:var(--j12c-crown-sh)!important;pointer-events:none!important;
}
html.j12-ceo.je-light:not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark.own-lux::before{left:16px!important;top:-10px!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark.own-lux::after{display:none!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > #j2btn{grid-area:ask!important;justify-self:start!important;align-self:center!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > #langsw{grid-area:lang!important;justify-self:end!important;align-self:center!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="logout.php"],
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="login.php"]{grid-area:out!important;justify-self:end!important;align-self:center!important}

/* ---- the block: [plate ......][dock] / [Answering][Note] · [dock] / [the owner pill ..........] ----
   Columns: Answering (shrinks with … only when there is no room) · Note · a spring · the dock. Placed by grid lines: the plate and the
   pill span every column, so their width never pushes Note away from Answering; the dock overlaps the plate's row on the right. */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .who{
  grid-area:who!important;justify-self:stretch!important;align-self:start!important;
  display:grid!important;flex:none!important;flex-direction:row!important;flex-wrap:nowrap!important;
  grid-template-columns:minmax(0,max-content) max-content minmax(0,1fr) var(--j12c-dockw)!important;
  grid-template-rows:34px 34px auto!important;grid-template-areas:none!important;
  column-gap:8px!important;row-gap:6px!important;align-items:center!important;justify-items:start!important;
  width:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;position:relative!important;line-height:1!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > #co{
  grid-area:1 / 1 / 2 / -1!important;justify-self:start!important;align-self:center!important;display:flex!important;align-items:center!important;
  min-width:0!important;max-width:calc(100% - var(--j12c-dockw) - 8px)!important;margin:0!important;padding:0!important;white-space:nowrap!important;overflow:visible!important;
  font-size:15px!important;line-height:20px!important;text-overflow:clip!important;
}
/* the plate: brushed gold, lit from the top-left, a bright top edge and a darker lower one, the name engraved */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate{
  position:relative!important;isolation:isolate;overflow:hidden!important;box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;gap:0!important;height:34px!important;margin:0!important;padding:0 14px!important;
  border:0!important;border-radius:10px!important;background:var(--j12c-metal)!important;box-shadow:var(--j12c-metal-sh)!important;
  color:var(--j12c-gold-ink)!important;font:700 16px/1 var(--j12-sf)!important;letter-spacing:-.012em!important;text-transform:none!important;
  text-shadow:var(--j12c-engrave)!important;white-space:nowrap!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate .sc{display:none!important}
/* the shine: one slow sweep of light across the metal when the plate is drawn */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate::after{
  content:""!important;position:absolute!important;top:-30%!important;bottom:-30%!important;left:0!important;width:44%!important;height:auto!important;
  background:var(--j12c-sheen)!important;transform:translateX(-170%) skewX(-14deg);pointer-events:none!important;z-index:1;
  animation:j12c-shine 2.6s cubic-bezier(.45,.05,.25,1) .8s 1 both!important;
}
@keyframes j12c-shine{0%{transform:translateX(-170%) skewX(-14deg)}100%{transform:translateX(330%) skewX(-14deg)}}
@media (max-width:389px){
  html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate{font-size:15px!important;padding:0 12px!important}
}
/* Answering, then Note beside it */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .live{
  grid-area:2 / 1 / 3 / 2!important;justify-self:start!important;align-self:center!important;order:0!important;flex:none!important;
  height:34px!important;width:auto!important;max-width:100%!important;margin:0!important;padding:0 14px 0 12px!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .jnote-b{
  grid-area:2 / 2 / 3 / 3!important;justify-self:start!important;align-self:center!important;position:relative!important;box-sizing:border-box!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0 14px 0 12px!important;
  border:0!important;border-radius:999px!important;background:var(--j12c-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-cap-line)!important;
  color:var(--j12c-ink1)!important;font:600 14px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important;
  transform:none;-webkit-tap-highlight-color:transparent;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .jnote-b::before{content:""!important;position:absolute!important;left:0!important;right:0!important;top:-5px!important;bottom:-5px!important;border-radius:inherit}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .jnote-b .ji{width:16px!important;height:16px!important;vertical-align:0!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .jnote-b .ji path:first-child{fill:var(--j12c-gold-icon)!important;fill-opacity:.22!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .jnote-b .ji path:last-child{stroke:var(--j12c-gold-icon)!important}
/* the owner pill: one gold-outlined capsule, the phone's own type in capitals (no monospace), BILLIONAIRE a gold chip inside it */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > #pl{
  grid-area:3 / 1 / 4 / -1!important;justify-self:start!important;align-self:center!important;display:flex!important;margin:4px 0 0!important;padding:0!important;
  max-width:100%!important;min-width:0!important;overflow:visible!important;background:none!important;box-shadow:none!important;border-radius:0!important;
  font:700 12px/1 var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap!important;color:var(--j12c-gold-text)!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > #pl::before{content:none!important;display:none!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;gap:0!important;height:30px!important;margin:0!important;padding:0 3px 0 11px!important;
  border:0!important;border-radius:999px!important;background:var(--j12c-gold-tint)!important;box-shadow:inset 0 0 0 1px var(--j12c-gold-line)!important;
  color:var(--j12c-gold-text)!important;font:700 12px/1 var(--j12-sf)!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  white-space:nowrap!important;text-shadow:none!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 > .ji{width:14px!important;height:14px!important;margin:0 1px 0 0!important;vertical-align:0!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 > .ji path:first-child{fill:var(--j12c-gold-icon)!important;fill-opacity:.25!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 > .ji path:last-child{stroke:var(--j12c-gold-icon)!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 i{
  font-style:normal!important;font-weight:800!important;margin:0 4px 0 5px!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 .jbil{
  box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;gap:5px!important;height:24px!important;margin:0 0 0 10px!important;padding:0 10px 0 8px!important;
  border:0!important;border-radius:999px!important;background:var(--j12c-gold-chip)!important;box-shadow:var(--j12c-gold-chip-sh)!important;
  color:var(--j12c-gold-ink)!important;font:800 11px/1 var(--j12-sf)!important;letter-spacing:.07em!important;text-shadow:var(--j12c-engrave)!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 .jbil .ji{width:13px!important;height:13px!important;vertical-align:0!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 .jbil .ji path:first-child{fill:var(--j12c-gold-ink)!important;fill-opacity:.16!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #pl .plan5 .jbil .ji path:last-child{stroke:var(--j12c-gold-ink)!important}
/* the robots' dock: six glass tiles, three by two, its top on the plate's top; app.js stands each robot on its tile */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock{display:none!important}
html.j12-ceo.j12-bots:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock{
  display:grid!important;grid-area:1 / 4 / 3 / 5!important;justify-self:end!important;align-self:start!important;
  grid-template-columns:repeat(3,34px)!important;grid-template-rows:repeat(2,34px)!important;gap:6px!important;margin:0!important;pointer-events:none!important;
}
html.j12-ceo.j12-bots:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock > i{
  display:block!important;border-radius:11px!important;background:var(--j12c-tile)!important;box-shadow:inset 0 0 0 1px var(--j12c-tile-line)!important;
  transition:background-color var(--j12-t) var(--j12-spring),box-shadow var(--j12-t) var(--j12-spring);
}
html.j12-ceo.j12-bots:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock > i.on{background:var(--j12c-tile-on)!important;box-shadow:inset 0 0 0 1px var(--j12c-tile-on-line)!important}
/* + ? Find: 44 px circles in a row of their own, Find right after the ? wherever look6 put it */
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .je2-hb{
  grid-area:je2!important;justify-self:start!important;align-self:center!important;display:flex!important;align-items:center!important;gap:10px!important;
  min-height:44px!important;margin:0!important;padding:0!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .j6-hfind{grid-area:je2!important;justify-self:start!important;align-self:center!important;margin:0 0 0 108px!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb,
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .j6-hfind,
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .j6-hfind{
  position:relative!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;
}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb::before,
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .j6-hfind::before,
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .in > .j6-hfind::before{content:none!important;display:none!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-plus{font-size:30px!important}
html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-help{font-size:19px!important}
/* the robots: a touch smaller so each stands inside its tile; the picked company's robot grows past it, the others step back */
html.j12-ceo.j12-bots:not(.nolook12) body .jbud .in{transform:scale(.84)}
html.j12-ceo.j12-bots:not(.nolook12) body .jbud.sm .in{transform:scale(.62)}
html.j12-ceo.j12-bots:not(.nolook12) body .jbud.lead .in{transform:scale(1.08)}
html.j12-ceo.j12-bots:not(.nolook12) body .jbud.k-liam .bd{margin:4px}   /* the baby robot is drawn 26 px: centred on its tile */
html.j12-ceo.j12-bots:not(.nolook12) body .jbud .hat{left:auto!important;right:-6px!important;top:-9px!important;width:auto!important;font-size:13px!important;text-align:right!important}
html.j12-ceo.j12-bots:not(.nolook12) body .jbud.lead .ex{right:3px}
/* the narrowest phones (under 360): smaller tiles and plate type so the row still fits */
@media (max-width:359px){
  html.j12-ceo.j12-bots:not(.nolook12){--j12c-dockw:94px}
  html.j12-ceo.j12-bots:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock{grid-template-columns:repeat(3,28px)!important;grid-template-rows:repeat(2,28px)!important;gap:5px!important}
  html.j12-ceo.j12-bots:not(.nolook12) body .jbud .in{transform:scale(.7)}
  html.j12-ceo.j12-bots:not(.nolook12) body .jbud.lead .in{transform:scale(.92)}
  html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate{font-size:13px!important;padding:0 10px!important}
}

/* ================================================================================== a customer's two-row top (no gold) ====== */
/* row 1 never wraps: the logo gives way first (it may shrink, never grow past its own width; look11's auto margin still pushes the
   buttons right), and the capsules are a size smaller than Joe's — a plan button ("Jetsy 2.0") sits in this row too */
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark{flex:1 1 0px!important;min-width:0!important;max-width:max-content!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .mark img{max-width:100%!important;object-fit:contain!important;object-position:left center!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > #langsw,
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > a.b.sm[href="logout.php"]{font-size:13px!important;padding:0 10px!important}
html.j2-bar.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn{padding:0 10px 0 8px!important;gap:5px!important;font-size:13px!important;margin-left:auto!important}   /* look11's push to the right, kept */
html.j2-bar.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn.pc-btn .pc-btn-t{font-size:13px!important}
html.j2-bar.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) #j2btn.j2-btn.pc-btn .pc-mark{width:16px!important;height:16px!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .who{
  border-radius:16px!important;background:var(--j12c-cap)!important;box-shadow:inset 0 0 0 1px var(--j12c-cap-line)!important;
}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .who .co{font-family:var(--j12-sf)!important;font-weight:650!important;letter-spacing:-.012em!important;color:var(--j12c-ink1)!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .who .pl{font-family:var(--j12-sf)!important;letter-spacing:0!important;text-transform:none!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .who .jb-badge{border-radius:12px!important;background:var(--j12c-badge)!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-plus{font-size:26px!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb.je2-help{font-size:17px!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .je2-tb::before,
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .je2-hb .j6-hfind::before{border-radius:50%}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .live{height:28px!important;padding:0 9px 0 8px!important;gap:5px!important;margin:0!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .live > span:not(.pulse){font-size:11.5px!important}
html.je-top:not(.je-top3):not(.j12-ceo):not(.nolook12) body header.appbar:not(#j12-hd) .in > .live .pulse{width:7px!important;height:7px!important}

/* ===================================================================================================== reduced motion ====== */
@media (prefers-reduced-motion:reduce){
  html:not(.nolook12) body header.appbar:not(#j12-hd) .live .pulse,
  html:not(.nolook12) body header.appbar:not(#j12-hd) .live .pulse::after{animation:none!important}
  html:not(.nolook12) body header.appbar:not(#j12-hd) .live .pulse::after{opacity:0!important}
  html.j12-ceo:not(.nolook12) body header.appbar:not(#j12-hd) #co .ceo-plate::after{animation:none!important;opacity:0!important}
  html.j12-ceo.j12-bots:not(.nolook12) body header.appbar:not(#j12-hd) .who > .j12-dock > i{transition:none!important}
}