/* THE MOAT, SHOWN (owner 2026-10-20 11:10 AM: "show the interaction of actually using it ... before and after ... how we own our own browser") */
.moat{background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 8%,var(--paper)),var(--paper));border:1px solid var(--line);border-radius:22px;padding:18px;margin:18px 0}
.moat h2{margin-top:0}
.switch{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px;margin:8px 0 14px}
.switch button{border:0;background:transparent;color:var(--soft);font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer;font-size:15px}
.switch button[aria-pressed="true"]{background:var(--tone);color:#fff}
.phone{width:min(360px,100%);margin:0 auto;background:#000;border-radius:32px;padding:10px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.screen{background:#fff;color:#111;border-radius:24px;overflow:hidden;min-height:560px;position:relative;font-size:14px;line-height:1.35}
.bar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-weight:700;font-size:13px}
.urlbar{margin:6px 10px;background:#eceff3;border-radius:10px;padding:8px 12px;font-size:12px;color:#555;display:flex;gap:8px;align-items:center}
.urlbar b{color:#111}
.ad{background:#fff4d6;border:1px dashed #e0b35a;color:#6b4b00;border-radius:10px;margin:8px 10px;padding:8px 10px;font-size:12px}
.ad small{display:block;color:#a07a2a;font-weight:700;letter-spacing:.06em}
.vid{display:flex;gap:10px;padding:8px 10px}
.thumb{width:112px;height:66px;border-radius:8px;background:#cfd8e3;flex:none;display:grid;place-items:center;color:#555;font-size:11px}
.thumb.shade{background:repeating-linear-gradient(45deg,#9aa6b2 0 6px,#b7c0ca 6px 12px)}
.vid p{margin:0;font-weight:600}
.vid small{color:#666}
.comments{margin:8px 10px;padding:8px 10px;border-top:1px solid #eee;font-size:12px;color:#444}
.comments .bad{color:#b00020}
.hl-note{position:absolute;left:10px;right:10px;bottom:10px;background:var(--tone);color:#fff;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:600}
.gone{text-decoration:line-through;opacity:.45}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-right:6px}
.tag.red{background:#ffe3e3;color:#b00020}.tag.green{background:#dcf5e7;color:#0d6b3a}
.chat{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:380px}
.bub{max-width:86%;padding:10px 12px;border-radius:16px;font-size:14px}
.bub.me{align-self:flex-end;background:#dcefff;border-bottom-right-radius:4px}
.bub.ai{align-self:flex-start;background:#f1f1f1;border-bottom-left-radius:4px}
.bub.hl{align-self:center;background:#fff3e0;color:#7a4b00;border:1px solid #ffd59a;font-size:13px;text-align:center}
.bub .pic{height:70px;border-radius:10px;margin-top:8px;background:repeating-linear-gradient(45deg,#9aa6b2 0 6px,#b7c0ca 6px 12px);display:grid;place-items:center;font-size:12px;color:#334}
.compose{display:flex;gap:8px;padding:10px;border-top:1px solid #eee;background:#fafafa}
.compose input{flex:1;border:1px solid #ddd;border-radius:999px;padding:10px 14px;font-size:14px}
.compose button{border:0;background:var(--tone);color:#fff;font-weight:700;border-radius:999px;padding:10px 14px;cursor:pointer}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 12px;font-size:14px;cursor:pointer}
.chips button:hover{border-color:var(--tone)}
.status{font-size:13px;color:var(--soft);margin:6px 0 0}
.wa-row{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #f0f0f0}
.wa-row .av{width:40px;height:40px;border-radius:50%;background:#dfe6ee;flex:none}
.wa-row .av.shade{background:repeating-linear-gradient(45deg,#9aa6b2 0 5px,#b7c0ca 5px 10px)}
.wa-row p{margin:0;font-weight:600}.wa-row small{color:#666}
.wa-tabs{display:flex;gap:16px;padding:10px 14px;font-weight:700;font-size:13px;color:#2a7}
.compare{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
.compare th,.compare td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.compare td:first-child{color:var(--soft)}
.compare td:last-child{font-weight:600}
.compare .yes::before{content:"✓ ";color:var(--tone-2)}
.compare .no::before{content:"✕ ";color:#b00020}
@media(min-width:760px){.two-up{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}}