/* ════════════════════════════════════════════════════════════
   Workfied — app mocks & data viz (indigo)   prefix: aw- (window) · ac- (cards) · ch- (charts)
   Realistic, recreated-in-CSS UI so the marketing page shows the
   real product surface without flat screenshots.
   ════════════════════════════════════════════════════════════ */

/* ─── Hero stage: phone + floating cards (mobile-first) ─── */
.hero-stage {
  width: 100%; max-width: 1000px; margin: 60px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center;
}
.hero-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hero-side.left { align-items: flex-end; }
.hero-side .ac-card, .hero-side .ac-capture, .hero-side .ac-rec { width: 100%; max-width: 290px; box-shadow: var(--sh-2); }
@media (max-width: 980px) {
  .hero-stage { grid-template-columns: 1fr; justify-items: center; max-width: 340px; gap: 18px; }
  .hero-side { display: none; }
  .hero-side.left { display: flex; order: 2; align-items: stretch; }
  .hero-side.left .ac-card { max-width: 100%; }
}

/* phone */
.phone { flex-shrink: 0; width: 300px; background: #0D0D17; border-radius: 46px; padding: 11px; border: 1px solid #2A2A38; box-shadow: var(--sh-3); }
.phone-screen { position: relative; background: var(--paper); border-radius: 36px; overflow: hidden; height: 600px; }
.phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 100px; height: 27px; background: #0D0D17; border-radius: 99px; z-index: 6; }
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 15px 26px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.phone-status .ind { display: flex; gap: 5px; align-items: center; color: var(--ink2); }
.phone-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 13px; text-align: left; }
.phone-greet h4 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.phone-greet .sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink3); display: flex; align-items: center; gap: 8px; }
.phone-streak { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--i50); border: 1px solid var(--i100); color: var(--i700); font-size: 11.5px; font-weight: 600; }
.phone-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-around; padding: 0 18px 8px; }
.phone-tabbar .tb { color: var(--ghost); }
.phone-tabbar .tb.on { color: var(--i600); }
.phone-tabbar .tb.rec { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-i); margin-top: -16px; }

/* ─── Generic app card ─── */
.ac-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; color: var(--ink); box-shadow: var(--sh-1); text-align: left; }
.ac-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); display: flex; align-items: center; gap: 7px; }
.ac-label.ind { color: var(--i700); }
.ac-title { font-size: 17px; font-weight: 600; letter-spacing: -0.016em; margin: 6px 0 0; }
.ac-stack { display: flex; flex-direction: column; gap: 12px; }

/* capture prompt (indigo) */
.ac-capture { background: linear-gradient(160deg, #EFF0FE, #E2E3FD); border: 1px solid var(--i100); border-radius: var(--r-lg); padding: 18px 20px; }
.ac-capture .row { display: flex; align-items: center; gap: 14px; }
.ac-mic { width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0; background: var(--grad); box-shadow: var(--sh-i); display: flex; align-items: center; justify-content: center; }
.ac-mic.lg { width: 60px; height: 60px; border-radius: 18px; }
.ac-capture .t { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.ac-capture .s { font-size: 12.5px; color: var(--i700); margin-top: 2px; opacity: .85; }
.ac-wave { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.ac-wave i { width: 3px; border-radius: 3px; background: var(--i500); opacity: .85; }
@media (prefers-reduced-motion: no-preference) { .ac-wave i { animation: wv 1s ease-in-out infinite; } }
@keyframes wv { 0%,100% { height: 8px; } 50% { height: 22px; } }

/* dark transcript card */
.ac-rec { background: #15151C; border-radius: var(--r-lg); padding: 18px 20px; color: #fff; border: 1px solid #2A2A38; box-shadow: var(--sh-3); text-align: left; }
.ac-rec .top { display: flex; justify-content: space-between; align-items: center; }
.ac-rec .live { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ac-rec .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--i400); box-shadow: 0 0 0 4px rgba(117,123,250,.25); }
.ac-rec .time { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ac-rec .words { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); letter-spacing: -0.008em; }
.ac-rec .words .hl { color: var(--i400); font-weight: 600; }
.ac-rec .words .hg { color: #5CC78F; font-weight: 600; }
.ac-chiprow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.ac-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap; }
.ac-rec .ac-chip.ind { background: rgba(117,123,250,.2); color: var(--i300); }
.ac-rec .ac-chip.green { background: rgba(92,199,143,.16); color: #6FD79E; }
.ac-rec .ac-chip.red { background: rgba(232,109,86,.16); color: #F0917A; }

/* extracted-item rows */
.ac-items { display: flex; flex-direction: column; gap: 10px; }
.ac-item { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sh-1); }
.ac-item .ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ac-item .ic.task { background: var(--i50); color: var(--i600); }
.ac-item .ic.win { background: var(--greenBg); color: var(--green); }
.ac-item .ic.block { background: var(--redBg); color: var(--red); }
.ac-item .ic.person { background: var(--violetBg); color: var(--violet); font-weight: 700; font-size: 14px; }
.ac-item .tx { min-width: 0; flex: 1; }
.ac-item .k { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.ac-item .t { font-size: 14.5px; font-weight: 550; letter-spacing: -0.01em; color: var(--ink); margin-top: 1px; }
.ac-item .s { font-size: 12px; color: var(--ink3); margin-top: 1px; }
.ac-item .ok { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--i600); color: #fff; display: flex; align-items: center; justify-content: center; }

/* generated doc */
.ac-doc .dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-doc .sec { margin-top: 14px; }
.ac-doc .sn { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--i700); }
.ac-doc .sp { font-size: 14px; color: var(--ink2); line-height: 1.6; margin: 5px 0 0; }
.ac-doc .sp b { color: var(--ink); font-weight: 600; }
.ac-doc hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0 0; }
.ac-doc .ac-chip.ind { background: var(--i50); color: var(--i700); border: 1px solid var(--i100); }

/* person rows */
.ac-person { display: flex; align-items: center; gap: 12px; }
.ac-person .av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; }
.ac-person .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.ac-person .mt { font-size: 12px; color: var(--ink3); margin-top: 1px; }

/* ask q&a */
.ac-ask .q { font-size: 14.5px; font-weight: 550; color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 14px; }
.ac-ask .a { font-size: 13.5px; color: var(--ink2); line-height: 1.6; margin-top: 11px; }
.ac-ask .a b { color: var(--ink); font-weight: 600; }
.ac-ask .cite { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--i700); background: var(--i50); border: 1px solid var(--i100); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* goal card */
.ac-goal .ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-goal .due { font-size: 11.5px; font-weight: 600; color: var(--i700); background: var(--i50); border: 1px solid var(--i100); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ac-metrics { margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; }
.ac-metric { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink2); line-height: 1.45; align-items: baseline; }
.ac-metric svg { color: var(--green); flex-shrink: 0; }
.ac-metric.todo svg { color: var(--ghost); }

/* ════════ CHARTS ════════ */

/* progress / readiness bar */
.ch-bar { height: 9px; border-radius: 99px; background: var(--i100); margin-top: 14px; overflow: hidden; }
.ch-bar i { display: block; height: 100%; width: var(--v, 67%); border-radius: 99px; background: var(--grad); }
@keyframes barFill { from { width: 0; } }
@media (prefers-reduced-motion: no-preference) { .in .ch-bar i { animation: barFill 1.2s cubic-bezier(.4,0,.1,1); } }
.ch-bar-meta { display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; color: var(--ink3); }
.ch-bar-meta b { color: var(--i700); font-weight: 600; }

/* radial gauge */
.ch-gauge { display: flex; align-items: center; gap: 18px; }
.ch-gauge svg { flex-shrink: 0; transform: rotate(-90deg); }
.ch-gauge .ring-fg { stroke: url(#gaugeGrad); stroke-linecap: round; stroke-dasharray: var(--circ); stroke-dashoffset: var(--off); }
@keyframes gaugeSweep { from { stroke-dashoffset: var(--circ); } }
@media (prefers-reduced-motion: no-preference) { .in .ch-gauge .ring-fg { animation: gaugeSweep 1.4s cubic-bezier(.4,0,.1,1); } }
.ch-gauge .gnum { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.ch-gauge .glab { font-size: 12.5px; color: var(--ink3); margin-top: 2px; line-height: 1.4; }

/* vertical bar chart (before / after style) */
.ch-bars { display: flex; align-items: flex-end; gap: 16px; height: 150px; margin-top: 18px; padding-top: 6px; }
.ch-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 10px; }
.ch-col .bar { width: 100%; max-width: 64px; border-radius: 10px 10px 4px 4px; height: var(--h); position: relative; }
@keyframes barRise { from { height: 0; } }
@media (prefers-reduced-motion: no-preference) { .in .ch-col .bar { animation: barRise 1.1s cubic-bezier(.4,0,.1,1); } }
.ch-col .bar.muted { background: var(--bg3); border: 1px solid var(--line2); }
.ch-col .bar.fill { background: var(--grad); box-shadow: var(--sh-i); }
.ch-col .bval { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; white-space: nowrap; }
.ch-col .bar.muted .bval { color: var(--ink2); }
.ch-col .bar.fill .bval { color: var(--i700); }
.ch-col .clab { font-size: 12px; color: var(--ink3); text-align: center; }

/* area / line chart (memory growth) */
.ch-area { position: relative; margin-top: 6px; }
.ch-area svg { width: 100%; height: auto; }
.ch-area .ln { fill: none; stroke: url(#lineGrad); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 0; }
.ch-area .fillarea { fill: url(#areaGrad); opacity: 1; }
.ch-area .dot { fill: #fff; stroke: var(--i600); stroke-width: 3; opacity: 1; }
@keyframes lnDraw { from { stroke-dashoffset: 600; } }
@keyframes fadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .in .ch-area .ln { animation: lnDraw 1.8s ease; }
  .in .ch-area .fillarea { animation: fadeIn 1.2s ease .5s both; }
  .in .ch-area .dot { animation: fadeIn .4s ease 1.5s both; }
}

/* heatmap / streak */
.ch-heat { display: flex; flex-direction: column; gap: 6px; }
.ch-heat .row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ch-cell { aspect-ratio: 1; border-radius: 6px; background: var(--i100); }
@keyframes cellPop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .in .ch-cell { animation: cellPop .4s cubic-bezier(.3,1.4,.5,1) backwards; } }
.ch-cell.l1 { background: var(--i200); } .ch-cell.l2 { background: var(--i400); } .ch-cell.l3 { background: var(--i600); }
.ch-cell.off { background: var(--bg3); }
.ch-heat .meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink3); margin-top: 4px; }
.ch-heat .meta b { color: var(--i700); font-weight: 600; }

/* ════════ RESULTS DASHBOARD (dark) — large infographics ════════ */
.rd-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-top: 26px; }
@media (max-width: 920px) { .rd-grid { grid-template-columns: 1fr; } }
.rd-card { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); padding: 26px 28px; overflow: hidden; }
.rd-card .rd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rd-card .rd-t { font-size: 16px; font-weight: 600; letter-spacing: -0.014em; color: #fff; }
.rd-card .rd-s { font-size: 12.5px; color: var(--ondark2); margin-top: 3px; }
.rd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(117,123,250,.18); color: var(--i300); border: 1px solid rgba(117,123,250,.32); white-space: nowrap; }
.rd-pill.up::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; }

.rd-stack { display: flex; flex-direction: column; gap: 20px; }
.rd-figure { display: flex; align-items: baseline; gap: 10px; }
.rd-figure .v { font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; background: linear-gradient(120deg,#fff,#C6C9FB); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rd-figure .u { font-size: 13px; color: var(--ondark2); }

/* large line+area chart with gridlines + axes */
.rd-chart { margin-top: 18px; }
.rd-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.rd-chart .grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.rd-chart .axis text { fill: var(--ondark3); font-size: 11px; font-weight: 500; font-family: var(--font); }
.rd-chart .barb { fill: url(#rdBar); rx: 4; }
.rd-area { fill: url(#rdArea); opacity: 1; }
.rd-line { fill: none; stroke: url(#rdLine); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1100; stroke-dashoffset: 0; }
.rd-pt { fill: #0D0D17; stroke: var(--i400); stroke-width: 3; }
.rd-pt.glow { fill: var(--i400); stroke: rgba(117,123,250,.4); stroke-width: 8; }
.rd-callout rect { fill: #fff; }
.rd-callout text { fill: var(--ink); font-size: 13px; font-weight: 700; font-family: var(--font); }
@keyframes rdDraw { from { stroke-dashoffset: 1100; } }
@keyframes rdRise { from { transform: scaleY(0); } }
@keyframes rdFade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .in .rd-line { animation: rdDraw 1.9s cubic-bezier(.4,0,.1,1); }
  .in .rd-area { animation: rdFade 1.1s ease .7s both; }
  .in .rd-pt, .in .rd-callout { animation: rdFade .5s ease 1.5s both; }
  .in .rd-chart .barb { transform-box: fill-box; transform-origin: bottom; animation: rdRise 1s cubic-bezier(.4,0,.1,1) backwards; }
}

/* donut breakdown */
.rd-donut { display: flex; align-items: center; gap: 22px; margin-top: 4px; }
.rd-donut svg { flex-shrink: 0; transform: rotate(-90deg); }
.rd-donut .seg { fill: none; stroke-width: 16; stroke-linecap: butt; stroke-dasharray: var(--len) var(--rest); stroke-dashoffset: var(--off); }
@keyframes donutGrow { from { stroke-dasharray: 0 999; } }
@media (prefers-reduced-motion: no-preference) { .in .rd-donut .seg { animation: donutGrow 1.2s cubic-bezier(.4,0,.1,1) backwards; } }
.rd-donut .center { position: absolute; }
.rd-donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-donut-wrap .ctr { position: absolute; text-align: center; }
.rd-donut-wrap .ctr .cn { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
.rd-donut-wrap .ctr .cl { font-size: 10.5px; color: var(--ondark2); }
.rd-legend { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.rd-leg { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ondark); }
.rd-leg .d { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rd-leg .lv { margin-left: auto; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

/* before/after horizontal compare */
.rd-compare { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.rd-row { display: flex; flex-direction: column; gap: 7px; }
.rd-row .rl { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ondark2); }
.rd-row .rl b { color: #fff; font-weight: 600; }
.rd-track { height: 30px; border-radius: 9px; background: rgba(255,255,255,.06); overflow: hidden; }
.rd-track i { display: block; height: 100%; border-radius: 9px; width: var(--w); transform-origin: left; }
.rd-track i.before { background: rgba(255,255,255,.22); }
.rd-track i.after { background: var(--grad); box-shadow: var(--sh-i); }
@keyframes rdGrow { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) { .in .rd-track i { animation: rdGrow 1.1s cubic-bezier(.4,0,.1,1) backwards; } .in .rd-track i.after { animation-delay: .2s; } }