/* WAR marketing site — merged design tokens (source: WAR Design System Latest/tokens/*.css) */

/* fonts.css */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400;1,700&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap");

/* colors.css */
:root{
  --war-bg:#0B1730; --war-bg-2:#0F1E3D; --war-bg-3:#142549;
  --war-panel:#101F42; --war-panel-2:#0D1A38; --war-well:#060B18;
  --war-border:#22355E; --war-border-light:#2C4270;
  --war-gold:#E0A92E; --war-gold-dim:#8A6A1F; --war-gold-glow:rgba(224,169,46,.18);
  --war-gold-ink:#1A1300;
  --war-text:#EAF0FF; --war-text-dim:#9FB0D6; --war-text-faint:#5E729E; --war-text-code:#B9C6E8;
  --war-green:#3ED598; --war-green-dim:rgba(62,213,152,.15); --war-green-border:#1E6B4B;
  --war-red:#FF6B6B; --war-red-dim:rgba(255,107,107,.15); --war-red-border:#7A2F2F;
  --war-amber:#FFB84D; --war-amber-dim:rgba(255,184,77,.15); --war-amber-border:#7A5A1F;
  --war-blue:#5B9BFF; --war-blue-dim:rgba(91,155,255,.15); --war-blue-border:#2B4A8A;
  --war-violet:#C199FF; --war-violet-dim:#2A2140; --war-violet-border:#4A3A75;
  --surface-page:var(--war-bg); --surface-card:var(--war-panel); --surface-card-2:var(--war-panel-2);
  --surface-raised:var(--war-bg-3); --surface-well:var(--war-well);
  --text-body:var(--war-text); --text-secondary:var(--war-text-dim); --text-tertiary:var(--war-text-faint);
  --accent:var(--war-gold); --accent-contrast:var(--war-gold-ink);
  --border-default:var(--war-border); --border-strong:var(--war-border-light);
  --status-complete:var(--war-green); --status-running:var(--war-blue);
  --status-blocked:var(--war-red); --status-warning:var(--war-amber);
  --status-idle:var(--war-text-faint); --status-replay:var(--war-violet);
  --confidence-high:var(--war-green); --confidence-mid:var(--war-amber); --confidence-low:var(--war-red);
  --page-vignette:radial-gradient(1200px 600px at 10% -10%, #14265490 0%, transparent 60%),radial-gradient(1200px 800px at 100% 0%, #1a2c5c60 0%, transparent 55%);
}

/* typography.css */
:root{
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --text-hero:44px; --text-h1:28px; --text-h2:20px; --text-h3:15px;
  --text-metric:28px; --text-metric-lg:36px;
  --text-base:14px; --text-sm:12.5px; --text-xs:11px; --text-2xs:10.5px;
  --leading-tight:1.2; --leading-body:1.5; --leading-loose:1.65;
  --weight-body:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --kicker-tracking:.14em; --label-tracking:.08em; --heading-tracking:.02em;
}

/* spacing.css */
:root{
  --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px; --space-5:14px;
  --space-6:16px; --space-7:20px; --space-8:22px; --space-9:30px; --space-10:60px;
  --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-pill:999px; --radius-hairline:2px;
  --card-pad:16px 18px; --panel-pad:22px 24px; --drawer-w:520px; --sidebar-w:230px;
  --gap-grid:14px; --gap-inline:8px; --gap-tight:5px;
  --row-pad:10px; --row-pad-compact:6px;
  --control-h:34px; --control-h-sm:26px;
}

/* elevation.css */
:root{
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  --shadow-drawer:-20px 0 50px rgba(0,0,0,.5);
  --shadow-focus:0 0 0 4px var(--war-gold-glow);
  --border-hairline:1px solid var(--border-default);
  --border-active:1px solid var(--war-gold-dim);
  --grad-card:linear-gradient(180deg,var(--war-panel),var(--war-panel-2));
  --grad-panel:linear-gradient(160deg,#132A52,#0D1A38 65%);
  --grad-gold:linear-gradient(90deg,var(--war-gold-dim),var(--war-gold));
  --grad-green:linear-gradient(90deg,#1E9C66,var(--war-green));
  --scrim:rgba(4,8,20,.6);
}

/* motion.css */
:root{
  --motion-hover:.12s; --motion-state:.22s; --motion-progress:.3s;
  /* Capability-card motion. Longer than --motion-hover on purpose: the card
     transform is meant to be felt as a lift, not snapped through. Declared as
     a token so the reduced-motion block below disables it with everything
     else rather than needing its own media query. */
  --motion-card:.42s;
  --ease-standard:ease; --ease-drawer:ease; --ease-enter:cubic-bezier(.2,.8,.2,1);
  --ease-card:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--motion-hover:0s; --motion-state:0s; --motion-progress:0s; --motion-card:0s}
}

/* base.css */
*{box-sizing:border-box}
body{margin:0;background:var(--page-vignette),var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body)}
a{color:var(--accent)}
a:hover{filter:brightness(1.15)}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
code,kbd,samp{font-family:var(--font-mono)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}

/* page-level (from marketing-site index.html inline style) */
.war-nav-flex{display:flex}
.war-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.war-footer-grid{display:grid;grid-template-columns:1.4fr repeat(5, 1fr);gap:24px}
.war-restaurant-tables{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:start}

/* pricing page */
.war-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px}
.war-pricing-card{display:flex;flex-direction:column;background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:24px 20px;position:relative}
.war-pricing-card-featured{background:var(--grad-panel);border-color:var(--war-gold)}
.war-pricing-badge{position:absolute;top:-11px;left:20px;white-space:nowrap;font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-radius:999px;background:var(--war-gold);color:var(--war-gold-ink)}
.war-pricing-feat{display:flex;gap:8px;font-size:12px;color:var(--text-secondary);line-height:1.4}
.war-pricing-feat::before{content:"✓";color:var(--war-gold);flex-shrink:0}
.war-pricing-pill{padding:9px 16px;border-radius:999px;border:1px solid var(--war-gold-dim);background:var(--war-panel);font-size:12.5px;font-weight:700;color:var(--war-text)}

/* ============================================================
   LANDING PAGE v2 — shared primitives
   ============================================================ */
.war-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--war-gold)}
.war-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(30px,5.4vw,50px);line-height:1.1;margin:14px 0 0;letter-spacing:-.01em}
.war-h2{font-size:clamp(23px,3.4vw,30px);font-weight:800;margin:0;line-height:1.25}
.war-gold-text{color:var(--war-gold)}
.war-sub{font-size:clamp(15px,1.7vw,17.5px);color:var(--text-secondary);line-height:1.6;margin:20px 0 0;max-width:520px}

.war-btn-primary{display:inline-block;padding:14px 26px;border-radius:var(--radius-sm);border:1px solid var(--war-gold);background:var(--war-gold);color:var(--war-gold-ink);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:filter var(--motion-hover) var(--ease-standard)}
.war-btn-primary:hover{filter:brightness(1.08)}
.war-btn-secondary{display:inline-block;padding:14px 26px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--war-bg-3);color:var(--text-body);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.war-btn-secondary:hover{border-color:var(--war-gold-dim)}
.war-cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero slider ---------- */
.war-hero{max-width:1200px;margin:0 auto;padding:56px 24px 44px}
.war-slides{position:relative}
.war-slide{
  display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease-enter);
  position:absolute;inset:0;pointer-events:none;
}
.war-slide.is-active{opacity:1;visibility:visible;position:relative;pointer-events:auto}
.war-slide-copy{min-width:0}

.war-slide-media{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--war-border);background:var(--grad-panel)}
.war-slide-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.war-ph{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;
  background:
    radial-gradient(circle at 78% 18%, var(--war-gold-glow), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    var(--grad-panel);
}
.war-ph-name{font-family:var(--font-mono);font-size:12.5px;color:var(--war-gold);letter-spacing:.04em;word-break:break-all}
.war-ph-dim{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);letter-spacing:.12em}

.war-hero-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:32px}
.war-dots{display:flex;gap:9px}
.war-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--war-border-light);background:transparent;transition:all var(--motion-state) var(--ease-standard)}
.war-dot.is-active{background:var(--war-gold);border-color:var(--war-gold);width:24px;border-radius:999px}
.war-dot:hover{border-color:var(--war-gold)}

/* ---------- problem: yours vs WAR's ---------- */
.war-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.war-split-col{background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:22px 22px 8px}
.war-split-col-gold{border-color:var(--war-gold-dim);background:var(--grad-panel)}
.war-split-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:14px}
.war-split-head-gold{color:var(--war-gold)}
.war-line{font-size:13.5px;color:var(--text-secondary);line-height:1.5;padding:9px 0 9px 24px;border-bottom:1px solid var(--war-border);position:relative}
.war-line:last-child{border-bottom:none}
.war-line::before{content:"—";position:absolute;left:0;color:var(--text-tertiary)}
.war-line-gold::before{content:"✓";color:var(--war-gold);font-weight:700}
.war-line-gold{color:var(--war-text)}

/* ---------- capability grid ---------- */
/* Grid light. A soft gold spotlight follows the pointer across the whole
   grid, so the surface reacts before anything is hovered -- the single
   biggest difference between a wall of tiles and a set of choices. --mx/--my
   are written by the pointermove handler in index.html; with no pointer (or
   no JS) they fall back to a fixed centre-top position and the gradient is
   simply never revealed, since opacity is gated on :hover. */
.war-cap-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(228px, 1fr));gap:16px;
  position:relative;
}
.war-cap-grid::before{
  content:"";position:absolute;inset:-24px;pointer-events:none;z-index:0;border-radius:24px;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(224,169,46,.10), transparent 68%);
  opacity:0;transition:opacity .5s var(--ease-card);
}
.war-cap-grid:hover::before{opacity:1}

.war-cap{
  position:relative;z-index:1;overflow:hidden;
  display:flex;flex-direction:column;gap:7px;text-decoration:none;
  background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:20px 18px 16px;
  transition:border-color var(--motion-card) var(--ease-card),
             transform var(--motion-card) var(--ease-card),
             box-shadow var(--motion-card) var(--ease-card);
}
.war-cap:hover{
  border-color:var(--war-gold-dim);transform:translateY(-6px);filter:none;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(224,169,46,.16);
}
/* Rim light sweeping the top edge on hover. */
.war-cap::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--war-gold),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-card);
}
.war-cap:hover::after{transform:scaleX(1)}

/* ---------- Concept A: the transform ----------
   Every card's own description already says "X turned into Y". These two
   chips draw that sentence: what you bring sits in cool slate, what you get
   back stays dim and dashed until hover, when the arrow completes and the
   outcome fills gold. The colour is grammar, used the same way on all 13:
   slate = what you already have, gold = what WAR returns. */
/* flex-wrap is a safety net, not a layout choice: the pair is sized to fit a
   228px card on one line, but a longer future string, a wider font fallback
   or a user font-size bump would otherwise be silently clipped by the card's
   own overflow:hidden. Wrapping degrades; clipping hides. */
.war-cap-tf{display:flex;align-items:center;gap:6px;margin:1px 0 2px;min-height:24px;flex-wrap:wrap}
.war-cap-in,.war-cap-out{
  font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace);
  font-size:9px;padding:4px 7px;border-radius:5px;white-space:nowrap;
  transition:color var(--motion-card) var(--ease-card),
             background-color var(--motion-card) var(--ease-card),
             border-color var(--motion-card) var(--ease-card),
             opacity var(--motion-card) var(--ease-card);
}
.war-cap-in{color:#6E93CC;border:1px solid rgba(110,147,204,.35);background:rgba(110,147,204,.08)}
.war-cap-out{color:var(--text-tertiary);border:1px dashed var(--war-border-light);background:transparent}
.war-cap:hover .war-cap-in{opacity:.42}
.war-cap:hover .war-cap-out{color:var(--war-gold-ink);background:var(--war-gold);border-color:var(--war-gold);border-style:solid}
.war-cap-arw{
  flex:1;min-width:10px;height:1px;position:relative;
  background:linear-gradient(90deg,#6E93CC,var(--war-border-light));
  transition:background var(--motion-card) var(--ease-card);
}
.war-cap-arw::after{
  content:"";position:absolute;right:0;top:-3px;width:0;height:0;
  border-left:5px solid var(--war-border-light);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transition:border-left-color var(--motion-card) var(--ease-card);
}
.war-cap:hover .war-cap-arw{background:linear-gradient(90deg,#6E93CC,var(--war-gold))}
.war-cap:hover .war-cap-arw::after{border-left-color:var(--war-gold)}
.war-cap-studio{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-tertiary)}
.war-cap-name{font-size:16px;font-weight:800;color:var(--war-gold);line-height:1.25}
.war-cap-desc{font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin:0;flex:1}
.war-cap-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.war-cap-live{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--war-green-dim);color:var(--war-green);border:1px solid var(--war-green-border)}
/* Replaces the "Live" text badge -- on mobile's single-column card (full
   width, but the foot row still only has ~260px to share) the text badge
   crowded the "Start ->" pill. A small dot says the same thing in a
   fraction of the width; every card is live, so the state itself is not
   information worth spelling out per-card. */
.war-cap-live-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--war-green);box-shadow:0 0 0 3px var(--war-green-dim);animation:war-cap-breathe 3.4s ease-in-out infinite}
/* The one ambient signal on the card that is actually saying something
   true: these capabilities really are live. */
@keyframes war-cap-breathe{
  0%{box-shadow:0 0 0 0 rgba(63,191,143,.5)}
  60%{box-shadow:0 0 0 7px rgba(63,191,143,0)}
  100%{box-shadow:0 0 0 0 rgba(63,191,143,0)}
}

/* Staggered entrance -- cards rise in sequence rather than landing as a
   block. Capped at 13 (the live capability count); any 14th card onward
   simply inherits the last delay rather than appearing late. */
.war-cap{opacity:0;transform:translateY(14px);animation:war-cap-rise .7s var(--ease-card) forwards}
@keyframes war-cap-rise{to{opacity:1;transform:translateY(0)}}
.war-cap:nth-child(1){animation-delay:.03s}   .war-cap:nth-child(2){animation-delay:.07s}
.war-cap:nth-child(3){animation-delay:.11s}   .war-cap:nth-child(4){animation-delay:.15s}
.war-cap:nth-child(5){animation-delay:.19s}   .war-cap:nth-child(6){animation-delay:.23s}
.war-cap:nth-child(7){animation-delay:.27s}   .war-cap:nth-child(8){animation-delay:.31s}
.war-cap:nth-child(9){animation-delay:.35s}   .war-cap:nth-child(10){animation-delay:.39s}
.war-cap:nth-child(11){animation-delay:.43s}  .war-cap:nth-child(12){animation-delay:.47s}
.war-cap:nth-child(n+13){animation-delay:.51s}

/* Entrance and breathing are decorative, not load-bearing: with reduced
   motion the cards are simply present and the dot simply green. */
@media (prefers-reduced-motion:reduce){
  .war-cap{opacity:1;transform:none;animation:none}
  .war-cap-live-dot{animation:none;box-shadow:0 0 0 3px var(--war-green-dim)}
  .war-cap-grid::before{display:none}
}
.war-cap-icon{width:42px;height:42px;border-radius:12px;background:var(--war-bg-3);border:1px solid var(--war-border);display:flex;align-items:center;justify-content:center;margin-bottom:2px;color:var(--war-gold);flex-shrink:0;transition:border-color var(--motion-hover) var(--ease-standard)}
.war-cap:hover .war-cap-icon{border-color:var(--war-gold-dim)}
.war-cap-icon svg{width:23px;height:23px}
.war-cap-start{font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:999px;background:var(--war-gold);color:var(--war-gold-ink);white-space:nowrap;transition:filter var(--motion-hover) var(--ease-standard),transform var(--motion-card) var(--ease-card)}
.war-cap:hover .war-cap-start{filter:brightness(1.08);transform:translateX(3px)}

/* ---------- recognition over authoring ---------- */
.war-rec-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;align-items:start}
.war-rec-before,.war-rec-after{background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:22px}
.war-rec-after{border-color:var(--war-gold-dim);background:var(--grad-panel)}
.war-rec-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:14px}
.war-rec-label-gold{color:var(--war-gold)}
.war-rec-box{border:1px dashed var(--war-border-light);border-radius:10px;padding:22px 16px;font-size:13.5px;color:var(--text-tertiary);text-decoration:line-through;text-decoration-color:var(--war-red)}
.war-rec-note{font-size:12px;color:var(--text-tertiary);line-height:1.55;margin-top:12px}
.war-rec-q{font-size:14px;font-weight:700;color:var(--war-text);margin:16px 0 10px}
.war-rec-q:first-of-type{margin-top:0}
.war-chips{display:flex;flex-wrap:wrap;gap:8px}
.war-chip{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--war-border-light);background:var(--war-bg-3);color:var(--text-secondary)}
.war-chip.is-picked{border-color:var(--war-gold);background:var(--war-gold);color:var(--war-gold-ink);font-weight:700}

/* ---------- steps ---------- */
.war-steps{display:grid;grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));gap:16px}
.war-step{background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:22px 20px}
.war-step-n{width:30px;height:30px;border-radius:50%;border:1px solid var(--war-gold);color:var(--war-gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:500;margin-bottom:13px}
.war-step-t{font-size:15px;font-weight:800;color:var(--war-text);margin-bottom:6px;line-height:1.3}
.war-step-d{font-size:12.5px;color:var(--text-secondary);line-height:1.6}

/* ---------- progressive disclosure ---------- */
.war-deep{margin-top:26px;background:var(--war-panel-2);border:1px solid var(--war-border);border-radius:12px;padding:16px 20px}
.war-deep summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--war-gold);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.war-deep summary::-webkit-details-marker{display:none}
.war-deep summary::after{content:"+";font-size:19px;font-weight:400;color:var(--war-gold);flex-shrink:0;line-height:1;transition:transform .15s var(--ease-standard)}
.war-deep[open] summary::after{transform:rotate(45deg)}
.war-deep-body{margin-top:16px}
.war-deep-body p{font-size:13px;color:var(--text-secondary);line-height:1.7;margin:0 0 16px}
.war-pipe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin:0 0 18px}
.war-pipe-node{padding:8px 13px;border-radius:999px;border:1px solid var(--war-gold-dim);background:var(--war-bg-3);font-size:11.5px;font-weight:700;color:var(--text-body);white-space:nowrap}
.war-pipe-node-gold{border-color:var(--war-gold);background:var(--war-gold);color:var(--war-gold-ink)}
.war-pipe-arrow{color:var(--war-border-light);font-size:14px}

/* ---------- verification ---------- */
.war-versus{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.war-versus-card{background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;padding:26px 24px}
.war-versus-card-gold{border-color:var(--war-gold-dim);background:var(--grad-panel)}
.war-versus-who{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:14px}
.war-versus-who-gold{color:var(--war-gold)}
.war-versus-say{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--war-text);line-height:1.55}

/* ---------- models / conversion stack ---------- */
.war-stack{display:flex;flex-direction:column;align-items:center;gap:8px}
.war-stack-row{padding:14px 26px;border-radius:12px;font-size:14px;font-weight:700;border:1px solid var(--war-border);background:var(--grad-card);color:var(--text-secondary);width:100%;max-width:420px}
.war-stack-row-gold{border-color:var(--war-gold);background:var(--war-gold);color:var(--war-gold-ink)}
.war-stack-arrow{color:var(--war-border-light);font-size:17px;line-height:1}
.war-stack-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 4px;margin-top:4px}

/* ---------- outcome proof strip: real requests, real outputs ----------
   A single horizontal marquee, not a grid -- 9 real cards would otherwise
   wrap into 3 rows and dominate the page. The strip's own content is
   duplicated once in the HTML; this animates the doubled track exactly
   -50% of its own width, so card #1 of the copy lines up with card #1
   of the original and the loop reads as continuous. */
.war-proof-strip-outer{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.war-proof-strip{display:flex;gap:16px;width:max-content;animation:war-proof-scroll 50s linear infinite}
.war-proof-strip:hover{animation-play-state:paused}
.war-proof-card{width:250px;flex-shrink:0;display:flex;flex-direction:column;text-decoration:none;background:var(--grad-card);border:1px solid var(--war-border);border-radius:14px;overflow:hidden;transition:border-color var(--motion-hover) var(--ease-standard), transform var(--motion-hover) var(--ease-standard)}
.war-proof-card:hover{border-color:var(--war-gold-dim);transform:translateY(-2px);filter:none}
.war-proof-thumb{width:100%;aspect-ratio:480/280;object-fit:cover;object-position:top;display:block;border-bottom:1px solid var(--war-border);background:#fff}
.war-proof-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.war-proof-cp{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary)}
.war-proof-ask{font-size:12.5px;color:var(--text-secondary);line-height:1.5}
.war-proof-ask strong{color:var(--war-text);font-weight:700}
.war-proof-view{margin-top:auto;padding-top:10px;font-size:12px;font-weight:700;color:var(--war-gold)}
@keyframes war-proof-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .war-proof-strip{animation:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- verification receipt: one real example, not a claim ---------- */
.war-receipt{display:grid;grid-template-columns:1fr 1fr;background:var(--war-well);border:1px solid var(--war-border);border-radius:14px;overflow:hidden}
.war-receipt-col{padding:24px 22px}
.war-receipt-col+.war-receipt-col{border-left:1px solid var(--war-border)}
.war-receipt-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:14px}
.war-receipt-label-gold{color:var(--war-gold)}
.war-receipt-item{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--text-secondary);line-height:1.5;padding:7px 0}
.war-receipt-item .check{color:var(--war-green);flex-shrink:0;font-weight:700}
.war-receipt-foot{grid-column:1/-1;background:var(--war-green-dim);border-top:1px solid var(--war-green-border);padding:12px 22px;text-align:center;font-size:12.5px;font-weight:700;color:var(--war-green)}

@media(max-width:900px){
  .war-rec-wrap{grid-template-columns:1fr}
}
@media(max-width:600px){
  .war-receipt{grid-template-columns:1fr}
  .war-receipt-col+.war-receipt-col{border-left:none;border-top:1px solid var(--war-border)}
}
@media(max-width:760px){
  .war-nav-links{display:none}
  .war-hero-grid{grid-template-columns:1fr}
  .war-footer-grid{grid-template-columns:1fr 1fr}
  .war-restaurant-tables{grid-template-columns:1fr}
  /* mobile hero: copy first, image second, both always in the same order */
  .war-hero{padding:32px 20px 34px}
  .war-slide{grid-template-columns:1fr;gap:24px}
  .war-slide-media{aspect-ratio:16/9}
  .war-hero-actions{margin-top:24px;flex-direction:column;align-items:stretch;gap:16px}
  .war-cta-row{flex-direction:column}
  .war-cta-row .war-btn-primary,.war-cta-row .war-btn-secondary{text-align:center}
  .war-dots{justify-content:center}
  .war-split{grid-template-columns:1fr}
  .war-versus{grid-template-columns:1fr}
}
@media(max-width:480px){
  .war-footer-grid{grid-template-columns:1fr}
  .war-cap-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .war-slide{transition:none}
  .war-cap:hover{transform:none}
}

/* faq page */
.war-faq-item{background:var(--grad-card);border:1px solid var(--war-border);border-radius:10px;padding:16px 20px;margin-bottom:10px}
.war-faq-item summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--war-text);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.war-faq-item summary::-webkit-details-marker{display:none}
.war-faq-item summary::after{content:"+";font-size:19px;font-weight:400;color:var(--war-gold);flex-shrink:0;transition:transform .15s var(--ease-standard);line-height:1}
.war-faq-item[open] summary::after{transform:rotate(45deg)}
.war-faq-item .war-faq-answer{margin-top:12px;font-size:13.5px;color:var(--text-secondary);line-height:1.7}
.war-faq-item .war-faq-answer p{margin:0 0 10px}
.war-faq-item .war-faq-answer p:last-child{margin-bottom:0}

/* trust strip: CSS-only spinning chakra proof-point icon */
.war-chakra{
  display:inline-block;width:16px;height:16px;border-radius:50%;flex-shrink:0;
  background:repeating-conic-gradient(var(--war-gold) 0deg 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask:radial-gradient(circle, transparent 0%, transparent 22%, #000 23%, #000 100%);
  mask:radial-gradient(circle, transparent 0%, transparent 22%, #000 23%, #000 100%);
  animation:war-chakra-spin 6s linear infinite;
}
@keyframes war-chakra-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.war-chakra{animation:none}}