:root {
  --ink: #1A1A1C; --ink2: #2C2B2D; --paper: #F2F1EF; --card: #FFFFFF; --brand: #A30C33; --brand-dark: #7E0A28; --tint: #FBF3F5;
  --muted: #5E5B57; --muted-dark: #A9A6A1; --line: #E4E1DC; --field: #CFCBC5; --on-dark: #D8D6D2;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { min-height: 100vh; background: var(--ink); display: flex; align-items: center; justify-content: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--field); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; font-size: 16px; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { flex: none; }
.link { background: none; border: none; color: var(--brand); font-weight: 600; font-size: 14px; padding: 8px; min-height: 40px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; min-height: 44px; color: var(--brand); background: none; border: none; padding: 0; }
.back.light { color: #fff; }
.err { background: var(--tint); color: #8A0A2B; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.spin.dark { border-color: rgba(26,26,28,.15); border-top-color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- sign in ---------- */
.signin { min-height: 100vh; min-height: 100dvh; background: var(--ink); display: flex; flex-direction: column; }
.signin .hero { padding: calc(56px + var(--safe-t)) 28px 36px; display: flex; flex-direction: column; gap: 14px; color: #fff; max-width: 520px; width: 100%; margin: 0 auto; }
.signin .hero img { width: 176px; height: auto; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--muted-dark); }
.signin h1 { margin: 18px 0 0; font-size: 32px; line-height: 1.15; font-weight: 800; }
.signin .hero p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.signin .sheet { flex: 1; background: var(--paper); border-radius: 28px 28px 0 0; padding: 30px 24px calc(28px + var(--safe-b)); }
.signin .sheet > div { max-width: 472px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
#f-email, #f-code { display: flex; flex-direction: column; gap: 16px; }
.signin h2 { margin: 0; font-size: 20px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.field input { font-family: inherit; font-size: 16px; padding: 14px; border-radius: 12px; border: 1.5px solid var(--field); background: #fff; color: var(--ink); min-height: 52px; width: 100%; }
.field input:focus, .digits input:focus { outline: 3px solid rgba(163,12,51,.25); border-color: var(--brand); }
.hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.note svg { flex: none; margin-top: 1px; }
.notif { background: #fff; border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 20px rgba(26,26,28,.08); }
.notif .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.notif span { font-size: 13px; line-height: 1.45; }
.digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.digits input { font-family: inherit; text-align: center; font-size: 24px; font-weight: 700; height: 58px; border-radius: 12px; border: 1.5px solid var(--field); background: #fff; width: 100%; color: var(--ink); padding: 0; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; flex: none; }

/* ---------- app frame ---------- */
.frame { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(76px + var(--safe-b)); }
.topbar { display: none; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 6px 6px calc(8px + var(--safe-b)); }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; }
.tabs a.on { color: var(--brand); font-weight: 700; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; }

/* home header */
.homehead { background: var(--ink); color: #fff; padding: calc(44px + var(--safe-t)) 20px 24px; }
.homehead .wrap { display: flex; flex-direction: column; gap: 18px; }
.homehead .row1 { display: flex; align-items: center; justify-content: space-between; }
.homehead .row1 img { width: 128px; height: auto; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #4A4845; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: none; overflow: hidden; padding: 0; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.date { font-size: 13px; font-weight: 600; color: var(--muted-dark); }
.homehead h1 { margin: 4px 0 0; font-size: 28px; font-weight: 800; line-height: 1.15; }
.homehead p { margin: 6px 0 0; font-size: 14px; color: var(--on-dark); }
.homehead p b { color: #fff; }
.search { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 0 14px; min-height: 50px; background: #fff; border: 1.5px solid var(--field); }
.search.dark { background: var(--ink2); border-color: var(--ink2); }
.search input { font-family: inherit; font-size: 16px; border: none; background: transparent; color: var(--ink); flex: 1; min-height: 46px; outline: none; min-width: 0; }
.search.dark input { color: #fff; }
.search.dark input::placeholder { color: var(--muted-dark); }

section.blk { padding: 26px 20px 0; }
section.blk > .wrap { display: flex; flex-direction: column; gap: 12px; }
.h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h2.h { margin: 0; font-size: 19px; font-weight: 800; }
.sub { font-size: 13px; color: var(--muted); margin-top: -6px; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--brand); border-radius: 999px; padding: 3px 8px; }

/* this week */
.week { display: grid; gap: 12px; }
.hero { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 8px 24px rgba(26,26,28,.12); }
.hero video, .hero img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #000; }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: #fff; border-radius: 16px; padding: 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.tile .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.tile b { font-size: 15px; }
.tile span.c { font-size: 12px; color: var(--muted); margin-top: auto; }
.tile span.c em { font-style: normal; color: var(--brand); font-weight: 700; }

/* piece cards */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.strip { display: flex; gap: 12px; overflow-x: auto; margin-right: -20px; padding: 0 20px 6px 0; scroll-snap-type: x proximity; }
.strip .card { flex: none; width: 150px; scroll-snap-align: start; }
.card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; min-width: 0; }
.thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #E4E1DC; aspect-ratio: 4 / 5; box-shadow: 0 4px 12px rgba(26,26,28,.10); }
.thumb img, .thumb video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumb .badge { position: absolute; top: 8px; left: 8px; }
.thumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(163,12,51,.92); display: flex; align-items: center; justify-content: center; }
.doc { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }

/* list (flyers) */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.list li { background: #fff; border-radius: 14px; padding: 10px; display: flex; gap: 12px; align-items: center; }
.list a.go { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.list .mini { width: 62px; height: 80px; border-radius: 6px; border: 1px solid var(--line); overflow: hidden; flex: none; background: #fff; }
.list .mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.list .meta { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.iconbtn { width: 44px; height: 44px; border-radius: 10px; border: none; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* category page */
.pagehead { padding: calc(40px + var(--safe-t)) 20px 12px; }
.pagehead .wrap { display: flex; flex-direction: column; gap: 12px; }
.pagehead h1 { margin: 0; font-size: 28px; font-weight: 800; }
.pagehead p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--field); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
.body { padding: 6px 20px 28px; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* one piece */
.piece { background: var(--ink); color: #fff; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.piece .top { padding: calc(40px + var(--safe-t)) 16px 10px; display: flex; align-items: center; justify-content: space-between; }
.piece .top .pos { font-size: 12px; font-weight: 600; color: var(--muted-dark); display: flex; align-items: center; gap: 4px; }
.piece .top .pos button { width: 40px; height: 40px; border-radius: 10px; border: none; background: var(--ink2); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.piece .stage { padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.piece .media { border-radius: 14px; overflow: hidden; background: #000; }
.piece .media img, .piece .media video { display: block; width: 100%; max-height: 72vh; object-fit: contain; }
.piece .media .doc { aspect-ratio: 8.5 / 11; max-height: 60vh; }
.piece h1 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.piece .meta { margin-top: 4px; font-size: 13px; color: var(--muted-dark); }
.piece .acts { flex: 1; margin-top: 18px; background: var(--paper); color: var(--ink); border-radius: 24px 24px 0 0; padding: 22px 20px calc(30px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* install + account */
.install { background: #fff; border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.install img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.install > div > b { display: block; font-size: 15px; margin-bottom: 4px; }
.install p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.install .x { margin-left: auto; width: 36px; height: 36px; border: none; background: none; color: var(--muted); flex: none; border-radius: 8px; }
.foot { padding: 30px 20px 10px; text-align: center; font-size: 13px; color: var(--muted); }
.foot .wrap { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: calc(100% - 40px); text-align: center; }

/* ---------- computers ---------- */
@media (min-width: 900px) {
  .frame { padding-bottom: 0; }
  .tabs { display: none; }
  .topbar { display: block; background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 20; padding: 0 28px; }
  .topbar .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
  .topbar img.logo { width: 130px; height: auto; }
  .topbar nav { display: flex; gap: 4px; flex: 1; }
  .topbar nav a { color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 14px; border-radius: 10px; }
  .topbar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
  .topbar nav a.on { background: var(--brand); color: #fff; font-weight: 600; }
  .homehead { padding: 36px 28px 32px; }
  .homehead .row1 { display: none; }
  .homehead .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
  .homehead .search { width: 380px; }
  section.blk, .pagehead, .body, .foot { padding-left: 28px; padding-right: 28px; }
  .pagehead { padding-top: 32px; }
  .pagehead .back { display: none; }
  .week { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .week .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px 18px; }
  .strip { margin-right: 0; padding-right: 0; }
  .strip .card { width: 190px; }
  .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piece { min-height: calc(100vh - 68px); }
  .piece .top { padding: 24px 28px 8px; max-width: 1160px; margin: 0 auto; width: 100%; }
  .piece .wrap2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); gap: 28px; padding: 0 28px 40px; max-width: 1160px; margin: 0 auto; width: 100%; align-items: start; }
  .piece .stage { padding: 0; }
  .piece .acts { margin-top: 0; border-radius: 20px; padding: 24px; }
  .toast { bottom: 28px; }
}

/* sideways rows with a download button under each piece (Photos & Personal Branding) */
.strip.wide .card { width: 170px; }
.card.dl { gap: 8px; }
.cardlink { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.cardacts { display: flex; gap: 6px; }
.btn.mini { min-height: 40px; padding: 0 10px; font-size: 13px; border-radius: 10px; gap: 6px; flex: 1; }
.btn.mini.icon { flex: none; width: 40px; padding: 0; color: var(--brand); }
.btn.mini svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .strip.wide .card { width: 210px; } }

/* every card in a row is the same height, so the Download buttons line up */
.strip { align-items: stretch; }
.card.dl { display: flex; flex-direction: column; }
.card.dl .cardlink { flex: 1; }
/* Post on day under a piece's name (set on the piece in Design) */
.postday { display: block; font-size: 12px; font-weight: 700; color: var(--brand); margin-top: 2px; }
.postday.today { color: #fff; background: var(--brand); border-radius: 999px; padding: 2px 8px; width: max-content; }
.postday.past { color: var(--muted); font-weight: 600; }
.card.dl .ttl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card.dl .cardacts { margin-top: auto; }

/* darker, easier-to-see scroll bars on the sideways rows */
.strip, .chips { scrollbar-width: thin; scrollbar-color: #6B6865 #DDD9D3; }
.strip::-webkit-scrollbar, .chips::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-track, .chips::-webkit-scrollbar-track { background: #DDD9D3; border-radius: 999px; }
.strip::-webkit-scrollbar-thumb, .chips::-webkit-scrollbar-thumb { background: #6B6865; border-radius: 999px; }
.strip::-webkit-scrollbar-thumb:hover { background: #3A3836; }
.strip { padding-bottom: 12px; }

/* red download / share buttons under each piece */
.btn.mini { background: var(--brand); border: none; color: #fff; font-weight: 700; letter-spacing: .01em; border-radius: 999px; min-height: 42px; box-shadow: 0 3px 10px rgba(163,12,51,.25); transition: background .15s, transform .1s, box-shadow .15s; }
.btn.mini:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 5px 14px rgba(163,12,51,.32); }
.btn.mini:active { transform: scale(.97); }
.btn.mini.icon { width: 42px; background: #fff; color: var(--brand); border: 1.5px solid #E7C9D1; box-shadow: none; }
.btn.mini.icon:hover { background: var(--tint); color: var(--brand-dark); }
.list .iconbtn { color: var(--brand); }

/* ---------- one button style for the whole site (red pill); anything new picks it up from .btn ---------- */
.btn { border-radius: 999px; border: 1.5px solid #E7C9D1; color: var(--brand); background: #fff; font-weight: 700; transition: background .15s, transform .1s, box-shadow .15s, border-color .15s; }
.btn:hover { background: var(--tint); border-color: var(--brand); color: var(--brand-dark); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(163,12,51,.28); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; box-shadow: 0 6px 18px rgba(163,12,51,.34); }
.btn:disabled { transform: none; }
.iconbtn { border-radius: 999px; }
/* the three area graphics on Home are narrow: Download only, a touch smaller */
.areas .card.dl { gap: 6px; }
.areas .btn.mini.icon { display: none; }
.areas .btn.mini { font-size: 12px; padding: 0 6px; min-height: 38px; }
.areas .btn.mini svg { width: 14px; height: 14px; }
.areas .ttl { min-height: 0 !important; font-size: 12px; }
.dlgrid { align-items: stretch; }

/* ---------- phones: top bar with the three-line menu (replaces the bottom tab bar) ---------- */
.frame { padding-bottom: calc(12px + var(--safe-b)); }
.tabs { display: none !important; }
.homehead .row1 { display: none; }
.mbar { position: sticky; top: 0; z-index: 30; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--safe-t)) 10px 8px 20px; min-height: 60px; border-bottom: 1px solid #2C2B2D; }
.mbar .mlogo { display: flex; align-items: center; min-height: 44px; }
.mbar .mlogo img { width: 124px; height: auto; display: block; }
.menubtn { width: 48px; height: 48px; border-radius: 12px; border: none; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.menubtn:hover, .menubtn:focus-visible { background: rgba(255,255,255,.1); }
.homehead { padding-top: 22px; }
.pagehead { padding-top: 20px; }
.piece .top { padding-top: 14px; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(15,15,16,.55); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(86vw, 340px); background: var(--ink); color: #fff; display: flex; flex-direction: column; padding: calc(10px + var(--safe-t)) 14px calc(18px + var(--safe-b)); transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; box-shadow: -10px 0 30px rgba(0,0,0,.3); }
.drawer.in { transform: none; }
.drawer .dhead { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 8px; }
.drawer .dhead img { width: 120px; height: auto; }
.dwho { display: flex; align-items: center; gap: 12px; padding: 14px 8px 16px; border-bottom: 1px solid #2C2B2D; margin-bottom: 8px; }
.dwho b { display: block; font-size: 15px; }
.dwho span span { font-size: 12px; color: var(--muted-dark); }
.dlinks { display: flex; flex-direction: column; gap: 4px; }
.dlinks a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 12px; color: var(--on-dark); text-decoration: none; font-size: 16px; font-weight: 600; }
.dlinks a:hover { background: rgba(255,255,255,.07); color: #fff; }
.dlinks a.on { background: var(--brand); color: #fff; }
.dlinks .mi { display: inline-flex; width: 24px; justify-content: center; }
.dlinks .ml { flex: 1; }
.dnew { font-size: 11px; font-weight: 700; background: var(--brand); color: #fff; border-radius: 999px; padding: 3px 8px; }
.dlinks a.on .dnew { background: #fff; color: var(--brand); }
.dfoot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--muted-dark); text-align: center; }
.dfoot .btn { background: transparent; color: #fff; border-color: #4A4845; }
.dfoot .btn:hover { background: rgba(255,255,255,.07); border-color: #fff; color: #fff; }
body.menu-open { overflow: hidden; }
.toast { bottom: calc(24px + var(--safe-b)); }
@media (min-width: 900px) {
  .mbar, .drawer, .scrim { display: none !important; }
  .homehead { padding-top: 36px; }
  .pagehead { padding-top: 32px; }
  .piece .top { padding-top: 24px; }
}
.menubtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* a tighter home header on phones */
.homehead { padding-top: 12px; padding-bottom: 20px; }
.homehead .wrap { gap: 14px; }
@media (min-width: 900px) { .homehead { padding-top: 32px; padding-bottom: 32px; } }

/* video cards: the whole frame shows on a dark background, whatever the shape */
.thumb .vthumb { object-fit: contain; background: #111; }
.thumb:has(.vthumb) { background: #111; }
.vtag { position: absolute; right: 8px; bottom: 8px; background: rgba(15,15,16,.82); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 4px 7px; letter-spacing: .02em; }
.thumb .play { box-shadow: 0 4px 14px rgba(0,0,0,.35); }

/* pull-to-refresh circle */
.ptr { position: fixed; left: 50%; top: calc(14px + var(--safe-t)); z-index: 60; width: 40px; height: 40px; margin-top: -60px; border-radius: 50%; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); transform: translate(-50%, 0); transition: transform .2s; opacity: 0; pointer-events: none; }
.ptr.on { opacity: 1; transition: none; }
.ptr.ready { background: var(--brand); color: #fff; }

/* grey see-through spinner at the top while updating */
.topspin { position: fixed; left: 50%; top: calc(74px + var(--safe-t)); z-index: 60; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: rgba(60,58,56,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; pointer-events: none; }
.topspin::after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.95); animation: spin .8s linear infinite; }
body.updating .topspin { display: flex; }
@media (min-width: 900px) { .topspin { top: 84px; } }

/* ---------- Make a video ---------- */
.vlist { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.vrow, .vhome { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 16px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.vhome { border: 1px solid var(--line); }
.vhome b, .vrow b { display: block; font-size: 15px; }
.vhome span span, .vrow small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vic { width: 42px; height: 42px; border-radius: 12px; background: var(--tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.vtx { flex: 1; min-width: 0; }
.vchev { margin-left: auto; color: var(--field); display: flex; }
.vpill { display: inline-block; font-size: 10.5px; font-weight: 700; background: #E3F4EA; color: #1E6B41; border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.vnarrow { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.vtips { background: var(--card); border-radius: 16px; padding: 4px 16px; }
.vtip { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vtip:last-child { border: none; }
.vti { width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.vtip b { display: block; font-size: 14.5px; }
.vtip span span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.vtip .vbrows { display: flex; gap: 6px; margin-top: 8px; }
.vtip .vbrows i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink); background: var(--tint); border-radius: 999px; padding: 3px 10px; }
.vlight { font-size: 12.5px; color: #8C8984; line-height: 1.45; margin: 0 6px; }
.vreview { width: 100%; max-height: 62vh; border-radius: 16px; background: #000; }
.vsend span { font-size: 13px; color: var(--muted); }
.vbar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 6px 0; }
.vbar i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
/* full-screen camera */
body.vcam-on { overflow: hidden; }
.vcam { position: fixed; inset: 0; background: #000; z-index: 50; overflow: hidden; }
#vcanvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.vguide { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(88%, 400px); height: 62vh; fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 10 8; opacity: .85; pointer-events: none; }
.vprompt { position: absolute; top: calc(var(--safe-t) + 46px); left: 12px; right: 12px; height: 30vh; overflow: hidden; background: rgba(20,20,22,.72); border-radius: 18px; padding: 16px 18px; color: #fff; line-height: 1.4; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); }
.vpin { will-change: transform; padding-top: calc(30vh - 32px - 2.9em); }
.vlens { position: absolute; z-index: 2; top: calc(var(--safe-t) + 14px); left: 50%; transform: translateX(-50%); font-size: 11px; color: #fff; background: var(--brand); padding: 4px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.vchip { position: absolute; top: calc(var(--safe-t) + 46px + 30vh + 12px); left: 50%; transform: translateX(-50%); background: rgba(20,20,22,.7); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.vchip.good { background: rgba(27,122,67,.92); }
.vchip.rec { background: #E5243B; }
.vchip.bad { background: var(--brand); white-space: normal; text-align: center; width: 80vw; }
.vcount { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 800; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.vtime { position: absolute; bottom: calc(var(--safe-b) + 118px); left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vclose { position: absolute; top: calc(var(--safe-t) + 10px); right: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; }
.vctl { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 24px); display: flex; justify-content: space-around; align-items: center; }
.vrec { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: none; display: grid; place-items: center; padding: 0; }
.vrec i { width: 58px; height: 58px; border-radius: 50%; background: #E5243B; transition: all .15s; }
.vrec.on i { width: 30px; height: 30px; border-radius: 8px; }
.vsm { background: none; border: none; color: #fff; font-size: 12px; font-weight: 700; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vsm span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 15px; }
.vcount[hidden], .vtime[hidden] { display: none; }
/* Office fun: idea cards on the back camera */
.vtabs { display: flex; gap: 24px; border-bottom: 1px solid #D9D6D1; margin: 0 0 16px; max-width: 640px; }
.vtabs a { padding: 10px 1px 11px; font-size: 15px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; }
.vtabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--brand); }
.vrow.videa { border-left: 5px solid var(--c, var(--brand)); }
.vrow.videa .vic { color: var(--c, var(--brand)); }
.vihero { background: linear-gradient(135deg, #7E0A28, #A30C33 60%, #C2224B); color: #fff; border-radius: 18px; padding: 18px; }
.vihero .k { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.vihero h1 { font-size: 22px; font-weight: 800; margin: 6px 0 8px; line-height: 1.2; }
.vihero p { font-size: 13.5px; line-height: 1.4; margin: 0; opacity: .92; }
.vimeta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vimeta span { background: rgba(255,255,255,.18); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.vilab { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin: 4px 0 -4px; }
.vishot { background: var(--card); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.vishot i { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; font-style: normal; flex: none; }
.vishot b { display: block; font-size: 14.5px; }
.vishot span span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.viok { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; background: var(--card); border-radius: 14px; padding: 12px 14px; border: 1.5px solid transparent; transition: border-color .2s; }
.viok input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; flex: none; }
.viok.want { border-color: var(--brand); }
.btn.off { opacity: .45; }
.vcam.back #vcanvas { transform: none; }
.vprompt.fun { height: auto; -webkit-mask-image: none; mask-image: none; }
.vfun b { display: block; font-size: 20px; line-height: 1.25; margin: 6px 0 4px; }
.vfun span { display: block; font-size: 14px; font-weight: 500; opacity: .85; line-height: 1.4; }
.vcam .vprompt.fun ~ .vchip { top: auto; bottom: calc(var(--safe-b) + 150px); }

.vpill.re { background: #FBE3E8; color: var(--brand); }
.vpill.test { background: #FFF4DB; color: #8A5A00; }
.vre { display: flex; align-items: center; gap: 12px; background: #FBE3E8; border: 1.5px solid var(--brand); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; color: var(--ink); text-decoration: none; }
.vre .vic { background: var(--brand); color: #fff; }
.vre b { display: block; font-size: 15px; }
.vre span span { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; margin-top: 2px; }

.vnote { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.vnote i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.vnote i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand); animation: vpulse 1.8s ease-out infinite; }
.vnote u { text-decoration: none; color: #1E8A4F; font-weight: 700; }
@keyframes vpulse { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vnote i::after { animation: none; } }
.vnblk { padding-bottom: 0 !important; }
.vnblk .vnote { margin-top: 0; }
.vnote u { white-space: nowrap; }

/* computers: show the camera as a tall phone-shaped frame in the middle of the screen (the recording is tall either way) */
@media (min-aspect-ratio: 3/4) {
  body.vcam-on::before { content: ''; position: fixed; inset: 0; background: #111; z-index: 49; }
  .vcam { left: 50%; right: auto; width: calc(100dvh * 9 / 16); transform: translateX(-50%); }
}

.viewas { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 14px; background: #1A1A1C; color: #fff; font-size: 13.5px; padding: 9px 16px; }
.viewas b { color: #fff; } .viewas span { color: #D8D6D2; }
.viewas button { font: inherit; font-size: 12.5px; font-weight: 700; color: #1A1A1C; background: #fff; border: none; border-radius: 999px; padding: 4px 12px; cursor: pointer; }

/* the new hire's own welcome post on home */
.wp { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.wp-pic { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(26,26,28,.12); background: #000; aspect-ratio: 4 / 5; }
.wp-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wp-r { display: flex; flex-direction: column; gap: 10px; }
.wp-caps { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.wp-caps .chip { min-width: 34px; justify-content: center; }
.wp-caps .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.wp-cap { background: #fff; border: 1.5px solid var(--field); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.wp-r .link { align-self: flex-start; margin-top: 2px; }
@media (max-width: 640px) { .wp { grid-template-columns: 1fr; } .wp-pic { max-width: 340px; } }

/* first sign-in welcome */
.intro { position: fixed; inset: 0; z-index: 100; background: radial-gradient(120% 90% at 50% 0%, #2C2B2D 0%, #1A1A1C 60%); color: #fff; display: flex; align-items: center; justify-content: center; padding: calc(32px + var(--safe-t)) 28px calc(32px + var(--safe-b)); opacity: 0; transition: opacity .6s ease; }
.intro.on { opacity: 1; } .intro.now { transition: none; } .intro.now.out { transition: opacity .6s ease; } .intro.out { opacity: 0; }
.in-wrap { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.in-logo { width: 190px; height: auto; margin-bottom: 18px; transform: translateX(-14.1%); }
.in-hi { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E5486E; }
.intro h1 { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 800; }
.intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-dark); max-width: 420px; }
.in-cv { margin-top: 34px; width: 100%; border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 190px; }
.in-lab { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.in-val { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; min-height: 92px; }
.in-val.show { opacity: 1; transform: none; }
.in-val b { font-size: 26px; font-weight: 800; }
.in-val span { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.in-dots { display: flex; gap: 8px; } .in-dots i { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); transition: background .3s; } .in-dots i.on { background: var(--brand); }
.in-skip { margin-top: 18px; background: none; border: none; color: var(--muted-dark); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .intro, .in-val { transition: none; } }
/* recording a script in parts */
.vprompt.parts { -webkit-mask-image: linear-gradient(#000 0, #000 54px, transparent 54px, #000 calc(54px + 22%)); mask-image: linear-gradient(#000 0, #000 54px, transparent 54px, #000 calc(54px + 22%)); }
.vprompt.parts .vpin { padding-top: calc(30vh - 32px - 2.9em - 46px); }
.vsegs { display: flex; gap: 5px; margin-bottom: 9px; }
.vsegs i { flex: 1; height: 5px; border-radius: 3px; }
.vplab { font-size: 11px; letter-spacing: .12em; font-weight: 800; margin-bottom: 6px; }
.vprompt .vplab { font-size: 11px; }
.vsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #fff; color: var(--ink); border-radius: 24px 24px 0 0; padding: 18px 18px calc(var(--safe-b) + 20px); display: flex; flex-direction: column; gap: 10px; }
.vsh-top { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.vsh-top video { width: 70px; height: 92px; object-fit: cover; border-radius: 12px; background: #000; transform: scaleX(-1); flex: none; }
.vsh-top b { display: block; font-size: 17px; }
.vsh-top span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.vpart { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 14px; padding: 10px 12px; border-left: 5px solid; }
.vpart video { width: 46px; height: 60px; object-fit: cover; border-radius: 8px; background: #000; flex: none; }
.vpart b { display: block; font-size: 15px; }
.vpart small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.vpart small em { font-style: normal; color: #1E8A4F; font-weight: 800; }
.vredo { margin-left: auto; background: none; border: none; color: var(--brand); font-weight: 700; font-size: 14px; padding: 8px; }

/* ---------- pop-up from Marketing (Publish › Pop-ups in Stewart Marketing Tools) ---------- */
.mmpop-bg { position: fixed; inset: 0; z-index: 90; background: rgba(26,26,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: popfade .25s ease; }
.mmpop { outline: none; position: relative; background: #fff; border-radius: 18px; max-width: 420px; width: 100%; padding: 26px 26px 22px 30px; box-shadow: 0 20px 50px rgba(0,0,0,.28); overflow: hidden; }
.mmpop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brand); }
.mmpop .x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--paper); color: #4A4845; display: flex; align-items: center; justify-content: center; }
.mmpop .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mmpop .ey { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--brand); text-transform: uppercase; margin-bottom: 10px; }
.mmpop h2 { margin: 0 40px 8px 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.mmpop .ey.from { display: flex; align-items: center; gap: 10px; margin-right: 44px; }
.mmpop .ey .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; flex: none; }
.mmpop:has(.vid) { max-width: 560px; }
.mmpop .vid { display: block; width: 100%; max-height: 46vh; aspect-ratio: 16 / 9; object-fit: contain; background: #1A1A1C; border-radius: 12px; margin: 0 0 16px; }
.mmpop .ey + .vid { margin-top: 14px; }
.mmpop p { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: #4A4845; font-weight: 500; }
body.pop-open { overflow: hidden; }
@keyframes popfade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 600px) {
  .mmpop-bg { align-items: flex-end; padding: 0; }
  .mmpop { max-width: none; border-radius: 20px 20px 0 0; padding: 26px 22px calc(26px + var(--safe-b)) 28px; animation: popup .3s ease; }
}
@keyframes popup { from { transform: translateY(40px); } to { transform: none; } }

/* ---------- Buttons: A2 "Gradient shine" pills, the standard look for every button (Oct 18) ---------- */
.btn { border-radius: 999px; padding-left: 20px; padding-right: 20px; border: 1.5px solid var(--ink); color: var(--ink); background: linear-gradient(180deg, #FFFFFF 0%, #F2F1EF 100%); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(26,26,28,.12); transition: box-shadow .15s, background .15s, transform .1s; }
.btn:hover:not(:disabled) { box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(26,26,28,.16); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #C2133F 0%, #A30C33 55%, #7E0A28 100%); border-color: #7E0A28; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 12px rgba(163,12,51,.32); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #B01038 0%, #8F0A2D 55%, #6A0821 100%); border-color: #6A0821; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 6px 16px rgba(163,12,51,.38); }
.btn:disabled { box-shadow: none; }
.btn.primary:disabled { background: var(--brand); border-color: var(--brand); }
.btn:not(.primary):not(.mini):hover { background: linear-gradient(180deg, #FFFFFF 0%, #E9E7E3 100%); border-color: var(--ink); color: var(--ink); }
.btn.mini:not(.icon) { background: linear-gradient(180deg, #C2133F 0%, #A30C33 55%, #7E0A28 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px rgba(163,12,51,.3); }
.btn.mini:not(.icon):hover { background: linear-gradient(180deg, #B01038 0%, #8F0A2D 55%, #6A0821 100%); }
.btn.mini.icon { background: linear-gradient(180deg, #FFFFFF 0%, #F2F1EF 100%); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(26,26,28,.12); }
.btn.mini.icon:hover { background: linear-gradient(180deg, #FFFFFF 0%, #E9E7E3 100%); color: var(--ink); }
.dfoot .btn { background: transparent; box-shadow: none; color: #fff; border-color: #4A4845; }
.dfoot .btn:not(.primary):hover { background: rgba(255,255,255,.07); border-color: #fff; color: #fff; }

/* PDFs show their first page (pdfthumb.js) */
.doc.pdf-ready { position: relative; padding: 0; }
.doc.pdf-ready > img.pdf-page { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.piece .media .doc.pdf-ready > img.pdf-page { object-fit: contain; background: #fff; }
.doc.pdf-ready > svg, .doc.pdf-ready > span { display: none; }
.doc.pdf-ready > .btn { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); margin: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.25); }


/* ---------- My Contacts (contacts.js) ---------- */
.ct { --top: #A30C33; --some: #C98A1B; --some-t: #FBF2E1; --not: #8E8A85; --not-t: #EFEDEA; --green: #1B7A43; --green-t: #E3F1E8; --warn: #FFF4CC; --warn-b: #E8C547; }
.ct .card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(26,26,28,.05); }
.ct .edge { position: relative; overflow: hidden; }
.ct .edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--e, var(--brand)); }
.ct .edge.t { --e: var(--top); } .ct .edge.s { --e: var(--some); } .ct .edge.n { --e: var(--not); }
.cthead { background: var(--ink); color: #fff; padding-bottom: 22px; }
.cthead p { color: var(--on-dark); line-height: 1.5; } .cthead p b { color: #fff; }
.cthead p .ctmc { display: block; margin-top: 4px; font-size: 13px; opacity: .85; }
.cth-row { display: flex; flex-direction: column; gap: 16px; }
.cth-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cth-acts > .btn, .cth-acts > .ctm { flex: 1 1 100%; }
.cth-acts > .ctm .btn { width: 100%; }
.cth-acts > .ctm { flex: 1 1 40%; }
@media (max-width: 899px) { .cth-acts > .ctm .btn { white-space: nowrap; font-size: 14px; gap: 7px; padding: 0 12px; } .cth-acts > .ctm .btn > svg:last-child { display: none; } }
.btn.dk { background: linear-gradient(180deg, #3A393B, #2C2B2D); border-color: #555; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn.dk:not(.primary):not(.mini):hover { background: linear-gradient(180deg, #454446, #333234); border-color: #777; color: #fff; }
.btn.sm { min-height: 40px; font-size: 14px; padding: 0 16px; }
.btn.primary.danger, .btn.primary.danger:hover:not(:disabled) { background: linear-gradient(180deg, #D3264B 0%, #B3102F 55%, #8A0A24 100%); }
.link.light { color: #fff; }
.link.danger { color: #B3102F; display: inline-flex; align-items: center; gap: 6px; }
.ctm { position: relative; display: inline-flex; }
.ctmenu { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: calc(100vw - 40px); background: #fff; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 40px rgba(26,26,28,.28); padding: 8px; z-index: 40; }
.ctmenu button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 12px; color: var(--ink); }
.ctmenu button:hover:not(:disabled), .ctmenu button:focus-visible { background: var(--paper); }
.ctmenu button:disabled { opacity: .5; cursor: default; }
.ctmenu svg { color: var(--brand); margin-top: 2px; }
.ctmenu b { display: block; font-size: 14px; } .ctmenu span span { font-size: 12px; color: var(--muted); }
.ctmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 8px; }
.ctmain { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
/* phones: the hot list first, then the contacts, then the rest */
.ctside { display: contents; } .ctside .hot { order: 0; } .ctl { order: 1; } .ctside .fixcard { order: 2; } .ctside .lvcard { order: 3; }
.ctside .card { padding: 20px; }
.ctside h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ctside p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ctside .hot { background: var(--ink); color: #fff; } .ctside .hot p { color: var(--on-dark); } .ctside .hot h3 svg { color: #B3ADA6; }
.ctside .hot .btn:disabled { background: transparent; color: var(--on-dark); border-color: #555; opacity: .7; }
.fixcard h3 svg { color: var(--green); }
.fix { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.fix b { font-size: 18px; color: var(--brand); min-width: 22px; } .fix .link { margin-left: auto; font-weight: 700; }
.meter { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 12px 0 10px; background: var(--line); }
.meter i { display: block; } .meter i.t, .leg i.t { background: var(--top); } .meter i.s, .leg i.s { background: var(--some); } .meter i.n, .leg i.n { background: var(--not); }
.leg { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.leg span { display: flex; align-items: center; gap: 8px; } .leg span i { width: 10px; height: 10px; border-radius: 3px; } .leg span b { margin-left: auto; }
.lvnote { margin: 12px 0 0 !important; font-size: 12px !important; }
.cttabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cttabs button { background: none; border: 0; padding: 4px 0 12px; font-weight: 600; color: var(--muted); font-size: 14px; white-space: nowrap; min-height: 44px; }
.cttabs button.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--brand); }
.cttabs em { font-style: normal; color: var(--muted-dark); font-weight: 600; margin-left: 5px; }
.ctbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.ctsrch { flex: 1 1 100%; min-height: 46px; }
.ctpick { position: relative; display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1.5px solid var(--field); border-radius: 999px; padding: 0 12px 0 14px; min-height: 42px; font-size: 13px; font-weight: 600; flex: 1; }
.ctpick span { color: var(--muted); }
.ctpick select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); padding: 0 18px 0 2px; flex: 1; min-height: 40px; cursor: pointer; }
.ctpick svg { position: absolute; right: 12px; pointer-events: none; }
.cthd { display: none; }
.ctrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nm lv" "cc cc"; gap: 6px 12px; align-items: center; background: #fff; border-radius: 12px; padding: 12px 14px 12px 18px; margin-bottom: 8px; cursor: pointer; }
.ctrow.ro { cursor: default; }
.ctrow:hover:not(.ro):not(.rm) { box-shadow: 0 3px 10px rgba(26,26,28,.08); }
.ctrow:focus-visible { outline: 3px solid rgba(163,12,51,.3); }
.ctrow .av, .ctrow .ty, .ctrow .ac { display: none; }
.ctrow .nm { grid-area: nm; display: flex; flex-direction: column; min-width: 0; }
.ctrow .nm b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrow .nm span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrow .lv { grid-area: lv; }
.ctrow .cc { grid-area: cc; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #4A4845; min-width: 0; }
.ctrow .cc span { display: flex; gap: 7px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrow .cc svg { color: var(--brand); flex: none; }
.ctrow .cc .none { color: var(--muted-dark); font-style: italic; }
.ctrow .cc .bad { color: #B3102F; } .ctrow .cc em { font-style: normal; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.av { width: 38px; height: 38px; border-radius: 50%; background: #ECEAE6; color: #4A4845; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.lvl, .lvlsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.lvl::before, .lvlsel::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lvl.t, .lvlsel.t { background: var(--tint); color: var(--brand); } .lvl.s, .lvlsel.s { background: var(--some-t); color: #8A5C0E; } .lvl.n, .lvlsel.n { background: var(--not-t); color: #55524E; }
.lvlsel { position: relative; padding: 0 10px; min-height: 32px; cursor: pointer; }
.lvlsel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: 6px 16px 6px 0; cursor: pointer; min-height: 32px; }
.lvlsel select:focus-visible { outline: none; } .lvlsel:focus-within { box-shadow: 0 0 0 3px rgba(163,12,51,.25); }
.lvlsel svg { position: absolute; right: 9px; pointer-events: none; }
.dots { display: inline-flex; gap: 4px; } .dots i { width: 10px; height: 10px; border-radius: 3px; background: #E4E1DC; }
.dots i.o { background: #B3ADA6; } .dots i.c { background: var(--brand); } .dots i.x { background: transparent; border: 1.5px dashed #E4E1DC; }
.ctkey { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 10px; }
.ctkey span { display: inline-flex; gap: 6px; align-items: center; }
.ctmore { margin-top: 6px; }
.ctremoved { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); }
.fixbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: #fff; border-radius: 12px; padding: 12px 14px 12px 18px; }
.fixbar b { font-size: 15px; } .fixbar span { font-size: 13px; color: var(--muted); flex: 1 1 260px; } .fixbar .link { font-weight: 700; }
/* empty list: the ways to start */
.ctempty h2 { margin: 6px 0 4px; font-size: 22px; font-weight: 800; } .ctempty > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.ctopts { display: grid; gap: 10px; }
.ctopt { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; color: var(--ink); position: relative; overflow: hidden; }
.ctopt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.ctopt:hover { border-color: var(--field); box-shadow: 0 4px 12px rgba(26,26,28,.08); }
.ctopt .oi { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.ctopt b { display: block; font-size: 15px; margin-bottom: 3px; } .ctopt span span { font-size: 13px; color: var(--muted); line-height: 1.45; }
/* one contact */
.ctform, .ctread { margin-top: 14px; }
.ctform { padding: 20px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.ctform .two { display: grid; grid-template-columns: 1fr; gap: 12px; } .ctform .two.keep { grid-template-columns: 1fr 1fr; }
.fl { display: block; background: #fff; border: 1.5px solid var(--field); border-radius: 12px; padding: 7px 12px 4px; }
.fl:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(163,12,51,.18); }
.fl small { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.fl input { display: block; width: 100%; border: 0; outline: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); padding: 4px 0 6px; background: transparent; }
.ctform .lab { font-size: 13px; font-weight: 800; margin-top: 4px; }
.ctchips { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #E4E1DC; border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; padding: 10px 4px; border-radius: 9px; color: #4A4845; min-height: 44px; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg button.on.t { box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 -3px 0 var(--top); } .seg button.on.s { box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 -3px 0 var(--some); } .seg button.on.n { box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 -3px 0 var(--not); }
.ctfacts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.ctfacts .btn { flex: 1 1 100%; } .ctfacts .link.danger { margin: 4px auto 0; }
.minicard { display: flex; gap: 12px; align-items: center; background: var(--paper); border-radius: 12px; padding: 8px; }
.minicard img { width: 96px; height: 58px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.minicard .ok { font-size: 13px; color: var(--green); font-weight: 700; display: flex; gap: 5px; align-items: center; } .minicard .link { margin-left: auto; cursor: pointer; }
.ctwarn { display: flex; gap: 8px; align-items: flex-start; background: var(--warn); color: #7A5B00; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; box-shadow: inset 4px 0 0 var(--warn-b); }
.ctread { padding: 22px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.ctread .cardprev { width: 100%; max-width: 360px; border-radius: 10px; align-self: center; }
.readmsg { display: flex; gap: 10px; align-items: center; justify-content: center; font-weight: 700; padding: 10px; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 2px dashed var(--field); border-radius: 14px; padding: 28px 16px; color: var(--muted); font-size: 13px; cursor: pointer; background: #fff; }
.drop svg { color: var(--brand); } .drop b { color: var(--ink); font-size: 15px; }
.drop:hover, .drop.over { border-color: var(--brand); background: var(--tint); }
.drop.sm { padding: 16px; flex-direction: row; justify-content: center; gap: 8px; }
.ctread .or { text-align: center; position: relative; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.ctread .or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.ctread .or span { position: relative; background: #fff; padding: 0 10px; }
.ctread textarea { width: 100%; font: inherit; font-size: 15px; border: 1.5px solid var(--field); border-radius: 12px; padding: 12px; resize: vertical; }
.ctread textarea:focus { outline: 3px solid rgba(163,12,51,.2); border-color: var(--brand); }
.ctread .tips { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; } .ctread .tips b { color: var(--ink); }
/* checking what was read */
.ctrev { display: flex; flex-direction: column; gap: 18px; padding-top: 14px; }
.shots { display: flex; flex-direction: column; gap: 12px; }
.shots h3 { margin: 0; font-size: 15px; font-weight: 800; } .shots p { margin: 0; font-size: 13px; color: var(--muted); }
.shots { flex-direction: row; flex-wrap: wrap; } .shots h3, .shots p, .shots .drop { flex: 1 1 100%; }
.shot { position: relative; width: 104px; background: #fff; border-radius: 12px; padding: 6px; border: 1.5px solid var(--line); box-shadow: 0 4px 12px rgba(26,26,28,.06); }
.shot img, .shot .ph { display: block; width: 100%; height: 120px; object-fit: cover; object-position: top; border-radius: 6px; background: var(--paper); }
.shot .st { position: absolute; right: 6px; bottom: 6px; background: var(--paper); color: #4A4845; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; display: flex; gap: 4px; align-items: center; }
.shot .st .spin { width: 11px; height: 11px; border-width: 2px; }
.shot .st.done { background: var(--green-t); color: var(--green); } .shot .st.err { background: var(--tint); color: var(--brand); }
.shot .serr { display: block; font-size: 11px; color: var(--brand); margin-top: 4px; line-height: 1.35; }
.filebox { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 14px; flex: 1 1 100%; } .filebox svg { color: var(--brand); } .filebox b { font-size: 14px; word-break: break-all; }
.rtbl { padding: 16px; }
.sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pill { border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.pill.g { background: var(--green-t); color: var(--green); } .pill.y { background: var(--warn); color: #7A5B00; } .pill.m { background: var(--paper); color: #4A4845; }
.pill .spin { width: 13px; height: 13px; border-width: 2px; }
.setall { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 13px; font-weight: 600; margin: 0 0 12px; color: #4A4845; } .setall > span:last-child { color: var(--muted); font-weight: 500; }
.rtbl .th { display: none; }
.rtbl .tr { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 6px 8px; align-items: center; padding: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.rtbl .tr > span:first-child { grid-row: span 4; align-self: start; padding-top: 8px; }
.rtbl .tr > .cell[data-f=email] { grid-column: 2 / -1; } .rtbl .tr .rlv { grid-column: 2 / -1; }
.rtbl .tr .nmc { grid-column: 2 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rtbl .tr input[type=checkbox], .rtbl .th input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.cell { width: 100%; min-width: 0; font: inherit; font-size: 14px; border: 1.5px solid transparent; border-radius: 8px; padding: 7px 8px; background: var(--paper); color: var(--ink); }
.nmc .cell { font-weight: 700; }
.cell:focus { outline: 0; border-color: var(--brand); background: #fff; }
.cell::placeholder { color: var(--brand); opacity: .75; font-weight: 600; }
.rtbl .tr.w { background: var(--warn); border-radius: 10px; border-top-color: transparent; box-shadow: inset 4px 0 0 var(--warn-b); }
.rtbl .tr.w .cell { background: rgba(255,255,255,.7); }
.rtbl .tr.dup { background: var(--paper); border-radius: 10px; } .rtbl .tr.dup .cell { background: #fff; }
.rtbl .tr .msg { grid-column: 2 / -1; display: flex; gap: 7px; align-items: center; font-size: 12.5px; font-weight: 600; color: #7A5B00; } .rtbl .tr .msg.m { color: #4A4845; }
.rfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rfoot .note { font-size: 13px; color: var(--muted); flex: 1 1 100%; } .rfoot .btn { flex: 1; }
/* removed */
.rmall { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
.ctrow.rm { --e: var(--not); grid-template-areas: "nm nm" "rmd rma"; cursor: default; }
.ctrow.rm .rmd { grid-area: rmd; font-size: 12px; color: var(--muted); white-space: nowrap; } .ctrow.rm .rma { grid-area: rma; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.warnpop::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #B3102F; }
.warnpop .ic { background: #FDE8EC !important; color: #B3102F !important; }
.warnpop h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.warnpop .wacts { display: flex; gap: 10px; } .warnpop .wacts .btn { flex: 1; white-space: nowrap; padding: 0 14px; }
@media (min-width: 900px) {
  .cthead { padding-bottom: 30px; }
  .cth-row { flex-direction: row; align-items: flex-end; gap: 24px; }
  .cth-row > div:first-child { flex: 1; }
  .cth-acts { flex-wrap: nowrap; } .cth-acts > .btn, .cth-acts > .ctm { flex: none; } .cth-acts .btn { min-height: 46px; font-size: 14px; }
  .ctmain { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; padding-top: 26px; }
  .ctl { order: 0; }
  .ctside { order: 1; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; }
  .ctform, .ctread { margin-top: 26px; }
  .ctsrch { flex: 1; } .ctpick { flex: none; }
  .cthd, .ctrow:not(.rm) { grid-template-columns: 38px minmax(0, 1.3fr) 70px minmax(0, 1.6fr) 92px 150px; grid-template-areas: none; gap: 16px; }
  .cthd.nores, .ctrow.nores { grid-template-columns: 38px minmax(0, 1.3fr) 70px minmax(0, 1.6fr) 150px; }
  .cthd { display: grid; padding: 0 18px 8px 22px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .ctrow:not(.rm) { padding: 12px 18px 12px 22px; }
  .ctrow .av, .ctrow .ty, .ctrow .ac { display: inline-flex; }
  .ctrow .nm, .ctrow .lv, .ctrow .cc { grid-area: auto; }
  .ctrow .ty { font-size: 13px; font-weight: 600; color: #4A4845; }
  .ctrow.rm { grid-template-columns: 38px 1fr auto auto; grid-template-areas: none; gap: 16px; }
  .ctrow.rm .nm, .ctrow.rm .rmd, .ctrow.rm .rma { grid-area: auto; }
  .ctopts { grid-template-columns: repeat(3, 1fr); }
  .ctform { padding: 28px; } .ctform .two { grid-template-columns: 1fr 1fr; }
  .ctfacts .btn { flex: none; } .ctfacts .link.danger { margin: 0 0 0 auto; }
  .ctrev { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; padding-top: 26px; }
  .shots { flex-direction: column; flex-wrap: nowrap; } .shot { width: 100%; } .shot img, .shot .ph { height: 160px; }
  .rtbl { padding: 22px; }
  .rtbl .th, .rtbl .tr { grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 1fr) 128px minmax(0, 1.5fr) 138px; gap: 8px; }
  .rtbl .tr > .cell[data-f=email], .rtbl .tr .rlv { grid-column: auto; }
  .rtbl .cell { font-size: 13px; padding: 7px 6px; }
  .rtbl .th { display: grid; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; padding: 0 10px 8px; align-items: center; }
  .rtbl .tr > span:first-child { grid-row: auto; align-self: center; padding: 0; }
  .rtbl .tr .nmc { grid-column: auto; }
  .rfoot .note { flex: 1; } .rfoot .btn { flex: none; }
}
.ct .ctcols { --e: var(--brand); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px 20px; margin-bottom: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ct .ctcols > b { font-size: 14px; color: var(--ink); }
.ct .ctcols .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ct .ctcols .lab { width: 64px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ct .ctcols .chip { display: inline-block; height: auto; min-height: 0; line-height: 1.4; border: 0; padding: 3px 10px; border-radius: 999px; background: var(--paper); color: var(--ink2); font-weight: 600; font-size: 12.5px; }
.ct .ctcols .chip.need { background: var(--tint); color: var(--brand); box-shadow: inset 0 0 0 1px rgba(163,12,51,.25); }
.ct .ctcols p { margin: 2px 0 0; color: var(--muted); line-height: 1.5; }
.ct .ctblank { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; }

/* ---------- Your add-in ---------- */
.ad .card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(26,26,28,.05); }
.ad .edge { position: relative; overflow: hidden; }
.ad .edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--e, var(--brand)); z-index: 1; }
.ad .body .wrap { display: flex; flex-direction: column; gap: 18px; padding-bottom: 30px; }
.ad-empty { background: #fff; border-radius: 16px; padding: 22px; color: var(--muted); font-size: 15px; }
/* Your add-in: one row per Monday (date · the add-in · Change), and the sheet to pick one */
.la-list { display: flex; flex-direction: column; gap: 12px; }
.la-row { display: grid; grid-template-columns: 86px 1fr auto; gap: 18px; align-items: center; padding: 14px 18px 14px 22px; }
.la-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--paper); border-radius: 14px; height: 86px; }
.la-date small { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--brand); }
.la-date b { font-size: 26px; font-weight: 800; line-height: 1.1; }
.la-date span { font-size: 12px; font-weight: 700; color: var(--muted); }
.la-ai { display: flex; gap: 16px; align-items: center; min-width: 0; }
.la-ai img, .la-ai .blank { width: 150px; height: 86px; object-fit: cover; border-radius: 10px; flex: none; background: var(--paper); }
.la-ai .blank { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.la-ai b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.la-ai span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.la-ai span.set { color: var(--brand); }
.la-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.la-act small { font-size: 12px; color: var(--muted); }
.la-chg { min-height: 44px; border-radius: 999px; padding: 0 22px; font-weight: 700; background: linear-gradient(180deg, #fff 0%, #F2F1EF 100%); border: 1.5px solid var(--ink); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(26,26,28,.12); }
.ad .la-row.off { background: transparent; box-shadow: none; border: 1.5px dashed #CFCBC5; }
.la-row.off .la-ai .blank { background: transparent; border: 1.5px dashed #CFCBC5; }
.la-sheet-bg { position: fixed; inset: 0; background: rgba(26,26,28,.45); z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.la-sheet { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-width: 720px; padding: 22px 22px 26px; max-height: 88vh; overflow: auto; }
.la-sheet h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.la-sheet p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.la-opt { display: grid; grid-template-columns: 22px 130px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; border: 1.5px solid #CFCBC5; border-radius: 14px; padding: 10px 14px; margin-bottom: 10px; cursor: pointer; }
.la-opt.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.la-opt img { width: 130px; height: 76px; object-fit: cover; border-radius: 9px; }
.la-opt b { display: block; font-size: 15px; font-weight: 800; }
.la-opt span span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.la-rad { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #CFCBC5; }
.la-rad.on { border: 6px solid var(--ink); }
.la-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.la-btns .btn { border-radius: 999px; min-height: 46px; }
@media (min-width: 760px) { .la-sheet-bg { align-items: center; } .la-sheet { border-radius: 20px; } }
@media (max-width: 600px) {
  .la-row { grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 12px 12px 16px; }
  .la-date { height: 72px; } .la-date b { font-size: 22px; }
  .la-ai { gap: 10px; } .la-ai img, .la-ai .blank { width: 96px; height: 64px; } .la-ai b { font-size: 14px; }
  .la-act { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
  .la-opt { grid-template-columns: 22px 90px 1fr; } .la-opt img { width: 90px; height: 56px; }
}

/* ---------- cleanup (Oct 19) ---------- */
/* the whole picture shows on every card, never cropped */
.thumb img { object-fit: contain; object-position: center; background: #fff; }
.areas .thumb { aspect-ratio: 1 / 1; }
/* "NEW" sits right beside its heading; anything after it (See all) stays on the right */
.h2row { justify-content: flex-start; }
.h2row > .badge { margin-right: auto; }
.h2row > .h:only-child, .h2row > .h:first-child:not(:has(+ .badge)) { margin-right: auto; }
/* this week's area pictures: a sideways row on phones, so each one is big enough to see */
.week { grid-template-columns: minmax(0, 1fr); }
.week > div { min-width: 0; }
@media (max-width: 899px) {
  .areas { display: flex; overflow-x: auto; gap: 12px; margin-right: -20px; padding: 0 20px 12px 0; scroll-snap-type: x proximity; scrollbar-width: none; }
  .areas .card { flex: none; width: 170px; scroll-snap-align: start; }
  .areas .btn.mini { font-size: 13px; min-height: 40px; }
  .areas .ttl { font-size: 13px; }
}
@media (min-width: 900px) {
  /* menu labels stay on one line */
  .topbar .wrap { gap: 20px; }
  .topbar nav { gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: 10px 12px; font-size: 14.5px; flex: none; }
  /* no market update video: the area pictures use the whole width */
  .week.novid { grid-template-columns: minmax(0, 1fr); }
  .week .areas { grid-template-columns: repeat(auto-fill, minmax(200px, 230px)); gap: 18px; }
  /* Share buttons are button-sized, not page-wide */
  .share-all.block { width: auto; align-self: flex-start; padding-left: 28px; padding-right: 28px; }
  /* sections on a computer wrap onto more rows instead of scrolling sideways */
  .strip.secrow { flex-wrap: wrap; overflow: visible; gap: 24px 18px; }
  .hint.swipe { display: none; }
  /* small sections sit side by side, so one-piece sections don't leave a whole row empty */
  #results:has(> section) { display: flex; flex-wrap: wrap; column-gap: 44px; align-items: flex-start; }
  #results > nav.chips { flex: 0 0 100%; flex-wrap: wrap; overflow: visible; }
  #results > section { flex: 0 1 auto; max-width: 100%; }
  /* My Contacts: room for the full email */
  .cthd, .ctrow:not(.rm) { grid-template-columns: 38px minmax(0, 1.2fr) 70px minmax(0, 2fr) 92px 150px; }
  .cthd.nores, .ctrow.nores { grid-template-columns: 38px minmax(0, 1.2fr) 70px minmax(0, 2fr) 150px; }
}

/* the small Share button beside Download: light and quiet, so Download stays the main button */
.cardacts .btn.mini.icon { background: #fff; border: 1px solid #DDD9D3; box-shadow: none; color: #6B6966; }
.cardacts .btn.mini.icon:hover:not(:disabled) { background: #F7F5F2; border-color: #CFCBC5; color: var(--brand); box-shadow: none; }
.cardacts .btn.mini.icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
/* light gray secondary button (Open video on this week's market update), same look as the small Share button */
.btn.light-btn { background: #fff; border: 1px solid #DDD9D3; box-shadow: none; color: #4A4845; font-weight: 600; }
.btn.light-btn:hover:not(:disabled) { background: #F7F5F2; border-color: #CFCBC5; color: var(--brand); box-shadow: none; }
@media (min-width: 900px) { .btn.light-btn.block { width: auto; align-self: flex-start; padding-left: 28px; padding-right: 28px; } }

/* someone on a sales team: All / the team / Just me */
.teamtabs { margin-top: 0; }
.homehead .teamtabs .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.homehead .teamtabs .chip.on { background: #fff; color: var(--ink); border-color: #fff; }
.pagehead .teamtabs { margin: 4px 0 8px; }