/* Compare page only (body.cmpp). Loaded after home.css and demo.css. Light and dark follow the visitor's system.
   The green accent is the site's own; the warm orange is only for what a cloud tool could do. No new claims live here, only layout. */
:root{--warm:#c2410c;--warm-soft:#fbeae2}
:root{--warm:#ff9a6b;--warm-soft:#2c1c15}

body.cmpp>main{justify-content:flex-start}
.cmpp .cmp{padding-block:clamp(30px,4.4vw,52px) clamp(36px,6vw,64px)}

/* ---- hero ---- */
.cmp-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin:0 auto clamp(22px,3.4vw,34px);max-width:40em}
.cmp-hero h1{margin:0;font:720 clamp(32px,5.2vw,52px)/1.06 var(--display);letter-spacing:-.028em}
.cmp-sub{margin:0;color:var(--mute);font-size:clamp(16px,1.9vw,19px);line-height:1.45;max-width:34em}

/* ---- marks: round, so a tick or a cross reads at a glance ---- */
.cmpp .mk{width:22px;height:22px;padding:4px;box-sizing:border-box;border-radius:50%;margin-right:9px;vertical-align:-6px}
.cmpp .mk.ok{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.cmpp .us .mk.ok{background:var(--accent);color:var(--accent-ink)}
.cmpp .mk.no{background:color-mix(in srgb,var(--warm) 16%,transparent);color:var(--warm)}
.cmpp .mk.part{background:color-mix(in srgb,var(--mute) 18%,transparent);color:var(--mute)}
.cmpp .src.tiny{margin:30px 4px 0;text-align:center}

/* ---- table as the hero (desktop and tablet) ---- */
@media (min-width:761px){
  .cmpp .tw{position:relative;isolation:isolate;overflow:visible;margin-top:22px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
  /* the LocalFlow column: one outline exactly the height of the table, drawn over the cells, so every row line runs straight through it */
  .cmpp .tw::after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:22%;width:21%;pointer-events:none;
    border:2px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:0;
    box-shadow:0 0 34px -6px color-mix(in srgb,var(--accent) 45%,transparent)}
  .cmpp table{position:relative;z-index:1;width:100%;min-width:0;table-layout:fixed;border-collapse:separate;border-spacing:0}
  .cmpp th:first-child{width:22%}
  .cmpp th.us{width:21%}
  .cmpp th,.cmpp td{padding:16px 18px;border-bottom:1px solid var(--line);background:transparent;font-size:15.5px;line-height:1.35;vertical-align:middle;text-align:left}
  .cmpp td.us{background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
  .cmpp tbody tr:last-child>*{border-bottom:0}
  .cmpp tbody th{font-weight:650;color:var(--ink);text-transform:none;letter-spacing:0}
  .cmpp td.us{font-weight:600}
  .cmpp td.us b{font-size:21px;letter-spacing:-.01em;color:var(--accent)}
  .cmpp td .alt{margin-top:4px}
  .cmpp thead th{padding-block:20px 14px;font:700 12.5px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .cmpp thead th.us{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
  .cmpp .badge{display:block;width:max-content;margin:0 0 8px;padding:5px 10px;border-radius:99px;font:720 11px/1 var(--font);letter-spacing:.07em;text-transform:uppercase;
    color:var(--accent-ink);background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 4px 12px -4px var(--accent)}
  .cmpp .nm{font-size:15px;letter-spacing:.05em;color:var(--accent)}
}
@media (min-width:761px) and (max-width:980px){
  .cmpp th,.cmpp td{padding:14px 12px;font-size:14.5px}
  .cmpp thead th{font-size:11.5px;letter-spacing:.05em}
  .cmpp td.us b{font-size:19px}
}

/* ---- table on a phone: one card per row, LocalFlow first and highlighted ---- */
@media (max-width:760px){
  .cmpp .tw{margin-top:6px}
  .cmpp thead{display:none}
  .cmpp tr{box-shadow:var(--shadow);border-radius:18px}
  .cmpp tbody th{background:var(--bg2);font-size:16px;font-weight:680}
  .cmpp td.us{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),color-mix(in srgb,var(--accent) 7%,var(--surface)));box-shadow:inset 3px 0 0 var(--accent)}
  .cmpp td.us b{font-size:19px;color:var(--accent)}
  .cmpp td>span{text-align:right}
  .cmpp td .alt{margin-top:2px}
  .cmpp td{padding-block:9px}
  .cmpp tbody th{padding-block:10px}
  .cmpp tr{margin-bottom:10px}
  .cmpp .src.tiny{margin-top:16px}
}

/* ---- cards ---- */
.cmpp .pts{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,8vw,120px);margin:clamp(64px,10vw,140px) 0 0}
.cmpp .pt{position:relative;gap:16px;padding:clamp(20px,3.2vw,34px);border-radius:26px;border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--accent-soft)))}
.cmpp .pt h3{display:flex;align-items:center;gap:13px;margin:0;font:700 clamp(22px,3vw,30px)/1.15 var(--display);letter-spacing:-.02em}
.cmpp .pt p{margin:0;font-size:clamp(16px,1.7vw,17.5px);max-width:42em}
.chip{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;color:var(--accent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),color-mix(in srgb,var(--accent) 8%,var(--surface)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.chip svg{width:22px;height:22px}
.cmpp .pt>.vis,.cmpp .pt>.lfd-card{width:100%}
.cmpp .pt>.vis{background:color-mix(in srgb,var(--bg2) 70%,var(--surface))}
.cmpp .vis.leak{background:none}

/* competitor side of the privacy picture: one warm colour, used only for what could go wrong */
.cmpp .leak .lrow:not(.us){background:color-mix(in srgb,var(--warm) 7%,var(--surface));border-color:color-mix(in srgb,var(--warm) 38%,var(--line))}
.cmpp .leak .lrow:not(.us) .tag{color:var(--warm)}
@media (max-width:760px){.cmpp .pt{border-radius:22px}.cmpp .pt h3{gap:11px}.chip{width:40px;height:40px;border-radius:12px}}

/* ---- closing call to action: one normal button, one quiet line ---- */
.cta-quiet{display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(64px,10vw,140px) 0 clamp(20px,4vw,40px);text-align:center}
.cta-quiet p{margin:0;font-size:14px;color:var(--mute)}
.cta-quiet .cq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.cq i{width:4px;height:4px;border-radius:50%;background:var(--mute);opacity:.7}
.cq-a{color:var(--accent)}
.cq-b b{font-size:19px;font-weight:700;letter-spacing:-.01em}

/* ---- motion: scroll-in reveal and hover lift, only when motion is welcome ---- */
@media (prefers-reduced-motion:no-preference){
  /* our card: ring spins (working on the Mac), completes, turns into a check, text appears; 6s loop */
  .pv-ring{animation:rgslide 6s ease-in-out infinite}
  @keyframes rgslide{0%,64%{transform:translateX(18.5cqw)}80%,92%{transform:none}100%{transform:translateX(18.5cqw)}}
  .pv-card.us .rg{animation:rgspin 1.8s linear infinite}
  @keyframes rgspin{to{transform:rotate(270deg)}}
  .rg-arc{animation:rgarc 6s ease-in-out infinite}
  @keyframes rgarc{0%{stroke-dasharray:0 100;opacity:0}6%{stroke-dasharray:26 74;opacity:1}52%{stroke-dasharray:26 74}66%{stroke-dasharray:100 0;opacity:1}90%{stroke-dasharray:100 0;opacity:1}98%,100%{stroke-dasharray:100 0;opacity:0}}
  .pv-ring .pv-mic{animation:rgmic 6s ease-in-out infinite}
  @keyframes rgmic{0%{opacity:0;transform:scale(.8)}6%,58%{opacity:1;transform:scale(1)}66%,96%{opacity:0;transform:scale(.8)}100%{opacity:0;transform:scale(.8)}}
  .pv-ck{animation:rgck 6s ease-in-out infinite}
  @keyframes rgck{0%,62%{opacity:0;transform:scale(.6)}72%{opacity:1;transform:scale(1.08)}78%,90%{opacity:1;transform:scale(1)}98%,100%{opacity:0;transform:scale(.9)}}
  .pv-card.us .pv-doc{animation:rgdoc 6s ease-in-out infinite}
  @keyframes rgdoc{0%,68%{opacity:0;transform:translateX(-6px)}80%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
  .pv-card.us .pv-doc .ln.hi{animation:none;opacity:1}
  html.rv-on .rv{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
  html.rv-on .rv.in{opacity:1;translate:0 0}
  .cmpp .pt.rv{transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1),transform .28s ease,box-shadow .28s ease}
  .cmpp .pt:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,26,21,.06),0 22px 44px -14px rgba(17,26,21,.28)}
}

/* ---- "Your voice stays on your Mac": two glass panels, a mini MacBook each, light moving along the path ---- */
.cmpp .pt>.pv{width:100%}
.pv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.pv-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.4vw,26px);border-radius:26px;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 94%,#fff),var(--bg2));border:1px solid var(--line);
  box-shadow:var(--shadow)}
.pv-card::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:-40%;height:80%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 20%,transparent),transparent)}
.pv-card.us{--glow:var(--accent)}.pv-card.them{--glow:var(--warm)}
.pv-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-height:30px}
.pv-h .lg{width:26px;height:26px;border-radius:7px;box-shadow:0 4px 10px -3px rgba(23,104,74,.5)}
.pv-h b{font:720 clamp(17px,2vw,20px)/1.1 var(--display);letter-spacing:-.01em}
.pv-st{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:5px 11px 5px 8px;border-radius:99px;font:650 12.5px/1.2 var(--font);white-space:nowrap}
.pv-st.us{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 14px -6px var(--accent)}
.pv-st.them{background:var(--warm);color:#fff;box-shadow:0 6px 14px -6px var(--warm)}
:root:not([data-theme="light"]) .pv-st.them{color:#2a140a}
:root[data-theme="dark"] .pv-st.them{color:#2a140a}

/* the stage: soft spotlight, laptop, floating cloud */
.pv-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.2vw,12px);min-height:124px;padding:18px 0 8px;border-radius:16px;
  background:radial-gradient(60% 68% at 50% 58%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 72%)}
.mac{position:relative;flex:none;width:min(168px,78%)}
.mac.sm{width:min(126px,40%)}
.mac-scr{position:relative;display:flex;aspect-ratio:16/10;container-type:inline-size;padding:clamp(4px,2.4cqw,6px);border-radius:12px 12px 5px 5px;background:linear-gradient(160deg,#2a3a33,#0d1411);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 2px 3px rgba(0,0,0,.3),0 24px 34px -16px rgba(0,0,0,.55)}
.mac-scr::after{content:"";position:absolute;left:50%;top:6px;width:26px;height:4px;margin-left:-13px;border-radius:0 0 4px 4px;background:#050807}
.mac-in{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:4cqw;padding:12px 5cqw 4px;border-radius:7px;
  background:linear-gradient(155deg,#1a2c25 0%,#0f1a15 62%,#13251d 100%);color:#fff;overflow:hidden}
.mac-in::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent)}
.mac-base{position:relative;height:9px;width:116%;margin:0 -8%;border-radius:0 0 12px 12px;background:linear-gradient(180deg,#e4e9e6,#aab3af);
  box-shadow:0 12px 18px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.mac-base::after{content:"";position:absolute;left:50%;top:0;width:22%;height:3px;margin-left:-11%;border-radius:0 0 4px 4px;background:rgba(0,0,0,.18)}
:root:not([data-theme="light"]) .mac-base{background:linear-gradient(180deg,#4a5450,#2a312e);box-shadow:0 12px 18px -8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18)}
:root[data-theme="dark"] .mac-base{background:linear-gradient(180deg,#4a5450,#2a312e)}
.pv-mic{position:relative;flex:none;display:grid;place-items:center;width:clamp(24px,15cqw,38px);height:clamp(24px,15cqw,38px);border-radius:50%;color:#fff;
  background:radial-gradient(circle at 35% 30%,#3fb585,#17684a);box-shadow:0 0 0 4px rgba(63,181,133,.16),0 0 18px rgba(63,181,133,.55)}
.pv-card.them .pv-mic{background:radial-gradient(circle at 35% 30%,#4a5953,#26332d);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.pv-track{position:relative;flex:1 1 0;min-width:24px;height:10px}
.pv-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,rgba(63,181,133,.15),rgba(63,181,133,.5),rgba(63,181,133,.15))}
.pv-track i{position:absolute;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#bff3da;box-shadow:0 0 10px 3px rgba(94,214,162,.75)}
.pv-track i:nth-child(1){left:18%}.pv-track i:nth-child(2){left:50%}.pv-track i:nth-child(3){left:82%}
.pv-track.out{flex:0 1 clamp(30px,9%,70px);height:12px}
.pv-track.out::before{background:repeating-linear-gradient(90deg,rgba(255,154,107,.65) 0 6px,transparent 6px 11px);height:2px}
.pv-track.out i{background:#ffd9c4;box-shadow:0 0 10px 3px rgba(255,138,84,.75)}
.pv-doc{flex:none;width:30cqw;display:flex;flex-direction:column;gap:4px;padding:6px 7px;border-radius:7px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pv-doc .ln{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.55)}
.pv-doc .ln.s{width:62%;background:rgba(255,255,255,.35)}
.pv-doc .ln.hi{background:#7ee0b4;box-shadow:0 0 10px rgba(94,214,162,.8)}
.pv-doc.wait{width:30cqw}
.pv-doc.wait .ln{background:rgba(255,255,255,.22)}

/* No server: a grey, crossed-out cloud floating outside the Mac */
.pv-off{position:absolute;top:-2px;right:2px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--mute);opacity:.78;filter:grayscale(1)}
.pv-off .pcl{display:block;width:44px;height:32px;color:color-mix(in srgb,var(--mute) 45%,transparent)}
.pv-off::after{content:"";position:absolute;left:2px;right:2px;top:15px;height:3px;border-radius:2px;background:var(--mute);transform:rotate(-28deg);box-shadow:0 0 0 2px var(--surface)}
.pv-off small,.pv-srv small{font:650 11.5px/1.2 var(--font);white-space:nowrap}
.pv-srv{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 14px 9px;border-radius:16px;color:var(--warm);
  background:linear-gradient(165deg,color-mix(in srgb,var(--warm) 16%,var(--surface)),color-mix(in srgb,var(--warm) 7%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--warm) 40%,var(--line));box-shadow:0 14px 26px -14px var(--warm),0 0 26px -8px var(--warm)}
.pv-srv .pcl{display:block;width:44px;height:32px;filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--warm) 40%,transparent))}
.pv-srv small{color:var(--ink)}

/* the four facts: clean pills with a filled round icon */
.pv-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.pv-chips li{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:99px;font:600 13px/1.25 var(--font);color:var(--ink);
  background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,26,21,.05)}
.pv-card.us .pv-chips li{background:color-mix(in srgb,var(--accent) 8%,var(--surface));border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.pv-card.them .pv-chips li{background:color-mix(in srgb,var(--warm) 7%,var(--surface));border-color:color-mix(in srgb,var(--warm) 26%,var(--line))}
.pc{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff}
.pc svg{display:block}
.pc.us{background:var(--accent)}
.pc.them{background:var(--warm)}
:root:not([data-theme="light"]) .pc.them{color:#2a140a}
:root[data-theme="dark"] .pc.them{color:#2a140a}

/* our card: the work happens in a ring on the Mac, then a check and the text; static end state is the default */
.pv-card.us .mac-in{justify-content:center;gap:7cqw}
.pv-ring{position:relative;flex:none;display:grid;place-items:center;width:30cqw;height:30cqw;max-width:54px;max-height:54px}
.pv-ring .rg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rg circle{fill:none;stroke-width:3;stroke-linecap:round}
.rg-bg{stroke:rgba(255,255,255,.12)}
.rg-arc{stroke:#7fd3b0;stroke-dasharray:100 0;filter:drop-shadow(0 0 4px rgba(94,214,162,.7))}
.pv-ring .pv-mic{grid-area:1/1;width:56%;height:56%;opacity:0}
.pv-ring .pv-mic svg{width:60%;height:60%}
.pv-ck{grid-area:1/1;display:grid;place-items:center;width:56%;height:56%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3fb585,#17684a);color:#fff;box-shadow:0 0 16px rgba(63,181,133,.55)}
.pv-ck svg{width:58%;height:58%}

@media (max-width:860px){.pv{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.pv-card{border-radius:22px}}
@media (max-width:420px){.pv-st{margin-left:0}.pv-stage{min-height:124px}.pv-srv{padding:10px 10px 8px}.pv-srv .pcl,.pv-off .pcl{width:38px;height:28px}}

/* motion: calm; light travels along the path, the cloud drifts, the line lights up once per loop */
@media (prefers-reduced-motion:no-preference){
  .pv-track i{animation:pvrun 3.6s linear infinite}
  .pv-track i:nth-child(2){animation-delay:-1.2s}.pv-track i:nth-child(3){animation-delay:-2.4s}
  @keyframes pvrun{0%{left:2%;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:98%;opacity:0}}
  .pv-card.them .pv-mic{animation:pvmic 3.6s ease-in-out infinite}
  @keyframes pvmic{0%,100%{box-shadow:0 0 0 4px rgba(63,181,133,.14),0 0 14px rgba(63,181,133,.4)}50%{box-shadow:0 0 0 7px rgba(63,181,133,.1),0 0 24px rgba(63,181,133,.7)}}
  .pv-doc .ln.hi{animation:pvhi 3.6s ease-in-out infinite}
  @keyframes pvhi{0%,35%{opacity:.25}60%,100%{opacity:1}}
  .pv-off{animation:pvfloat 6s ease-in-out infinite}
  @keyframes pvfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .pv-srv{animation:pvsrv 3.6s ease-in-out infinite}
  @keyframes pvsrv{0%,100%{box-shadow:0 14px 26px -14px var(--warm),0 0 18px -8px var(--warm)}50%{box-shadow:0 14px 26px -14px var(--warm),0 0 34px -4px var(--warm)}}
}