/* Product widgets: shared by every marketing page that shows a live product mock-up.

   Markup: a .wg-plate[data-widget] (blue ink-wash plate) holding one white .wg card. Each
   widget plays one short story with a scripted macOS cursor (assets/widgets.js): steps are
   the [data-cursor] elements, in data-step order. Every state is a class on the plate
   (.wg-armed, .is-in, .is-out, plus whatever each step names in data-state), so CSS owns
   all motion. Without the script, or with reduced motion, a widget renders its first state.
   Page-specific widget parts live with their page; only the shared parts live here. */
.wg-plate { --wg-ok:#067a52; --wg-ok-bg:#e7f7f0; --wg-ok-bar:#1cb487; --wg-bad:#c42b2b; --wg-bad-bg:#fdebec; --wg-bad-bar:#e6303f;
  --wg-warn:#9a5b00; --wg-warn-bg:#fff3dc; --wg-line:#eef0f5; --wg-soft:#f6f7fb; --wg-blue:#2F50E4; --wg-blue-bg:#eaeefc;
  --wg-ease:cubic-bezier(.22,1,.36,1); --wg-spring:cubic-bezier(.34,1.56,.64,1);
  position:relative; border-radius:0; padding:50px; overflow:hidden;
  display:flex; align-items:stretch; background:#dfe9fb url('/assets/launch-plate.webp') center/cover no-repeat; }
/* glass layer between the plate image and the white card: 5% white, 10px blur */
.wg-plate::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.wg { position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; width:100%; background:#fff; border-radius:0;
  padding:clamp(14px, 2vw, 18px); }

/* Corner shapes: squircle on every part with a partial radius; true round on the fully
   rounded ones (pills, chips, tracks and fills, avatars, dots, spinner). */
.wg-plate, .wg-plate * { -webkit-corner-shape:squircle; corner-shape:squircle; }
.wg-pill > span, .wg-pill > span::before, .wg-chip, .wg-tag, .wg-track, .wg-track > i, .wg-av, .wg-dot,
.wg-btn .spin, .wg-cursor::after { -webkit-corner-shape:round; corner-shape:round; }

/* entrance: every .wg-in element rises in on its own --i step */
.wg-in { transition:opacity .55s var(--wg-ease), transform .55s var(--wg-ease); transition-delay:calc(var(--i, 0) * 90ms); }
.wg-armed:not(.is-in) .wg-in { opacity:0; transform:translateY(10px); }
.is-out .wg-in { opacity:0; transform:translateY(-6px); transition-duration:.35s; transition-delay:0s; }

/* header */
.wg-head { display:flex; align-items:center; gap:12px; }
.wg-hic { width:34px; height:34px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--wg-blue-bg); color:var(--wg-blue); }
.wg-hic svg { width:19px; height:19px; display:block; }
.wg-htext { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wg-title { font-size:clamp(15px, 1.7vw, 17px); font-weight:700; color:var(--wui-text-heading, #071437); letter-spacing:-.015em; line-height:1.25; }
.wg-sub { font-size:12px; color:var(--color-text-subtle); line-height:1.35; }
.wg-tag { flex:none; align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:#2440c4; background:var(--wg-blue-bg); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.wg-tag.pdf { color:var(--wg-bad); background:var(--wg-bad-bg); }
.wg-label { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-text-subtle); }

/* status pill that swaps its wording when the story applies a change */
.wg-pill { display:inline-grid; font-size:11px; font-weight:700; white-space:nowrap; }
.wg-pill > span { grid-area:1/1; display:inline-block; line-height:1.4; padding:3px 10px 3px 8px; border-radius:999px; transition:opacity .4s var(--wg-ease), transform .5s var(--wg-spring); }
.wg-pill > span::before { content:""; width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; display:inline-block; vertical-align:1px; }
.wg-pill sub { font-size:.78em; line-height:0; }
.p-ok { color:var(--wg-ok); background:var(--wg-ok-bg); }
.p-bad { color:var(--wg-bad); background:var(--wg-bad-bg); }
.p-mid { color:var(--wg-blue); background:var(--wg-blue-bg); }
.wg-pill .after { opacity:0; transform:translateY(6px) scale(.9); }
.is-applied .wg-pill .before { opacity:0; transform:translateY(-6px) scale(.9); }
.is-applied .wg-pill .after { opacity:1; transform:none; }

/* chips and buttons the cursor presses */
.wg-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--color-text); background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:5px 11px 5px 8px; transition:background .2s, border-color .2s, color .2s, transform .12s var(--wg-ease); }
.wg-chip svg { width:16px; height:16px; display:block; color:var(--wg-blue); transition:color .2s; }
.wg-chip .ic-on { display:none; }
.wg-chip.is-hot { background:#f5f7ff; border-color:#c9d3fa; }
.wg-chip.is-on { background:var(--wg-ok-bg); border-color:transparent; color:var(--wg-ok); }
.wg-chip.is-on svg { color:var(--wg-ok); }
.wg-chip.is-on .ic-off { display:none; }
.wg-chip.is-on .ic-on { display:block; animation:wg-pop .35s var(--wg-spring); }
.wg-btn { position:relative; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#fff; background:var(--wg-blue); border-radius:11px; padding:7px 13px; transition:background .2s, opacity .35s, transform .12s var(--wg-ease); }
.wg-btn svg { width:15px; height:15px; display:block; }
.wg-btn.is-hot { background:#2443cc; }
.wg-btn .spin { display:none; position:absolute; left:50%; top:50%; margin:-6px 0 0 -6px; width:12px; height:12px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:wg-spin .7s linear infinite; }
.wg-btn.is-busy { background:#2443cc; color:transparent; }
.wg-btn.is-busy .spin { display:inline-block; }
.wg-btn.is-busy app-icon { visibility:hidden; }
.is-press { transform:scale(.95); }
@keyframes wg-spin { to { transform:rotate(360deg); } }
@keyframes wg-pop { 0% { transform:scale(.4); } 100% { transform:scale(1); } }

/* scripted cursor */
.wg-cursor { position:absolute; z-index:5; top:0; left:0; width:22px; height:22px; margin:-3px 0 0 -5px; pointer-events:none; opacity:0;
  transform:translate3d(110%, 80%, 0); transition:transform .9s cubic-bezier(.65,0,.25,1), opacity .35s; }
.wg-cursor.is-on { opacity:1; }
.wg-cursor.no-tr { transition:none; }
.wg-cursor svg { width:22px; height:22px; display:block; position:absolute; top:0; left:0; }
.wg-cursor .c-hand { display:none; transform:translate(-3px, 1px); }
.wg-cursor.is-hand .c-arrow { display:none; }
.wg-cursor.is-hand .c-hand { display:block; }
.wg-cursor::after { content:""; position:absolute; left:-6px; top:-8px; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--wg-blue); opacity:0; transform:scale(.3); }
.wg-cursor.is-click::after { animation:wg-ripple .5s var(--wg-ease); }
@keyframes wg-ripple { 0% { opacity:.6; transform:scale(.3); } 100% { opacity:0; transform:scale(1.3); } }


/* progress track: --w is the first state, --w2 the state after the step that names .is-applied */
.wg-track { position:relative; height:7px; border-radius:999px; background:var(--wg-line); }
.wg-track > i { position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:999px; background:var(--wg-blue); transition:width 1s var(--wg-ease); transition-delay:.3s; }
.wg-track.ok > i { background:var(--wg-ok-bar); }
.wg-armed:not(.is-in) .wg-track > i { width:0; }
.is-applied .wg-track > i { width:var(--w2, var(--w)); transition-delay:.15s; }

/* avatar */
.wg-av { width:28px; height:28px; border-radius:50%; flex:none; object-fit:cover; background:#e8ebf5; display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff; }

/* text field the cursor clicks into and types: the field's data-text is typed in, a caret blinks */
.wg-field { display:flex; align-items:center; gap:8px; min-height:36px; border:1px solid var(--color-border); border-radius:12px; padding:7px 11px; background:#fff;
  font-size:12.5px; color:var(--color-text); transition:border-color .2s, background .2s; }
.wg-field.is-hot { border-color:#c9d3fa; }
.wg-field.is-focus { border-color:var(--wg-blue); background:#fff; }
.wg-field .wg-typed:empty::before { content:attr(data-placeholder); color:var(--color-text-subtle); }
.wg-field.is-focus .wg-typed::after { content:""; display:inline-block; width:1.5px; height:1.1em; margin-left:1px; vertical-align:-.18em; background:var(--wg-blue); animation:wg-caret 1s steps(1) infinite; }
@keyframes wg-caret { 50% { opacity:0; } }

@media (max-width:575.98px) {
  .wg-plate { padding:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-cursor { display:none; }
}