/* sections/features.html (#features): the capability bento. Each card = an inset product visual (.cap-vis, decorative)
   + title and one sentence (.cap-txt). Layout by position: n1 wide, n2 tall, n8 full width (6 columns from 1024px). */
#features{background:var(--bg-alt)}
.cap-grid{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.cap{--inset:10px;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--inset)}
.cap-txt{padding:var(--space-3) calc(var(--card-pad) - var(--inset)) calc(var(--card-pad) - var(--inset) - 2px)}
.cap h3{display:flex;align-items:center;gap:10px;font-size:var(--fs-h4)}
.cap-ic svg{stroke-width:1.9}   /* .icon-tile.icon-tile-xs; the wide cards use the full 44px tile */
.cap-txt p{margin-top:var(--space-2);font-size:var(--fs-s);line-height:1.55;max-width:38ch}

/* the inset visual: a quiet well with a faint dot grid */
.cap-vis{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:212px;padding:var(--space-5);overflow:hidden;border:1px solid var(--line);border-radius:calc(var(--r-l) - var(--inset) + 2px);
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.4px) 0 0/18px 18px,var(--surface-2);
  font-size:var(--fs-xs);line-height:1.35;color:var(--ink);user-select:none}
.cap-vis::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 80% at 50% 45%,transparent 40%,var(--surface-2) 100%)}
.cap-vis>*{position:relative;z-index:1}
.cap-vis svg{flex:none}

@media (min-width:640px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-n1,.cap-n8{grid-column:span 2;flex-direction:row-reverse;align-items:stretch}
  .cap-n1 .cap-vis,.cap-n8 .cap-vis{flex:1.25;min-width:0}
  .cap-n1 .cap-txt,.cap-n8 .cap-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--space-6)}
  .cap-n1 h3,.cap-n8 h3{flex-direction:column;align-items:flex-start;gap:var(--space-4);font-size:var(--fs-h3)}
  .cap-n1 .cap-ic,.cap-n8 .cap-ic{width:44px;height:44px;border-radius:var(--r-m)}
  .cap-n1 .cap-ic svg,.cap-n8 .cap-ic svg{width:22px;height:22px;stroke-width:1.7}
  .cap-n1 .cap-txt p,.cap-n8 .cap-txt p{font-size:var(--fs-body);max-width:32ch}
  .cap .cap-vis{min-height:228px}
}
@media (min-width:1024px){
  .cap-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cap{grid-column:span 2}
  .cap-n1{grid-column:span 4}
  .cap-n2{grid-row:span 2}
  .cap-n2 .cap-vis{flex:1}
  .cap-n2 .cv-screen{--bh:330px}
  .cap-n2 .cv-say{left:auto;top:auto;right:calc(var(--bh) * .375 + 24px);bottom:calc(var(--bh) * .64)}
  .cap-n2 .cv-toast{max-width:260px}
  .cap-n8{grid-column:span 6}
  .cap-n8 .cap-vis{flex:2.1}
  .cap .cap-vis{min-height:236px}
}

/* small shared bits */
.cap-vis strong{font-weight:650}

/* 1 voice: the orb, what you said, a waveform */
.cv-voice{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cv-orb{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--grad-brand);color:#FFFFFF;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent),0 0 0 18px color-mix(in srgb,var(--accent) 6%,transparent),var(--shadow-brand)}
.cv-orb svg{width:24px;height:24px}
.cv-said{margin-top:6px;font:700 clamp(1.05rem,.95rem + .4vw,1.3rem)/1.25 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.cv-bars{width:164px;height:26px;fill:var(--accent);opacity:.85}
.cv-bars rect{transform-box:fill-box;transform-origin:center}
.cv-status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3)}
.cap-mic:hover .cv-bars rect{animation:cv-eq 1s var(--ease-in-out) infinite}
.cap-mic:hover .cv-bars rect:nth-child(3n){animation-delay:-.3s}
.cap-mic:hover .cv-bars rect:nth-child(3n+1){animation-delay:-.6s}
.cap-mic:hover .cv-bars rect:nth-child(4n){animation-duration:.8s}
@keyframes cv-eq{50%{transform:scaleY(.35)}}

/* 2 reminders: a little desktop, a reminder card and the buddy saying it */
.cap-bell .cap-vis{padding:0;place-items:stretch}
.cap-bell .cap-vis::after{display:none}
.cv-screen{position:relative;min-height:268px;height:100%;background:radial-gradient(120% 90% at 15% 0%,var(--accent-soft),transparent 65%),
  radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1.4px) 0 0/18px 18px,var(--surface-2)}
.cv-toast{position:absolute;left:16px;top:16px;right:16px;max-width:min(270px,calc(100% - var(--bh) * .375 - 44px));display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 10px;align-items:center;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-2)}
.cv-toast-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);background:var(--grad-brand);color:#FFFFFF}
.cv-toast-ic svg{width:18px;height:18px}
.cv-toast-t{display:flex;flex-direction:column}
.cv-toast-t strong{font-size:var(--fs-s)}
.cv-toast-t span{color:var(--ink-3)}
.cv-toast-b{grid-column:1/-1;display:flex;gap:6px}
.cv-toast-b b{flex:1;display:grid;place-items:center;height:28px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--surface-2);font-weight:600}
.cv-toast-b b.on{border-color:transparent;background:var(--brand);color:var(--on-brand)}
.cv-say{position:absolute;z-index:2;left:16px;top:142px;max-width:min(170px,calc(100% - var(--bh) * .375 - 44px));padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-bubble-user);background:var(--surface);
  box-shadow:var(--shadow-2);font-size:var(--fs-xs);font-weight:600;line-height:1.4}
.cv-screen{--bh:176px}
.cv-buddy{position:absolute;right:14px;bottom:12px;width:auto;height:var(--bh);filter:drop-shadow(0 10px 12px rgba(20,22,27,.18));
  transition:transform var(--d-4) var(--ease-spring)}
.cap-bell:hover .cv-buddy{transform:translateY(-4px) rotate(-1.5deg)}

/* 3 mail */
.cv-mail{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;max-width:340px}
.cv-mrow{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.cv-av{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-micro);font-weight:700}
.cv-av-2{background:var(--ok-soft);color:var(--ok)}
.cv-mt{flex:1;min-width:0;display:flex;flex-direction:column}
.cv-mt strong,.cv-mt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-mt span{color:var(--ink-2)}
.cv-tag{flex:none;padding:2px 8px;border-radius:var(--r-pill);background:var(--err-soft);color:var(--err);font-size:var(--fs-micro);font-weight:650}
.cv-mhide{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;padding:8px 11px;border:1px dashed var(--line-2);border-radius:var(--r-m);color:var(--ink-3)}
.cv-mhide svg{width:14px;height:14px}
.cv-mhide span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* 4 memory */
.cv-mem{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;max-width:300px}
.cv-mem li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);font-weight:600}
.cv-mem li>span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-k{flex:none;display:inline-flex;align-items:center;gap:4px;width:84px;padding:2px 8px;border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:650}
.cv-k svg{width:12px;height:12px;stroke-width:2.2}
.cv-k-task{background:var(--accent-soft);color:var(--accent-ink)}
.cv-k-date{background:var(--ok-soft);color:var(--ok)}
.cv-k-prom{background:var(--warn-soft);color:color-mix(in srgb,var(--warn) 72%,var(--ink))}

/* 5 Mac control: a command list */
.cv-cmds{list-style:none;width:100%;max-width:280px;padding:6px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-2)}
.cv-cmds li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-s);font-weight:600}
.cv-cmds li:first-child{background:var(--surface-3)}
.cv-cmds li>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-ci{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent)}
.cv-ci svg{width:15px;height:15px}
.cv-ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.cv-ok svg{width:12px;height:12px;stroke-width:2.6}

/* 6 live conversation: interrupted mid-sentence */
.cv-talk{display:flex;flex-direction:column;gap:8px;width:100%;max-width:280px}
.cv-b{max-width:88%;padding:9px 13px;font-size:var(--fs-xs);font-weight:550;line-height:1.4;box-shadow:var(--shadow-1)}
.cv-b-noty{align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-bubble);background:var(--surface)}
.cv-cut{color:var(--ink-3);opacity:.55;-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent)}
.cv-b-you{align-self:flex-end;border-radius:var(--r-bubble-user);background:var(--brand);color:var(--on-brand)}
.cv-stop{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px 4px 6px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  color:var(--ink-2);font-size:var(--fs-micro);font-weight:650}
.cv-stop svg{width:14px;height:14px;padding:2px;border-radius:50%;background:var(--accent-soft);color:var(--accent);stroke-width:2.6}

/* 7 Gmail accounts */
.cv-accts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;max-width:300px}
.cv-acct{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1)}
.cv-acct:first-child{transform:rotate(-1.2deg) translateX(-4px)}
.cv-acct:last-child{transform:rotate(.8deg) translateX(6px)}
.cv-g{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-weight:700}
.cv-g-2{background:var(--ok);color:var(--surface)}
.cv-at{flex:1;min-width:0;display:flex;flex-direction:column}
.cv-at span{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-ro{flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);background:var(--ok-soft);color:var(--ok);font-size:var(--fs-micro);font-weight:650}
.cv-ro svg{width:12px;height:12px;stroke-width:2.2}

/* 8 gets things done: a request, then the plan */
.cv-plan{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;max-width:560px}
.cv-ask{padding:9px 14px;border-radius:var(--r-bubble-user);background:var(--brand);color:var(--on-brand);font-size:var(--fs-xs);font-weight:600;box-shadow:var(--shadow-1);align-self:flex-end}
.cv-steps{list-style:none;position:relative;display:grid;gap:8px;width:100%}
.cv-steps li{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);font-weight:600}
.cv-st{display:flex;flex-direction:column;min-width:0}
.cv-st small{font-size:var(--fs-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cv-sn{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:var(--surface)}
.cv-sn svg{width:13px;height:13px;stroke-width:2.8}
@media (min-width:640px){
  .cv-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .cv-steps::before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:1px dashed var(--line-2)}
  .cv-steps li{flex-direction:column;align-items:flex-start;gap:8px}
}

/* the Windows beta note under the grid */
.cap-win{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-4);margin:var(--space-7) auto 0;max-width:820px;
  color:var(--ink-2);font-size:var(--fs-s);text-align:center}
.cap-win-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font-size:var(--fs-xs);font-weight:650;white-space:nowrap}
.cap-win-tag svg{width:13px;height:13px;color:var(--accent)}
.cap-win-t{flex:1 1 420px}
@media (min-width:768px){.cap-win{flex-wrap:nowrap;text-align:left}}

@media (min-width:1024px) and (max-width:1279.98px){.cap-vis{padding:var(--space-4)}.cap-n2 .cv-screen{--bh:270px}.cv-k{width:auto}
  .cap-n2 .cv-say{right:calc(var(--bh) * .28 + 10px);max-width:150px}}
@media (max-width:639.98px){
  .cap-vis{min-height:196px;padding:var(--space-4)}
  .cv-screen{min-height:258px;--bh:190px}
}