/* Rent 2 Go — explainer engine.
   A 1920x1080 stage that scales to whatever it's dropped into, so the same file
   works as an embedded explainer on the site AND as a clean screen recording.
   Brand tokens match index.html so the videos never drift from the app. */

:root{
  --green:#3DAE4E; --green-dark:#2E9440; --green-soft:#E9F6EB; --lime:#6CC04A;
  --ink:#1B2430; --muted:#6A7480; --line:#E6E9ED; --bg:#F4F7F6; --surface:#FFF;
  --warn:#F4A93C; --blue:#2D8CF0; --danger:#E0533D;
  --display:'Poppins',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0d1117;font-family:var(--body);color:var(--ink);overflow:hidden}

/* ---- the frame: letterboxed 16:9, centred, scaled ---- */
.r2g-wrap{position:fixed;inset:0;display:grid;place-items:center;background:#0d1117}
.r2g-fit{position:relative}
.r2g-stage{
  width:1920px;height:1080px;transform-origin:top left;
  background:var(--bg);position:relative;overflow:hidden;
  font-size:16px;/* everything below is in px against the 1920 grid */
}
/* soft brand wash so the frame never looks like a bare web page */
.r2g-stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(61,174,78,.16), transparent 62%),
    radial-gradient(760px 560px at -6% 104%, rgba(108,192,74,.13), transparent 60%);
}

/* ---- persistent chrome: logo + progress ---- */
.r2g-brand{position:absolute;top:52px;left:72px;display:flex;align-items:center;gap:14px;z-index:6}
.r2g-logo{height:62px;width:auto;display:block}
/* on the dark end-card and MP4 frames the logo still reads, it is a flat green mark */
.r2g-chapter{position:absolute;top:56px;right:72px;z-index:6;font:700 17px/1 var(--body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.r2g-track{position:absolute;left:72px;right:72px;bottom:52px;display:flex;gap:8px;z-index:6}
.r2g-seg{flex:1;height:5px;border-radius:99px;background:rgba(27,36,48,.13);overflow:hidden}
.r2g-seg i{display:block;height:100%;width:0;background:var(--green);border-radius:99px}
.r2g-seg.done i{width:100%}

/* ---- captions: burned in, so it reads with the sound off ---- */
.r2g-cap{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);z-index:7;
  max-width:1360px;text-align:center;font:600 30px/1.45 var(--body);color:#fff;
  background:rgba(19,24,32,.9);padding:16px 34px;border-radius:16px;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.6);opacity:0;transition:opacity .35s}
.r2g-cap.on{opacity:1}
.r2g-stage[data-cc="off"] .r2g-cap{display:none}

/* ---- scene area ---- */
.r2g-scene{position:absolute;inset:132px 72px 150px;z-index:4}
.r2g-scene.center{display:grid;place-items:center;text-align:center}

/* ---- entrance animations. every element with [data-in] plays on beat start ---- */
@keyframes r2gRise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes r2gFade{from{opacity:0}to{opacity:1}}
@keyframes r2gLeft{from{opacity:0;transform:translateX(-52px)}to{opacity:1;transform:none}}
@keyframes r2gRight{from{opacity:0;transform:translateX(52px)}to{opacity:1;transform:none}}
@keyframes r2gPop{0%{opacity:0;transform:scale(.82)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes r2gGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r2gPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.16);opacity:0}}
.r2g-scene [data-in]{opacity:0;animation:r2gRise .72s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(var(--i,0) * .13s)}
.r2g-scene [data-in="fade"]{animation-name:r2gFade}
.r2g-scene [data-in="left"]{animation-name:r2gLeft}
.r2g-scene [data-in="right"]{animation-name:r2gRight}
.r2g-scene [data-in="pop"]{animation-name:r2gPop}
.r2g-paused .r2g-scene *{animation-play-state:paused!important}

/* ---- building blocks the scenes compose from ---- */
.h1{font:800 84px/1.06 var(--display);letter-spacing:-2.2px;margin:0}
.h2{font:800 62px/1.1 var(--display);letter-spacing:-1.4px;margin:0}
.lede{font:400 32px/1.5 var(--body);color:var(--muted);margin:22px 0 0;max-width:1080px}
.kicker{display:inline-block;font:700 19px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-dark);background:var(--green-soft);padding:12px 20px;border-radius:99px}

.row{display:flex;gap:34px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:26px}
.grow{flex:1}
.mid{align-items:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:34px 38px;
  box-shadow:0 1px 2px rgba(27,36,48,.05),0 26px 56px -30px rgba(27,36,48,.3)}
.card h3{font:800 36px/1.2 var(--display);margin:0 0 10px;letter-spacing:-.7px}
.card p{font:400 25px/1.5 var(--body);color:var(--muted);margin:0}

.step{display:flex;gap:28px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:30px 36px;box-shadow:0 22px 46px -32px rgba(27,36,48,.4)}
.step .n{flex:none;width:66px;height:66px;border-radius:19px;display:grid;place-items:center;
  background:var(--green);color:#fff;font:800 30px/1 var(--display)}
.step .t{font:800 34px/1.25 var(--display);margin:6px 0 8px;letter-spacing:-.6px}
.step .s{font:400 24px/1.45 var(--body);color:var(--muted)}
.step.warn .n{background:var(--warn)}
.step.bad  .n{background:var(--danger)}

.big{font:800 130px/1 var(--display);letter-spacing:-4px;color:var(--ink)}
.big em{font-style:normal;color:var(--green-dark)}
.unit{font:700 34px/1 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.16em}

.chip{display:inline-flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:15px 27px;font:600 25px/1 var(--body);box-shadow:0 12px 26px -20px rgba(27,36,48,.5)}
.chip b{font-weight:800}
.chip.ok{background:var(--green-soft);border-color:#bfe4c6;color:#1c3a24}
.chip.no{background:#fdf1ef;border-color:#f2b8b0;color:#8d2b1c}

.tally{display:flex;flex-direction:column;gap:16px;width:100%}
.tally .ln{display:flex;justify-content:space-between;align-items:center;font:600 30px/1 var(--body);
  padding:20px 4px;border-bottom:1px solid var(--line)}
.tally .ln b{font:800 34px/1 var(--display)}
.tally .ln.tot{border-bottom:none;color:var(--green-dark)}
.tally .ln.mut{color:var(--muted)}

/* map-ish radius graphic for the 100-mile rule */
.radius{position:relative;width:470px;height:470px;display:grid;place-items:center}
.radius .ring{position:absolute;inset:0;border-radius:50%;border:3px dashed var(--green);opacity:.55}
.radius .ping{position:absolute;inset:0;border-radius:50%;background:rgba(61,174,78,.22);
  animation:r2gPulse 2.8s ease-out infinite}
.radius .pin{width:120px;height:120px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font:800 22px/1.2 var(--display);text-align:center;
  box-shadow:0 20px 40px -16px rgba(46,148,64,.8)}
.radius .town{position:absolute;font:700 22px/1 var(--body);color:var(--muted);white-space:nowrap}
.radius .town.n{top:-42px;left:50%;transform:translateX(-50%)}
.radius .town.s{bottom:-42px;left:50%;transform:translateX(-50%)}
.radius .town.e{right:-140px;top:50%;transform:translateY(-50%)}
.radius .town.w{left:-140px;top:50%;transform:translateY(-50%)}

/* end card */
.end{display:grid;place-items:center;gap:30px;text-align:center}
.cta{display:inline-block;background:var(--green);color:#fff;font:800 32px/1 var(--display);
  padding:26px 52px;border-radius:16px;box-shadow:0 24px 46px -18px rgba(46,148,64,.75)}
.meta{font:600 26px/1.6 var(--body);color:var(--muted)}

/* ---- player controls (hidden in clean/record mode) ---- */
.r2g-ui{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:10px;background:rgba(19,24,32,.94);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:11px 14px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.8);font-family:var(--body)}
.r2g-ui button{background:rgba(255,255,255,.09);color:#fff;border:0;border-radius:10px;
  padding:11px 15px;font:600 15px/1 var(--body);cursor:pointer;transition:background .16s}
.r2g-ui button:hover{background:rgba(255,255,255,.2)}
.r2g-ui button.on{background:var(--green);color:#fff}
.r2g-ui .sp{width:1px;height:26px;background:rgba(255,255,255,.16);margin:0 4px}
.r2g-ui .tm{color:#9aa6b4;font:600 14px/1 var(--body);min-width:78px;text-align:center;font-variant-numeric:tabular-nums}
.r2g-clean .r2g-ui{display:none}
.r2g-hint{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:30;color:#7f8b99;
  font:500 13px/1 var(--body);background:rgba(19,24,32,.8);padding:9px 15px;border-radius:9px}
.r2g-clean .r2g-hint{display:none}

/* ---- a finished MP4 takes the whole frame ---- */
.r2g-wrap.r2g-mp4{background:#000}
.r2g-wrap.r2g-mp4 video{width:100vw;height:100vh;object-fit:contain;background:#000;display:block}

@media print{.r2g-ui,.r2g-hint{display:none}}

/* The sound prompt on a finished MP4. Browsers refuse to autoplay audio in an
   embedded frame, so the video starts muted and this turns it on. */
.r2g-mp4 { position: relative; }
.r2g-unmute {
  /* clear of the player bar, which is 60-odd pixels tall when it is shown */
  position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%);
  background: rgba(13,17,23,.92); color: #fff; border: 1.5px solid rgba(108,192,74,.9);
  border-radius: 99px; padding: 12px 22px; font: 700 15px/1 var(--body, Inter, system-ui, sans-serif);
  cursor: pointer; z-index: 5; box-shadow: 0 14px 30px -12px rgba(0,0,0,.7);
  animation: r2gUnmute 2.2s ease-in-out infinite;
}
.r2g-unmute:hover { background: #0d1117; }
.r2g-unmute.gone { display: none; }
@keyframes r2gUnmute { 0%,100% { transform: translateX(-50%) scale(1) } 50% { transform: translateX(-50%) scale(1.05) } }
@media (prefers-reduced-motion: reduce) { .r2g-unmute { animation: none } }

/* on a finished MP4 the only thing at the bottom is the video's own controls */
.r2g-mp4 .r2g-unmute { bottom: 72px; }