/* Shared styles for the product pages (AgentStation, AgencyView). Loaded after styles.css. */
/* AgentStation: Insurance Rise grammar (square corners, ink rules, cobalt). The hero is one big product tile: a working desktop with the agency software on the left and the AgentStation panel on the right, playing a real task. */
.ex { font-size: .72rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.prod-tag { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink-2); }
.prod-tag b { font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-size: 1.05rem; }
.prod-tag b i, .as i { font-style: normal; color: var(--acc); }
.prod-tag::before { content: ""; width: 28px; height: 1px; background: var(--acc); }
.as { font-weight: 800; letter-spacing: -.02em; }
.pf b { white-space: normal; }
@media (max-width: 520px) { .pf b { font-size: 1.9rem; } }

/* hero */
.hero2 { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); text-align: center; }
.hero2 .prod-tag { justify-content: center; }
.hero2 h1 { margin: 18px auto 0; max-width: 20ch; font-size: clamp(2.4rem, 5.2vw, 4.3rem); }
.hero2 .lede { margin: 16px auto 0; max-width: 54ch; }
.hero2 .hero-cta { margin-top: 24px; }
.hero2 .tile { margin-top: clamp(28px, 4vw, 44px); }
.hero2 .hero-cta { justify-content: center; }

/* product tile */
.tile { margin-top: clamp(40px, 6vw, 64px); text-align: left; background: var(--bg-2); border: 1px solid var(--line); padding: clamp(10px, 2vw, 22px); }
.screen { display: grid; grid-template-rows: auto 1fr auto; background: #DFE4EA; box-shadow: 0 40px 80px -40px rgba(11,23,48,.45); min-width: 0; overflow: hidden; }
.screen { border-radius: 12px; background: linear-gradient(160deg, #C9D6EA 0%, #DCE3EE 45%, #E9E4EF 100%); padding: 0 0 0; position: relative; }
.win-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: #ECECEC; border-bottom: 1px solid #D9D9D9; font-size: .76rem; border-radius: 12px 12px 0 0; position: relative; }
.win-bar .tl3 { display: flex; gap: 7px; }
.win-bar .tl3 i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.win-bar .ttl { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; color: #4A4F57; white-space: nowrap; }
.win-bar .ttl img { height: 16px; width: auto; }
.win-bar .ttl b { font-weight: 600; color: #222; }
.applogo { background: #fff; padding: 3px 8px; display: inline-flex; align-items: center; margin-right: 4px; }
.applogo img { height: 20px; width: auto; display: block; }
/* carrier wordmarks tinted to their brand color */
.cl { display: inline-block; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cl-prog { --c: #0072CE; --m: url(img/carriers/progressive.png); aspect-ratio: 270 / 31; }
.cl-trav { --c: #D71E28; --m: url(img/carriers/travelers.png); aspect-ratio: 272 / 40; }
.cl-nw { --c: #1C57A5; --m: url(img/carriers/nationwide.png); }
.cl-safe { --c: #1B3F8B; --m: url(img/carriers/safeco.png); }
.cl-hart { --c: #8A1C2B; --m: url(img/carriers/hartford.png); }
.cl-lm { --c: #1A1446; --m: url(img/carriers/liberty-mutual.png); }
/* carrier window AgentStation works in */
.cwin { position: absolute; right: calc(360px + 18px); bottom: 118px; width: 300px; background: #fff; border-radius: 10px; box-shadow: 0 24px 48px -12px rgba(0,0,0,.35); overflow: hidden; z-index: 4; font-size: .76rem; }
.cwin .win-bar { height: 28px; border-radius: 0; }
#cwin { position: static; }
.cwin { z-index: 20; opacity: 1; border: 1px solid #D0D5DB; }
.screen { grid-template-columns: minmax(0, 1fr); }
.dockwrap { overflow: hidden; min-width: 0; }
.cwin .cb { padding: 12px 14px; display: grid; gap: 8px; }
.cwin .cb .cl { height: 16px; }
.cwin .row { display: flex; justify-content: space-between; gap: 8px; color: #5C6670; }
.cwin .row b { color: #14191A; font-weight: 600; }
.cwin .prog { height: 4px; background: #EEF1F0; }
.cwin .prog i { display: block; height: 100%; background: #0072CE; width: 0; animation: pg 2.2s ease forwards; }
@keyframes pg { to { width: 100%; } }
/* macOS dock */
.dockwrap { display: flex; justify-content: center; padding: 10px 0 12px; }
.dock { display: flex; align-items: flex-end; gap: 10px; padding: 7px 10px 6px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.65); border-radius: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px -10px rgba(11,23,48,.35); }
.di { position: relative; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .2s; overflow: hidden; }
.di:hover { transform: translateY(-6px) scale(1.08); }
.di img { width: 80%; height: auto; }
.di .cl { width: 38px; height: 14px; aspect-ratio: auto; }
.di-w { position: relative; display: grid; justify-items: center; gap: 4px; }
.di-w::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(20,25,26,.55); opacity: 0; }
.di-w.on::after { opacity: 1; }
.di-w .lbl { position: absolute; bottom: 62px; white-space: nowrap; background: rgba(30,30,30,.85); color: #fff; font-size: .7rem; padding: 3px 8px; border-radius: 5px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.di-w:hover .lbl { opacity: 1; }
.di.mail { background: linear-gradient(180deg, #4FA8FF, #1673E6); }
.di.phone { background: linear-gradient(180deg, #6DE07A, #22B33B); }
.di.as { background: linear-gradient(160deg, #3B6BFF, #1F4FD8); color: #fff; font-weight: 800; font-size: .95rem; letter-spacing: -.04em; }
.dock .sep { width: 1px; align-self: stretch; margin: 4px 2px 10px; background: rgba(20,25,26,.18); }
/* platforms */
.plat { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; font-size: .9rem; color: var(--ink-2); flex-wrap: wrap; }
.plat span { display: inline-flex; align-items: center; gap: 8px; }
.plat svg { width: 18px; height: 18px; fill: var(--ink); }
.plat i { width: 1px; height: 16px; background: var(--line-2); }
.desk2 { display: grid; grid-template-columns: 1fr 360px; min-height: 470px; min-width: 0; }
.app { display: grid; grid-template-rows: auto 1fr; background: #fff; min-width: 0; }
.app-menu { display: flex; align-items: center; gap: 18px; height: 36px; padding: 0 16px; background: #1F6F8B; color: #fff; font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.app-menu .srch { margin-left: auto; background: rgba(255,255,255,.18); padding: 3px 10px; font-weight: 400; min-width: 150px; }
.app-body { display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.app-nav { background: #F6F7F9; border-right: 1px solid #E1E1E1; padding: 10px 6px; display: grid; gap: 2px; align-content: start; font-size: .8rem; }
.app-nav span { padding: 6px 10px; }
.app-nav span.on { background: #E3EBF2; font-weight: 600; }
.app-main { padding: 18px 22px; min-width: 0; }
.app-main h4 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.app-main .sub { font-size: .78rem; color: #5C6670; margin: 2px 0 14px; }
.frow { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; font-size: .8rem; padding: 5px 0; }
.frow > span { color: #5C6670; }
.fv { position: relative; min-height: 30px; border: 1px solid #B9C0C8; padding: 5px 30px 5px 8px; background: #fff; font-variant-numeric: tabular-nums; transition: background .3s, outline-color .3s; outline: 2px solid transparent; outline-offset: 2px; }
.fv.now { outline-color: var(--acc); }
.fv.warn { background: #FFF6E6; outline-color: #C98200; }
.fv .ok { position: absolute; right: 8px; top: 5px; color: #0F7553; font-weight: 700; }
.fv .typing::after { content: "|"; color: var(--acc); animation: blink 1s steps(1) infinite; }
.fv s { color: #9AA3AD; margin-right: 6px; }
@keyframes blink { 50% { opacity: 0; } }
.tip { margin-top: 10px; display: inline-block; background: #14191A; color: #fff; font-size: .76rem; padding: 6px 10px; max-width: 320px; }

.panel { background: #fff; border-left: 1px solid #D8DFDC; box-shadow: -8px 0 30px rgba(0,0,0,.12); display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.p-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #EEF1F0; font-size: .9rem; }
.p-h .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: #566260; }
.p-h .live i { width: 7px; height: 7px; border-radius: 50%; background: #0F7553; }
.p-body { padding: 14px 16px 6px; display: grid; gap: 12px; align-content: start; font-size: .84rem; line-height: 1.5; overflow: hidden; }
.p-task { display: grid; gap: 1px; }
.p-task-h { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.p-task-h b { font-weight: 600; }
.p-task-h span { font-size: .74rem; color: #566260; }
.st { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 3px 0; }
.st > i { font-style: normal; text-align: center; font-size: .74rem; font-weight: 700; color: #B5BEBB; }
.st.done > i { color: #0F7553; }
.st.now > i { color: var(--acc); }
.st .t { color: #8A9491; }
.st.done .t { color: #14191A; }
.st.now .t { color: #14191A; font-weight: 600; }
.pill { font-size: .68rem; font-weight: 600; color: #0F7553; background: #E6F4EE; padding: 1px 7px; margin-left: 4px; }
.st .acts { display: flex; gap: 6px; margin-top: 6px; }
.sb { min-height: 28px; padding: 0 10px; border: 0; background: #14191A; color: #fff; font: 600 .74rem var(--sans); cursor: pointer; }
.sb2 { min-height: 28px; padding: 0 10px; border: 1px solid #D8DFDC; background: #fff; color: #14191A; font: 600 .74rem var(--sans); cursor: pointer; }
.run { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .74rem; color: #566260; }
.spin { width: 12px; height: 12px; border: 2px solid #C4CCC9; border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { border-left: 2px solid #C98200; padding-left: 10px; }
.note b { color: #8A5300; font-weight: 600; }
.note.ok { border-color: #0F7553; color: #566260; }
.note.ok b { color: #0F7553; }
.note .acts { display: flex; gap: 6px; margin-top: 6px; }
.p-done b { color: #0F7553; font-weight: 600; }
.p-in { margin: 8px 14px 14px; border: 1px solid #D8DFDC; padding: 9px 12px; font-size: .8rem; color: #8A9491; }
.taskbar { height: 36px; background: #1F2633; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; }
.taskbar span { width: 20px; height: 20px; }
.taskbar .as-tray { position: absolute; right: 12px; display: flex; align-items: center; gap: 6px; color: #DFE8FF; font-size: .7rem; width: auto; height: auto; }
.taskbar .as-tray i { width: 8px; height: 8px; border-radius: 50%; background: #3DD68C; }
.fade-in { animation: fin .45s ease both; }
@keyframes fin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* player: play/pause, chapters that fill as they play, replay */
.player { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 14px; padding: 10px; background: #fff; border: 1px solid var(--line); }
.pp { width: 44px; height: 44px; border: 0; background: var(--acc); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pp:hover { background: var(--acc-2); }
.pp svg { width: 20px; height: 20px; fill: currentColor; }
.pp .i-play { display: none; }
.pp.paused .i-play { display: block; }
.pp.paused .i-pause { display: none; }
.rp { height: 44px; padding: 0 16px; border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; gap: 8px; font: 600 .88rem var(--sans); color: var(--ink); cursor: pointer; }
.rp:hover { border-color: var(--ink); }
.rp svg { width: 16px; height: 16px; fill: currentColor; }
.chap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.chap button { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; display: grid; gap: 7px; min-width: 0; font: 600 .84rem var(--sans); color: var(--ink-3); }
.chap button span { display: flex; gap: 7px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chap button span b { font-weight: 700; color: inherit; }
.chap button i { display: block; height: 4px; background: var(--line); position: relative; overflow: hidden; }
.chap button i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--acc); transition: width .4s linear; }
.chap button.on { color: var(--ink); }
.chap button.past i::after { --p: 100%; }
.chap button:hover { color: var(--ink); }
.state { grid-column: 1 / -1; display: none; }
@media (max-width: 760px) {
  .player { grid-template-columns: auto 1fr; }
  .rp { grid-column: 1 / -1; justify-content: center; }
  .chap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .chap button span { white-space: normal; font-size: .8rem; }
  .cwin { right: 12px; bottom: 360px; width: 230px; }
  .dock { gap: 6px; padding: 6px 8px 5px; }
  .di { width: 36px; height: 36px; border-radius: 9px; }
  .di .cl { width: 30px; height: 11px; }
  .di-w:nth-child(n+6):not(:last-child) { display: none; }
}

/* morning timeline */
.tl-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.kp { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.kp div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.kp div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
.kp b { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
.kp span { display: block; margin-top: 8px; color: var(--ink-2); font-size: .93rem; }
.tl { border-top: 1px solid var(--ink); }
.tl-r { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tl-r time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-r .app-n { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.tl-r p { font-size: .97rem; }
.pain { display: inline-block; margin-left: 8px; font-size: .74rem; font-weight: 700; padding: 2px 7px; vertical-align: 1px; }
.p-re { background: #FFF4E2; color: #8A5300; }
.p-risk { background: #FCEBE9; color: #B3261E; }
.p-sw { background: var(--acc-soft); color: var(--acc-2); }
.p-lost { background: var(--bg-2); color: var(--ink-2); }

/* moments */
.moments { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.mo { padding: 28px 28px 30px 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.mo + .mo { padding-left: 28px; border-left: 1px solid var(--line); }
.mo .n { font-weight: 700; color: var(--acc); }
.mo h3 { font-size: 1.45rem; }
.mo p { color: var(--ink-2); }
.card { border: 1px solid var(--line-2); background: #fff; padding: 14px 16px; display: grid; gap: 8px; font-size: .86rem; box-shadow: 0 18px 36px -26px rgba(11,23,48,.35); }
.card .h { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.card .h b { font-weight: 700; }
.card .r { display: flex; justify-content: space-between; gap: 10px; }
.card .r span { color: var(--ink-3); }
.card .g { color: #0F7553; font-weight: 700; }
.card .msgc { background: var(--acc-soft); padding: 8px 10px; }

/* before / after */
.ba1 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.legend { display: flex; gap: 18px; font-size: .84rem; color: var(--ink-2); margin: 0 0 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; display: inline-block; }
.cmp { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.cmp:first-of-type { border-top: 1px solid var(--ink); }
.cmp-h { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.cmp-h b { font-weight: 600; }
.cmp-h em { font-style: normal; font-weight: 700; color: var(--acc); white-space: nowrap; }
.cmp-b { display: grid; grid-template-columns: 1fr 58px; gap: 5px 10px; align-items: center; font-size: .82rem; font-variant-numeric: tabular-nums; }
.cmp-b i { display: block; height: 8px; background: #C7CFDB; }
.cmp-b i.a { background: var(--acc); }
.cmp-b span:last-of-type { font-weight: 700; }
.big-out { padding: 28px; background: var(--acc); color: #fff; display: grid; gap: 12px; }
.big-out b { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
.big-out p { color: rgba(255,255,255,.85); }
.big-out ul { list-style: none; margin: 4px 0 0; padding: 0; }
.big-out li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.22); display: flex; gap: 10px; }
.big-out li::before { content: "—"; color: #BFD0FF; }

/* privacy */
.priv { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.priv > div { padding: 30px 30px 30px 0; min-width: 0; }
.priv > div + div { padding-left: 30px; padding-right: 0; border-left: 1px solid var(--line); }
.priv h3 { font-size: 1.35rem; margin-bottom: 8px; }
.pl { list-style: none; margin: 0; padding: 0; }
.pl li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .97rem; }
.pl li small { display: block; color: var(--ink-2); font-size: .88rem; margin-top: 2px; }
.pl li em { font-style: normal; font-size: .8rem; font-weight: 700; padding: 3px 8px; align-self: start; white-space: nowrap; }
.yes { background: var(--acc-soft); color: var(--acc-2); }
.opt { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); }
.no { background: #FCEBE9; color: #B3261E; }
.promise { margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.promise div { padding: 20px 20px 4px 0; display: grid; gap: 6px; }
.promise div + div { padding-left: 20px; border-left: 1px solid var(--line-2); }
.promise b { font-weight: 600; }
.promise span { color: var(--ink-2); font-size: .93rem; }

@media (max-width: 1000px) {
  .desk2 { grid-template-columns: 1fr 320px; }
  .app-body { grid-template-columns: 1fr; }
  .app-nav { display: none; }
}
@media (max-width: 760px) {
  .desk2 { grid-template-columns: 1fr; min-height: 0; }
  .panel { border-left: 0; border-top: 1px solid #D8DFDC; box-shadow: none; }
  .app-menu span:not(:first-child) { display: none; }
  .frow { grid-template-columns: 96px 1fr; }
  .tl-grid, .ba1, .priv { grid-template-columns: 1fr; }
  .moments { grid-template-columns: 1fr; }
  .mo + .mo { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .priv > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .promise { grid-template-columns: 1fr 1fr; }
  .promise div:nth-child(3) { border-left: 0; padding-left: 0; }
  .win-bar .ctl { display: none; }
}
@media (max-width: 520px) {
  .kp, .promise { grid-template-columns: 1fr; }
  .kp div:nth-child(even) { padding-left: 0; border-left: 0; }
  .promise div + div { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .spin, .fv .typing::after { animation: none; } .fade-in { animation: none; } }

/* chat: the agent's own messages and the typing composer */
.p-body { overflow-y: auto; scrollbar-width: none; }
.me-q { justify-self: end; max-width: 88%; background: #14191A; color: #fff; padding: 7px 11px; font-size: .8rem; }
.p-in { display: flex; align-items: center; gap: 8px; }
.p-in span { flex: 1; min-width: 0; }
.p-in .send { width: 16px; height: 16px; fill: #C4CCC9; flex: none; }
.p-in.typing { color: #14191A; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.p-in.typing span::after { content: "|"; color: var(--acc); animation: blink 1s steps(1) infinite; }
.p-in.typing .send { fill: var(--acc); }

/* ---- macOS desktop: wallpaper, menu bar, floating window, dock ---- */
.screen { grid-template-rows: auto 1fr auto auto; border-radius: 12px; background:
  radial-gradient(120% 90% at 15% 0%, #7FA6E8 0%, transparent 55%),
  radial-gradient(90% 80% at 100% 20%, #B59BE0 0%, transparent 60%),
  radial-gradient(120% 90% at 50% 120%, #F2B8A6 0%, transparent 55%),
  linear-gradient(180deg, #8DAAE0, #C9B8E6); box-shadow: 0 40px 80px -40px rgba(11,23,48,.5); }
.mbar { height: 26px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: rgba(255,255,255,.38); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: .74rem; color: #1D1D1F; border-radius: 12px 12px 0 0; white-space: nowrap; overflow: hidden; }
.mbar .ap svg { width: 13px; height: 13px; fill: #1D1D1F; display: block; }
.mbar b { font-weight: 700; }
.mbar .rt { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mbar .rt svg { width: 15px; height: 13px; fill: #1D1D1F; color: #1D1D1F; }
.mbar .as-mb { font-size: .6rem; font-weight: 800; color: #fff; background: var(--acc); padding: 1px 4px; border-radius: 3px; }
.mwin { margin: 16px 22px 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.22); box-shadow: 0 30px 60px -20px rgba(20,25,40,.55), 0 0 0 .5px rgba(0,0,0,.1); min-width: 0; }
.mwin .win-bar { border-radius: 0; background: linear-gradient(#EDEDED, #E2E2E2); }
.dockwrap { padding: 12px 0 8px; }
.dock { gap: 5px; padding: 5px 6px 4px; border-radius: 20px; background: rgba(255,255,255,.26); border: 1px solid rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 24px -8px rgba(20,25,40,.4); }
.di { width: 50px; height: 50px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 .5px rgba(0,0,0,.12); }
.di svg { width: 100%; height: 100%; display: block; }
.di.ez img { width: 84%; }
.di.brand .cl { width: 40px; height: 13px; }
.b-prog { background: #0072CE; } .b-prog .cl { background: #fff; }
.b-trav { background: #fff; }
.b-nw { background: #1C57A5; } .b-nw .cl { background: #fff; }
.di-w::after { width: 4px; height: 4px; background: rgba(0,0,0,.6); }
.di-w { gap: 3px; }
.di-w:hover .di { transform: translateY(-8px) scale(1.12); }
.di:hover { transform: none; }
.dock .sep { margin: 6px 3px 12px; background: rgba(0,0,0,.18); }
.cwin { bottom: 112px; }
@media (max-width: 760px) {
  .mbar span:not(.ap):not(.rt):not(.as-mb) { display: none; }
  .mwin { margin: 10px 8px 0; }
  .di { width: 36px; height: 36px; border-radius: 9px; }
  .di.brand .cl { width: 30px; height: 10px; }
  .di-w:nth-child(1), .di-w:nth-child(n+6):not(:last-child) { display: none; }
}

/* before / after: big numbers, clear change */
.cx { padding: 20px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.cx:first-of-type { border-top: 1px solid var(--ink); }
.cx-l { font-weight: 600; font-size: 1.05rem; }
.cx-v { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.cx-v span { display: grid; gap: 2px; font-variant-numeric: tabular-nums; line-height: 1; }
.cx-v small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cx-v .old { font-size: 1.7rem; font-weight: 600; color: var(--ink-3); letter-spacing: -.03em; }
.cx-v .new { font-size: 2.3rem; font-weight: 700; color: var(--acc); letter-spacing: -.04em; }
.cx-v .ar { font-size: 1.4rem; color: var(--ink-3); padding-bottom: 4px; }
.cx-v em { margin-left: auto; align-self: center; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--acc-2); background: var(--acc-soft); padding: 5px 10px; white-space: nowrap; }
.cx-b { display: grid; gap: 4px; }
.cx-b i { display: block; height: 10px; background: #C7CFDB; min-width: 4px; }
.cx-b i.a { background: var(--acc); }

/* Mail scene (macOS Mail style) shown before EZLynx */
.mailapp { display: none; grid-template-columns: 130px 230px minmax(0, 1fr); background: #fff; min-width: 0; font-size: .78rem; }
.desk2.mail .mailapp { display: grid; }
.desk2.mail .app { display: none; }
.mb-side { background: #F2F2F4; border-right: 1px solid #E1E1E1; padding: 12px 8px; display: grid; gap: 1px; align-content: start; }
.mb-side b { font-size: .66rem; color: #8A8F98; padding: 8px 8px 4px; font-weight: 700; }
.mb-side span { padding: 5px 8px; border-radius: 5px; display: flex; justify-content: space-between; color: #1D1D1F; }
.mb-side span.on { background: #DCDCE0; font-weight: 600; }
.mb-side em { font-style: normal; color: #8A8F98; }
.mb-list { border-right: 1px solid #E1E1E1; display: grid; align-content: start; }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; padding: 9px 12px 9px 18px; border-bottom: 1px solid #EEEEF0; position: relative; }
.mrow b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow time { color: #8A8F98; font-size: .7rem; }
.mrow span { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow small { grid-column: 1 / -1; color: #8A8F98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow.unread::before { content: ""; position: absolute; left: 6px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #0A84FF; }
.mrow.on { background: #0A64D6; color: #fff; }
.mrow.on time, .mrow.on small { color: rgba(255,255,255,.8); }
.mrow.on::before { background: #fff; }
.mb-read { padding: 16px 20px; display: grid; gap: 9px; align-content: start; min-width: 0; line-height: 1.5; }
.mr-h { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #EEEEF0; }
.mr-h .av { width: 32px; height: 32px; border-radius: 50%; background: #8E9AAF; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .72rem; }
.mr-h small { display: block; color: #8A8F98; }
.mb-read h5 { margin: 2px 0 0; font-size: .95rem; font-weight: 700; }
.mb-read p { margin: 0; color: #1D1D1F; }
.mb-read mark { background: transparent; color: inherit; transition: background .4s, box-shadow .4s; }
.desk2.marked .mb-read mark { background: #E3EAFF; box-shadow: 0 0 0 2px #E3EAFF; color: #1A3FB8; font-weight: 600; }
.att { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E1E1E1; border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
.att span { background: #E5484D; color: #fff; font-size: .6rem; font-weight: 700; padding: 2px 4px; border-radius: 3px; }
@media (max-width: 1000px) { .mailapp { grid-template-columns: 200px minmax(0, 1fr); } .mb-side { display: none; } }
@media (max-width: 760px) { .mailapp { grid-template-columns: 1fr; } .mb-list { display: none; } }

.pf-short .pf b { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; }

/* timeline: larger, easier to read */
.tl-r { grid-template-columns: 72px 1fr; gap: 18px; padding: 20px 0; }
.tl-r time { font-size: 1.3rem; letter-spacing: -.02em; }
.tl-r .app-n { font-size: .92rem; display: block; margin-bottom: 4px; }
.tl-r p { font-size: 1.14rem; line-height: 1.5; }
.pain { font-size: .82rem; padding: 3px 9px; }
@media (max-width: 520px) { .tl-r { grid-template-columns: 56px 1fr; gap: 12px; } .tl-r time { font-size: 1.1rem; } .tl-r p { font-size: 1.02rem; } }

/* before / after as a plain table */
.ct-h, .ct-r { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1.2fr auto; gap: 14px; align-items: center; }
.ct-h { padding: 0 0 10px; border-bottom: 1px solid var(--ink); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ct-h span:nth-child(3) { color: var(--acc); }
.ct-r { padding: 18px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ct-l { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.ct-a { font-size: 1.6rem; font-weight: 600; color: var(--ink-3); letter-spacing: -.03em; }
.ct-b { font-size: 2.1rem; font-weight: 800; color: var(--acc); letter-spacing: -.04em; }
.ct-d em { font-style: normal; font-weight: 700; font-size: 1rem; color: #0F7553; background: #E3F5EC; padding: 6px 10px; white-space: nowrap; }
@media (max-width: 520px) {
  .ct-h, .ct-r { grid-template-columns: 1fr 1fr auto; }
  .ct-h span:first-child { display: none; }
  .ct-l { grid-column: 1 / -1; }
  .ct-a { font-size: 1.3rem; } .ct-b { font-size: 1.7rem; }
}