/*
 * Shared styles for the product-page art.
 *
 * Every image is one focused piece of product UI (after the v2.0 Product
 * Prototype, Figma kK7UO7YFvqylVzXxun7CwN) floating on a forest brand
 * gradient, to the quality bar of the Website v2.0 marketing frames
 * (xDT2nZ3YIwvZwO3rkv1dMv, 480:3916 / 480:4053 / 480:4099): few rows, large
 * type, soft white cards.
 *
 * Canvas sizes in CSS px, and the scale render.py exports them at. The
 * canvases are larger than the UI so it sits at ~60% of the frame, and the
 * scale is high enough to stay sharp where the site shows them biggest (the
 * problem panel runs ~650px wide on desktop, so 2x retina wants ~1300px):
 *   .square   520 x 520  @3x  problem cards
 *   .feature  640 x 512  @3x  feature rows (5:4)
 *   .hero     790 x 762  @2x  product hero, window on gradient
 * Home page:
 *   .tall     520 x 531  @3x  Problems cards (800 x 817)
 *   .pair     480 x 475  @3x  Our Agents, two-up panels (382 x 378)
 *   .wide     960 x 447  @2x  Our Agents, single panel (812 x 378)
 *   .panel    560 x 555  @3x  Use Case tabs (812 x 804)
 */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('schibsted-grotesk-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 900;
}

:root {
  --fg: #192623;
  --ink: #0c0a09;
  --muted: #78716c;
  --border: #e7e5e4;
  --surface: #f5f5f4;
  --tint: #fafaf9;
  --primary: #064e3b;
  --primary-10: rgb(6 78 59 / 0.08);
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --ok-line: #a7f3d0;
  --err: #dc2626;
  --err-bg: #fef2f2;
  --err-line: #fecaca;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-line: #fde68a;
  --blue: #2563eb;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Fixed canvas per kind: headless Chrome won't open a window narrower than
   ~500px, so the page is sized here and render.py crops to it. */
html { background: #fff; }
body.square { width: 520px; height: 520px; }
body.feature { width: 640px; height: 512px; }
body.hero { width: 790px; height: 762px; }
/* Home page slots. */
body.tall { width: 520px; height: 531px; }
body.pair { width: 480px; height: 475px; }
body.wide { width: 960px; height: 447px; }
body.panel { width: 560px; height: 555px; }

body {
  position: relative;
  overflow: hidden;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  background: #032b20 center / cover no-repeat;
}
body[data-bg='diagonal'] { background-image: url('bg/diagonal.jpg'); }
body[data-bg='halo'] { background-image: url('bg/halo.jpg'); }
body[data-bg='dual-flow'] { background-image: url('bg/dual-flow.jpg'); }
body[data-bg='crest'] { background-image: url('bg/crest.jpg'); }
body[data-bg='rise'] { background-image: url('bg/rise.jpg'); }
body[data-bg='sweep'] { background-image: url('bg/sweep.jpg'); }
body[data-bg='wave'] { background-image: url('bg/wave.jpg'); }
body[data-flip] { background-position: right center; transform: none; }

/* Stage: centres the composition. */
.stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ── Cards ───────────────────────────────────────── */

.card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 0.7);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 24px 48px -18px rgb(0 24 14 / 0.55);
  overflow: hidden;
}
.card.soft { background: rgb(255 255 255 / 0.94); }
.card.pad { padding: 18px 20px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--fg); }
.card-sub { font-size: 12px; line-height: 16px; color: var(--muted); }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  line-height: 20px;
}
.row:last-child { border-bottom: 0; }
.row .lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta { font-size: 12px; color: var(--muted); }
.row.dim { opacity: 0.45; }
.row.tint { background: var(--tint); }

.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.2px; }

/* Stacked cards: each one peeks out from under the next. */
.stack { position: relative; }
.stack > .card + .card { margin-top: -10px; }
/* Cards further back: solid white like the front one (a translucent card
   picks up the dark gradient and turns grey), a step smaller, with only
   their contents faded. */
.ghost, .ghost-2 { background: #fff; box-shadow: 0 12px 28px -16px rgb(0 24 14 / 0.45); }
.ghost { transform: scale(0.95); }
.ghost-2 { transform: scale(0.9); }
.ghost > * { opacity: 0.6; }
.ghost-2 > * { opacity: 0.45; }

/* ── Chips and tags ─────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  background: #fff;
}
.chip.err { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.chip.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.chip.brand { color: var(--primary); background: var(--primary-10); border-color: rgb(6 78 59 / 0.18); }
.chip.solid { color: #fafaf9; background: var(--primary); border-color: var(--primary); }
.chip.pill { border-radius: 999px; }

/* C / IO / LI / CR level tags from the prototype. */
.lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  background: #fff;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  white-space: nowrap;
}
.btn.primary { color: #fafaf9; background: var(--primary); border-color: var(--primary); }

.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--tint);
  color: var(--fg);
}
.ico.brand { color: var(--primary); background: var(--primary-10); border-color: rgb(6 78 59 / 0.15); }
.ico.err { color: var(--err); background: var(--err-bg); border-color: var(--err-line); }
.ico svg { width: 15px; height: 15px; }
.i { width: 16px; height: 16px; flex-shrink: 0; }

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--primary); flex-shrink: 0; }
.dot.err { background: var(--err); }
.dot.warn { background: var(--warn); }

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #fff;
}
.check.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.check svg { width: 12px; height: 12px; }

/* Health bar from the Campaigns table. */
.bar { position: relative; height: 4px; border-radius: 99px; background: var(--surface); overflow: hidden; }
.bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--ok); }
.bar.warn > span { background: #f59e0b; }
.bar.err > span { background: var(--err); }

/* Form fields from the Fix Now sidebar. */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
.input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}
.input.focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(6 78 59 / 0.1); }

/* Toast that floats over a card. */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 18px 36px -14px rgb(0 24 14 / 0.6);
}

/* ── Hero composition ───────────────────────────────
   White canvas, forest panel bleeding off the right, and the app window
   inset 50px from the panel's left, top and bottom, bleeding off the right
   too. Pick the gradient with data-bg on .hero-panel. Size table columns
   per page with a <style> block (.th, .tr { grid-template-columns }). */
body.hero { background: #fff; }
.hero-panel { position: absolute; left: 40px; top: 40px; right: -30px; bottom: 40px; border-radius: 28px; background: #032b20 center / cover; }
.hero-panel[data-bg='diagonal'] { background-image: url('bg/diagonal.jpg'); }
.hero-panel[data-bg='halo'] { background-image: url('bg/halo.jpg'); }
.hero-panel[data-bg='dual-flow'] { background-image: url('bg/dual-flow.jpg'); }
.hero-panel[data-bg='crest'] { background-image: url('bg/crest.jpg'); }
.hero-panel[data-bg='rise'] { background-image: url('bg/rise.jpg'); }
.hero-panel[data-bg='sweep'] { background-image: url('bg/sweep.jpg'); }
.hero-panel[data-bg='wave'] { background-image: url('bg/wave.jpg'); }
.hero-win { position: absolute; left: 90px; top: 90px; bottom: 90px; width: 860px; display: flex; flex-direction: column; }
.hero-win .app { flex: 1; }

/* ── App window (Website v2.0 Marketing, 480:3910) ── */

.window {
  border-radius: 12px;
  background: #f4f4f4;
  padding: 0 5px 5px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.06),
    0 40px 80px -30px rgb(0 20 12 / 0.7);
}
.window-bar { display: flex; gap: 7px; padding: 11px 8px; }
.window-bar i { width: 11px; height: 11px; border-radius: 99px; background: #ff5f57; }
.window-bar i:nth-child(2) { background: #febc2e; }
.window-bar i:nth-child(3) { background: #28c840; }
.app { display: flex; border-radius: 8px; background: #fff; overflow: hidden; border: 1px solid #ececec; }
.side { width: 188px; flex-shrink: 0; background: var(--tint); border-right: 1px solid var(--border); padding: 14px 10px; }
.side .logo { display: flex; align-items: baseline; justify-content: space-between; padding: 0 6px 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.side .logo b { color: #248667; font-weight: 600; }
.side .logo small { font-size: 10px; font-weight: 400; color: var(--muted); }
.side .grp { padding: 4px 6px 6px; font-size: 10.5px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--fg); }
.nav svg { width: 14px; height: 14px; }
.nav.sub { padding-left: 26px; }
.nav.on { background: var(--primary-10); color: var(--primary); }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.topbar b { color: var(--fg); font-weight: 400; }
.content { padding: 18px 20px; }
.h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.lede { margin-top: 3px; font-size: 12px; color: var(--muted); }

.table { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.th, .tr { display: grid; align-items: center; gap: 10px; padding: 0 14px; }
.th { height: 34px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.tr { min-height: 50px; padding-block: 8px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
.tr:last-child { border-bottom: 0; }
.tr .t { font-weight: 500; }
.tr .s { font-size: 11px; color: var(--muted); }
.tr.child { background: var(--tint); }
.tr.dim { opacity: 0.4; }

/* ── Live playback (animate.js) ───────────────────────
   Only when a page is shown live on the site. Screenshots and reduced motion
   never get .live/.play, so they show the finished frame. Until the image
   first comes on screen, animated elements wait hidden so the build-up isn't
   spoiled by a flash of the end state. */
.live { overflow: hidden; }
.live:not(.play) [data-a] { opacity: 0; }
.live:not(.play) .bar > span[data-a] { opacity: 1; transform: scaleX(0); }

.play [data-a] { animation-duration: 0.5s; animation-delay: var(--d, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.play [data-a='rise'] { animation-name: a-rise; animation-duration: 0.6s; }
.play [data-a='row'] { animation-name: a-row; }
.play [data-a='pop'] { animation-name: a-pop; animation-duration: 0.35s; }
.play [data-a='tick'] { animation-name: a-tick; animation-duration: 0.35s; }
.play [data-a='fill'] { animation-name: a-fill; animation-duration: 0.9s; transform-origin: left; }
.play [data-a='press'] { animation-name: a-press; animation-duration: 0.4s; }
.play [data-a='toast'] { animation-name: a-toast; animation-duration: 0.6s; }
.play .ghost[data-a='rise'] { animation-name: a-rise-ghost; }
.play .ghost-2[data-a='rise'] { animation-name: a-rise-ghost-2; }
/* After everything lands, errors pulse once: the thing to fix. */
.play .chip.err[data-alert] { animation-name: a-pop, a-alert; animation-duration: 0.35s, 0.9s; animation-delay: var(--d, 0s), var(--end, 2s); animation-fill-mode: both, none; }

@keyframes a-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes a-rise-ghost { from { opacity: 0; transform: translateY(18px) scale(0.93); } }
@keyframes a-rise-ghost-2 { from { opacity: 0; transform: translateY(18px) scale(0.86); } }
@keyframes a-row { from { opacity: 0; transform: translateY(6px); } }
@keyframes a-pop { from { opacity: 0; transform: scale(0.7); } }
@keyframes a-tick { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } }
@keyframes a-fill { from { transform: scaleX(0); } }
@keyframes a-press { 0% { opacity: 1; } 40% { transform: scale(0.94); } 100% { transform: none; } }
@keyframes a-toast { from { opacity: 0; transform: translateY(16px); } }
@keyframes a-alert { 0%, 100% { box-shadow: 0 0 0 0 rgb(220 38 38 / 0); } 40% { box-shadow: 0 0 0 5px rgb(220 38 38 / 0.18); } }