/* Features bento — theme-aware, responsive (6-col desktop, 2-col tablet, 1-col phone) */
:root{--bn-bg:#fff;--bn-line:#E2E8F0;--bn-vis:#F8FAFC;--bn-vis2:#fff;--bn-text:#0F172A;--bn-muted:#64748B;--bn-accent:#5412C4;--bn-accent2:#A78BFA;--bn-track:#E2E8F0;--bn-bar:#EDE9FE;--bn-shadow:0 30px 60px -40px rgba(84,18,196,.35)}
html[data-theme="dark"]{--bn-bg:#111113;--bn-line:#27272A;--bn-vis:#0B0B0E;--bn-vis2:#18181B;--bn-text:#FAFAFA;--bn-muted:#A1A1AA;--bn-accent:#8B5CF6;--bn-accent2:#C4B5FD;--bn-track:#27272A;--bn-bar:#2A2A31;--bn-shadow:0 30px 70px -40px rgba(124,58,237,.6)}

.bn-sec .head.center{margin-inline:auto;text-align:center}
.bn-sec .head.center .lead{margin-inline:auto;max-width:640px}
.bn-sec h2 em{font-style:italic;font-weight:700;color:var(--bn-accent)}
html[data-theme="dark"] .bn-sec h2 em{background:linear-gradient(180deg,#DDD6FE,#8B5CF6);-webkit-background-clip:text;background-clip:text;color:transparent}

.bn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.bn-card{position:relative;background:var(--bn-bg);border:1px solid var(--bn-line);border-radius:20px;padding:24px 24px 0;display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .3s}
.bn-card:hover{transform:translateY(-4px);box-shadow:var(--bn-shadow);border-color:var(--bn-accent2)}
.bn-card.s2{grid-column:span 2}.bn-card.s3{grid-column:span 3}.bn-card.s4{grid-column:span 4}
.bn-card h3{display:flex;align-items:center;gap:10px;font-size:1.12rem;letter-spacing:-.01em;margin-bottom:8px;color:var(--bn-text)}
.bn-card h3 .ms{font-size:21px;color:var(--bn-accent2)}
.bn-card header p{color:var(--bn-muted);font-size:.93rem;line-height:1.55;max-width:46ch}
.bn-vis{position:relative;margin:22px -24px 0;flex:1;min-height:230px;background:var(--bn-vis);border-top:1px solid var(--bn-line);overflow:hidden}
.bn-vis.pad{padding:20px 24px}
.bn-card:not(.bn-live) .bn-vis *{animation-play-state:paused}
.bn-card.bn-live .bn-vis *{animation-play-state:running}

/* 1 — notification stack */
.bn-stack{display:grid;place-items:center}
.bn-note{position:absolute;left:50%;top:50%;width:min(300px,84%);margin-left:calc(min(300px,84%) / -2);margin-top:-40px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--bn-vis2);border:1px solid var(--bn-line);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);animation:bnCycle 9s infinite cubic-bezier(.65,0,.35,1);opacity:0}
.bn-note:nth-child(2){animation-delay:-3s}.bn-note:nth-child(3){animation-delay:-6s}
.bn-note .t{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--brand-100,#EDE9FE);color:var(--bn-accent)}
html[data-theme="dark"] .bn-note .t{background:#000;color:var(--bn-accent2)}
.bn-note .t .ms{font-size:26px}
.bn-note small{display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--bn-accent)}
.bn-note small:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bn-note b{display:block;font-size:1rem;color:var(--bn-text);line-height:1.25;margin:2px 0}
.bn-note span.d{font-size:.78rem;color:var(--bn-muted)}
@keyframes bnCycle{
  0%{transform:translateY(0) scale(1);opacity:1;z-index:3}
  30%{transform:translateY(0) scale(1);opacity:1;z-index:3}
  36%{transform:translateY(46px) scale(1.04);opacity:0;z-index:3}
  37%{transform:translateY(-42px) scale(.86);opacity:0;z-index:1}
  44%{transform:translateY(-30px) scale(.88);opacity:.45;z-index:1}
  64%{transform:translateY(-30px) scale(.88);opacity:.45;z-index:1}
  70%{transform:translateY(-15px) scale(.94);opacity:.75;z-index:2}
  97%{transform:translateY(-15px) scale(.94);opacity:.75;z-index:2}
  100%{transform:translateY(0) scale(1);opacity:1;z-index:3}
}

/* 2 — insights chart */
.bn-chart{display:block;width:100%;height:100%;min-height:230px}
.bn-chart .gl{stroke:var(--bn-line);stroke-width:1}
.bn-chart text{fill:var(--bn-muted);font-size:10px;font-weight:600}
.bn-chart .ln{fill:none;stroke:url(#bnLn);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.bn-live .bn-chart .ln{animation:bnDraw 7s infinite cubic-bezier(.65,0,.35,1)}
@keyframes bnDraw{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
.bn-dot{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--bn-accent2);box-shadow:0 0 0 7px rgba(124,58,237,.25);offset-path:path("M18 150 C70 140 82 108 118 112 S150 126 168 96 S196 58 212 70 S246 24 282 14");offset-distance:0%;offset-rotate:0deg;opacity:0}
.bn-live .bn-dot{animation:bnDot 7s infinite cubic-bezier(.65,0,.35,1)}
@keyframes bnDot{0%{offset-distance:0%;opacity:0}6%{opacity:1}45%,85%{offset-distance:100%;opacity:1}95%{offset-distance:100%;opacity:0}100%{offset-distance:0%;opacity:0}}
.bn-tag{position:absolute;right:16px;top:14px;background:var(--bn-text);color:var(--bn-bg);font-weight:800;font-size:.75rem;padding:4px 10px;border-radius:999px}

/* 3 — files */
.bn-files{display:flex;flex-direction:column;gap:6px;justify-content:center}
.bn-file{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:14px}
.bn-file .c{width:40px;height:40px;border-radius:50%;background:var(--bn-accent);color:#fff;display:grid;place-items:center;flex:none;position:relative}
.bn-file .c .ms{font-size:21px}
.bn-file .n{flex:1;min-width:0}.bn-file b{display:block;font-size:.95rem;color:var(--bn-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-file .tr{height:6px;border-radius:6px;background:var(--bn-track);margin-top:7px;overflow:hidden}
.bn-file .tr i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);border-radius:6px;background:linear-gradient(90deg,var(--bn-accent),var(--bn-accent2))}
.bn-live .bn-file .tr i{animation:bnFill 6s infinite cubic-bezier(.65,0,.35,1)}
.bn-file:nth-child(2) .tr i{animation-delay:.6s}.bn-file:nth-child(3) .tr i{animation-delay:1.2s}
@keyframes bnFill{0%{transform:scaleX(0)}55%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.bn-file .p{font-size:.72rem;font-weight:800;color:var(--bn-muted);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

/* 4 — analytics */
.bn-an{display:flex;flex-direction:column;gap:14px}
.bn-tabs{display:flex;gap:4px;flex-wrap:wrap}
.bn-tab{border:0;background:transparent;color:var(--bn-muted);font:inherit;font-size:.86rem;font-weight:600;padding:8px 14px;min-height:40px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.bn-tab:hover{color:var(--bn-text)}
.bn-tab[aria-pressed=true]{background:var(--bn-bar);color:var(--bn-text)}
.bn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;flex:1}
.bn-pn{background:var(--bn-vis2);border:1px solid var(--bn-line);border-radius:14px;padding:14px 14px 10px;display:flex;flex-direction:column;min-width:0}
.bn-pn h4{font-size:.78rem;color:var(--bn-muted);font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.bn-plot{position:relative;height:118px;display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));column-gap:10px;align-items:end}
.bn-y{position:absolute;left:0;top:0;bottom:0;width:30px;display:flex;flex-direction:column;justify-content:space-between;font-size:.66rem;color:var(--bn-muted);font-weight:600}
.bn-y span{line-height:1}
.bn-col{grid-column:auto;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.bn-col:nth-of-type(1){grid-column:2}
.bn-b{width:100%;max-width:46px;height:100%;border-radius:8px 8px 0 0;background:var(--bn-bar);transform-origin:50% 100%;transform:scaleY(calc(var(--v,0) / 100));transition:transform .9s cubic-bezier(.16,1,.3,1);position:relative}
.bn-b.hi{background:linear-gradient(var(--bn-accent),var(--bn-accent2))}
.bn-b em{position:absolute;left:50%;top:-18px;transform:translateX(-50%) scaleY(calc(100 / max(var(--v,1),1)));font-style:normal;font-size:.68rem;font-weight:800;color:var(--bn-text);white-space:nowrap}
.bn-tg{position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--bn-text);opacity:.85;bottom:calc(var(--t,50) * 1%);transition:bottom .9s cubic-bezier(.16,1,.3,1)}
.bn-x{display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));column-gap:10px;margin-top:6px;font-size:.66rem;color:var(--bn-muted);font-weight:600;text-align:center}
.bn-x span:first-child{visibility:hidden}

/* 5 — smart reminders grid */
.bn-nudge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:18px}
.bn-cell{position:relative;border:1px solid var(--bn-line);background:var(--bn-vis2);border-radius:12px;padding:10px;min-height:54px;display:flex;flex-direction:column;gap:6px;justify-content:center;transition:border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1),background .3s}
.bn-cell i{display:block;height:5px;border-radius:5px;background:var(--bn-track)}
.bn-cell i:nth-child(2){width:62%}
.bn-cell .ok{position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;background:var(--bn-accent);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.bn-cell .ok .ms{font-size:14px}
.bn-cell.on{border-color:var(--bn-accent2);transform:scale(1.06);background:var(--bn-bar);z-index:2}
.bn-cell.on .ok{transform:scale(1)}
.bn-cell.done .ok{transform:scale(1);background:var(--bn-track);color:var(--bn-muted)}
.bn-cell.late{border-style:dashed}
.bn-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,14px) scale(.9);opacity:0;background:var(--bn-text);color:var(--bn-bg);border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:800;white-space:nowrap;transition:.4s cubic-bezier(.34,1.56,.64,1);z-index:3}
.bn-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* also-included chips */
.bn-also{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.bn-also span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--bn-bg);border:1px solid var(--bn-line);font-weight:600;font-size:.92rem;color:var(--bn-text);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .2s}
.bn-also span .ms{font-size:20px;color:var(--bn-accent2)}
.bn-also span:hover{transform:translateY(-3px);border-color:var(--bn-accent2)}

/* responsive */
@media (max-width:1100px){
  .bn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn-card.s2,.bn-card.s3,.bn-card.s4{grid-column:span 1}
  .bn-card.c3,.bn-card.c4,.bn-card.c5{grid-column:span 2}
  .bn-card.c5 .bn-vis{min-height:260px}
}
@media (max-width:700px){
  .bn-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .bn-card.c1,.bn-card.c2,.bn-card.c3,.bn-card.c4,.bn-card.c5{grid-column:auto}
  .bn-card{padding:20px 18px 0;border-radius:18px}
  .bn-vis{margin:18px -18px 0;min-height:210px}.bn-vis.pad{padding:16px 18px}
  .bn-pair{grid-template-columns:minmax(0,1fr)}
  .bn-pn+.bn-pn{display:none}
  .bn-tab{padding:8px 11px;font-size:.82rem}
  .bn-also{gap:8px}.bn-also span{padding:9px 13px;font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .bn-note{animation:none}.bn-note:first-child{opacity:1}.bn-chart .ln{stroke-dashoffset:0}.bn-dot{offset-distance:100%;opacity:1}.bn-file .tr i{transform:scaleX(1)}
}

/* chart column fixes */
.bn-plot{padding-left:36px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bn-col:nth-of-type(1){grid-column:auto}
.bn-b em{display:none}
.bn-val{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--v,0) * 1% + 4px);font-size:.68rem;font-weight:800;color:var(--bn-text);transition:bottom .9s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.bn-tg{left:15%;right:auto;width:70%;bottom:calc(var(--t,50) * 1%)}
.bn-x{padding-left:36px;grid-template-columns:repeat(3,minmax(0,1fr))}
.bn-x span:first-child{visibility:visible}

/* fixes */
.bn-chart .ln{stroke-dashoffset:0}
.bn-also>span .ms{padding:0;border:0;background:none;border-radius:0}
.bn-also span{padding:0;border:0;background:none}
.bn-also>span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--bn-bg);border:1px solid var(--bn-line)}
.bn-plot{height:118px}
.bn-col{height:118px}
.bn-b{height:calc(var(--v,0) * 1%);transform:none;transition:height .9s cubic-bezier(.16,1,.3,1)}

/* insights chart: the pointer lives inside the SVG, so it follows the line exactly at every size */
.bn-chart{display:block;width:100%;height:100%;min-height:230px;overflow:visible}
.bn-vis:has(.bn-chart){overflow:hidden}
.bn-chart .ln{fill:none;stroke:url(#bnLn);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:none!important}
.bn-chart .bn-pt .halo{fill:rgba(139,92,246,.28)}
.bn-chart .bn-pt .dot{fill:var(--bn-accent2);stroke:var(--bn-bg);stroke-width:2}
.bn-chart .tag{fill:var(--bn-text)}.bn-chart .tagt{fill:var(--bn-bg);font-size:10px;font-weight:800}
.bn-dot,.bn-tag{display:none!important}
.bn-chart .tagt{font-size:10px;letter-spacing:.01em;font-weight:800;dominant-baseline:auto}