/* CuePort Integrations — page-specific styles.
   Loaded ON TOP of /use-cases/styles.css, which carries the design tokens,
   the nav, the footer, the section rhythm and the FOUC mask. Only what the
   integration pages add lives here. */

/* ══════════════════════════════════════════════════════════════════════════
   THE RECORDING AS THE CARD.

   An earlier version put the recording inside a lit panel, which read as a
   card containing a screenshot: two frames around one thing. Now the
   recording is simply the element: a hairline edge, a shadow, and a soft
   bloom BEHIND it. The bloom is shaped to the frame and pushed out at the
   bottom rather than being a symmetric orb centred on the hero — that
   version is the generated-page marker, light coming from behind a real
   object is not.

   NB: the stage must NOT clip (no overflow:hidden) or it cuts off the very
   shadow that does the lifting.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The lockup above the headline ────────────────────────────────────────
   Two tiles and a wire: CuePort on the left, Reaper on the right, and a pin
   that travels between them the way a comment does. This replaces the pill
   badge that used to sit here, which is the loudest template marker there is.
   The tiles are plain surfaces: no coloured glow, radius 16 like every other
   card on the page. */
.rp-lock{display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.rp-lock-tile{
  flex:0 0 auto;
  width:64px;height:64px;
  display:grid;place-items:center;
  border-radius:16px;
  background:var(--surface2);
  border:1px solid var(--border2);
  box-shadow:0 10px 26px -14px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rp-lock-tile img{width:34px;height:34px;display:block;}
.rp-lock-wire{position:relative;flex:0 0 auto;width:88px;height:1px;background:var(--border2);}
.rp-lock-pin{
  position:absolute;top:50%;left:0;
  width:7px;height:7px;border-radius:50%;
  background:var(--pur);
  /* A ring, not a bloom: it reads as a marker head at 7px. */
  box-shadow:0 0 0 3px rgba(123,69,200,0.20);
  transform:translate(-50%,-50%);
  animation:rpTravel 2.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes rpTravel{
  0%,6%    {left:0;    opacity:0;}
  14%      {opacity:1;}
  70%      {left:100%; opacity:1;}
  84%,100% {left:100%; opacity:0;}
}
/* The pin is a CSS animation, so the media query really does stop it. It parks
   in the middle, where it still reads as "these two are connected". */
@media (prefers-reduced-motion: reduce){
  .rp-lock-pin{animation:none;left:50%;opacity:1;}
}
.rp-lock-note{
  font-family:'Space Mono',monospace;font-size:12px;color:var(--text3);
  text-align:center;margin-bottom:26px;
}

.rp-stage{position:relative;}
.rp-stage-inner{position:relative;}

/* The glow behind the recording. Not a symmetric orb centred on the page —
   that reads as decoration bolted onto a hero. It hugs the frame: inset on
   all sides, pushed further out at the bottom, so what you see is light
   coming out from behind the thing rather than a lamp pointed at it.
   blur() rather than a wide gradient stop: a 60px blur on a solid-ish shape
   falls off far more smoothly than any hand-placed colour stop, and it is
   what makes the frame read as lifted off the page instead of pasted on. */
.rp-stage-inner::before{
  content:'';
  position:absolute;
  inset:8% -3% -14%;
  border-radius:48px;
  background:
    radial-gradient(58% 62% at 50% 38%, rgba(123,69,200,0.38), transparent 72%),
    radial-gradient(46% 52% at 50% 96%, rgba(155,93,192,0.22), transparent 74%);
  filter:blur(58px);
  z-index:0;
  pointer-events:none;
}
/* NO CARD AROUND THE RECORDING. This has now been built twice and rejected
   twice: first as a lit panel, then as a bezel with 8px of shell. Both read
   as a frame containing a screenshot rather than as the thing itself. The
   recording is the element — a hairline edge so it does not bleed into the
   page, a shadow so it sits on it, and nothing else. No padding, no second
   surface, no inner radius.
   line-height:0 kills the descender gap under the media. */
.rp-frame{
  position:relative;
  /* Above its own glow — the blur bleeds inwards as well as outwards. */
  z-index:1;
  border-radius:14px;
  overflow:hidden;
  line-height:0;
  border:1px solid rgba(255,255,255,0.09);
  /* Neutral depth only. A purple drop-shadow under a dark panel is one of the
     loudest generated-UI tells, and the recording is already purple enough.
     The last layer is the contact shadow that puts it on the page. */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.50),
    0 30px 60px -18px rgba(0,0,0,0.85),
    0 80px 140px -60px rgba(0,0,0,0.9);
}

.rp-frame img,
.rp-frame video{
  display:block;
  width:100%;
  height:auto;
}

/* No caption under the recordings. Every one of them said "screen recording,
   and here is what is in it" — the heading above already says it, and a line
   of mono grey under each video was two labels for one thing. */

/* Hero: deliberately narrower than the section. At full width the recording
   dominates the whole first screen; this keeps it as the proof under the
   headline rather than the headline's backdrop. */
.rp-hero-stage{
  /* 860, not 880: the recording is 1472px wide and now fills the frame edge
     to edge (the bezel that used to eat 16px is gone), so this is what keeps
     it at 1.7x its display size — enough that a 2x screen never stretches it. */
  max-width:860px;
  margin:56px auto 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE LIST — one line per thing it does. This replaced six paragraphs
   of prose: a reader scanning for "does it do X" wants a list, and prose
   that has to be read in full to answer that is the wrong shape.
   ═══════════════════════════════════════════════════════════════════════════ */
.rp-list{
  list-style:none;
  margin:36px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 40px;
}
.rp-list li{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:11px 0;
  border-top:1px solid var(--border);
  font-size:14px;
  line-height:1.55;
  color:var(--text3);
}
/* The lead is the scannable half; it never wraps away from its own line. */
.rp-list b{
  flex:0 0 auto;
  max-width:46%;
  font-weight:600;
  color:var(--text);
}
.rp-list b::after{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  margin:0 0 2px 9px;
  border-radius:50%;
  background:var(--pur);
  opacity:0.55;
}
@media (max-width:760px){
  .rp-list{grid-template-columns:1fr;gap:0;}
  .rp-list li{display:block;padding:12px 0;}
  .rp-list b{display:block;max-width:none;margin-bottom:2px;}
  .rp-list b::after{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT SECTION — stage on one side, prose on the other
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-split{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(24px,3.5vw,48px);
  align-items:center;
}
.rp-split-copy h3{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:700;
  letter-spacing:-0.6px;
  line-height:1.2;
  margin-bottom:14px;
}
.rp-split-copy p{
  font-size:14px;
  color:var(--text2);
  line-height:1.7;
  margin-bottom:14px;
}
.rp-split-copy p:last-child{margin-bottom:0;}
.rp-split-copy code{
  font-family:'Space Mono',monospace;
  font-size:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  padding:2px 7px;
  border-radius:5px;
  color:var(--pur-light);
}
@media (max-width:900px){
  .rp-split{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════════════════════
   INSTALL — numbered steps + the copyable ReaPack URL
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-steps{
  display:flex;
  flex-direction:column;
  gap:14px;
  counter-reset:rpstep;
}
.rp-step{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:16px;
  align-items:start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}
.rp-step-num{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--pur-glow);
  color:var(--pur-light);
  font-family:'Space Mono',monospace;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rp-step-body h4{
  font-size:15px;
  font-weight:600;
  margin-bottom:6px;
}
.rp-step-body p{
  font-size:13.5px;
  color:var(--text3);
  line-height:1.6;
}
.rp-step-body code{
  font-family:'Space Mono',monospace;
  font-size:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius:5px;
  color:var(--text2);
  white-space:nowrap;
}

/* The repository URL, with a copy button. It is long, so it wraps rather
   than pushing the card sideways — anywhere, because it has no spaces. */
.rp-url{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:10px 10px 10px 14px;
}
.rp-url code{
  flex:1;
  min-width:0;
  font-family:'Space Mono',monospace;
  font-size:11.5px;
  color:var(--text2);
  background:none;
  border:none;
  padding:0;
  overflow-wrap:anywhere;
  white-space:normal;
  line-height:1.5;
}
.rp-copy{
  flex-shrink:0;
  background:var(--surface2);
  border:1px solid var(--border2);
  color:var(--text2);
  border-radius:8px;
  padding:8px 14px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .18s;
  min-height:36px;
}
.rp-copy:hover{color:#fff;border-color:var(--pur);background:var(--pur-glow2);}
.rp-copy.done{color:var(--green);border-color:rgba(52,211,153,0.4);}

/* ══════════════════════════════════════════════════════════════════════════
   REQUIREMENTS TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-req{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  font-size:13px;
}
.rp-req th{
  background:var(--surface2);
  padding:12px 16px;
  text-align:left;
  font-weight:600;
  color:var(--text2);
  font-size:12px;
  border-bottom:1px solid var(--border);
}
.rp-req td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text2);
  vertical-align:top;
}
.rp-req tr:last-child td{border-bottom:none;}
/* Kept as a safety net for the widths between the phone layout and the point
   where three columns fit comfortably. On a phone the table folds instead
   (see below) — a table you have to drag sideways hides its own last column. */
.rp-req-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.rp-badge{
  display:inline-block;
  padding:2px 9px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}
.rp-badge-req{background:rgba(248,113,113,0.14);color:#fca5a5;}
.rp-badge-opt{background:rgba(251,191,36,0.14);color:var(--amber);}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSPARENCY TABLE — what the script writes into your project
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-writes{
  background:linear-gradient(135deg, rgba(123,69,200,0.07) 0%, rgba(99,102,241,0.03) 100%);
  border:1px solid var(--border-pur);
  border-radius:20px;
  padding:clamp(24px,3.6vw,42px);
}
.rp-writes h3{
  font-size:clamp(19px,2.2vw,26px);
  font-weight:700;
  letter-spacing:-0.5px;
  margin-bottom:12px;
}
.rp-writes>p{
  font-size:14px;
  color:var(--text2);
  line-height:1.65;
  margin-bottom:22px;
  max-width:640px;
}
.rp-writes-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}
.rp-writes-list li{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  font-size:13px;
  color:var(--text3);
  line-height:1.6;
}
.rp-writes-list b{
  display:block;
  color:var(--text);
  font-weight:600;
  font-size:13.5px;
  margin-bottom:4px;
}
.rp-writes-note{
  margin-top:20px;
  font-size:12.5px;
  color:var(--text4);
  line-height:1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   META STRIP — version, licence, platforms
   ═══════════════════════════════════════════════════════════════════════════ */

.rp-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  justify-content:center;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--border);
}
.rp-meta-item{
  font-size:12.5px;
  color:var(--text4);
  display:flex;
  align-items:center;
  gap:7px;
}
.rp-meta-item b{
  color:var(--text2);
  font-weight:600;
  font-family:'Space Mono',monospace;
  font-size:12px;
}
.rp-meta-item a{color:var(--text3);text-decoration:none;}
.rp-meta-item a:hover{color:var(--pur-light);}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phone: the requirements table folds into cards. Three columns in 375px means
   either 60px of text per column or a sideways drag that hides the "what for"
   column entirely — and that column is the only reason the table exists. Each
   row becomes: name on the left, badge on the right, explanation underneath. */
@media (max-width:600px){
  .rp-req thead{display:none;}
  .rp-req, .rp-req tbody{display:block;width:100%;}
  .rp-req tr{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:7px 12px;
    padding:15px 16px;
    border-bottom:1px solid var(--border);
  }
  .rp-req tr:last-child{border-bottom:none;}
  .rp-req td{display:block;padding:0;border:none;}
  .rp-req td:first-child{font-weight:600;color:var(--text);}
  .rp-req td:nth-child(2){justify-self:end;}
  .rp-req td:nth-child(3){grid-column:1/-1;font-size:12.5px;color:var(--text3);line-height:1.55;}
}

@media (max-width:768px){
  .rp-hero-stage{margin-top:32px;}
  .rp-frame{border-radius:11px;}
  .rp-step{grid-template-columns:1fr;gap:12px;}
  .rp-url{flex-direction:column;align-items:stretch;gap:12px;padding:12px;}
  .rp-copy{width:100%;min-height:44px;}
}

/* Motion: the GIFs animate on their own and cannot be paused from CSS.
   What we can do is stop the decorative bloom from being another moving
   thing — it does not move today, so this is only about hover transitions. */
@media (prefers-reduced-motion: reduce){
  .rp-copy{transition:none;}
}