/* =========================================================
   Reporting page. The document stage — soft blue ground, sheets with a
   drop shadow, a floating switch — is the report preview from the landing
   page (landing.css, "Reports: three sheets on a stack"), taken larger here.
   ========================================================= */

/* ---------- Shared: labels and the stage the documents sit on ---------- */
.rp-label{font-size:14px;line-height:1.4;margin:0;color:var(--ink-3)}
.rp-stage{position:relative;background:linear-gradient(180deg,#F5F8FF 0%,#EDF2FD 100%);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rp-sheet-img{display:block;background:#fff;border-radius:6px;
  box-shadow:0 1px 0 rgba(18,23,42,.04),0 16px 36px rgba(18,23,42,.16)}

/* The switch, as on the landing page */
.rp-tabs{display:inline-flex;gap:2px;padding:4px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(18,23,42,.08);
  border-radius:12px;box-shadow:0 6px 20px rgba(18,23,42,.10)}
.rp-tabs button{min-height:38px;padding:6px 16px;border:0;border-radius:8px;background:transparent;
  font:500 14px/1.2 var(--sans);color:var(--ink-3);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.rp-tabs button:hover{color:var(--ink)}
.rp-tabs button[aria-pressed="true"]{background:var(--blue-tint);color:var(--blue-ink);font-weight:600}

/* ---------- Hero ---------- */
.rp-hero{padding:64px 0 72px}
.rp-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.rp-hero .h1{font-size:60px}

/* Three documents on a stack; the chosen one comes to the front */
.rp-deck{aspect-ratio:10/8.4}
.rp-deck-sheet{position:absolute;left:11%;top:8%;width:78%;aspect-ratio:2200/1555;margin:0;padding:0;border:0;
  background:#fff;border-radius:6px;overflow:hidden;cursor:pointer;transform-origin:50% 90%;
  box-shadow:0 1px 0 rgba(18,23,42,.04),0 22px 48px rgba(18,23,42,.18);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.rp-deck-sheet img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.rp-deck-sheet.is-current{z-index:3;cursor:zoom-in}
.rp-deck-sheet.is-current:hover{transform:translateY(-4px)}
.rp-deck-sheet.is-next{z-index:2;transform:translateX(19%) rotate(5deg) scale(.86);opacity:.92}
.rp-deck-sheet.is-prev{z-index:1;transform:translateX(-19%) rotate(-5deg) scale(.86);opacity:.92}
.rp-deck-sheet.is-next:hover{transform:translateX(22%) rotate(6deg) scale(.87)}
.rp-deck-sheet.is-prev:hover{transform:translateX(-22%) rotate(-6deg) scale(.87)}
.rp-deck .rp-tabs{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%)}
.rp-tab-short{display:none}
.rp-deck-cap{display:grid;margin-top:14px}
.rp-deck-cap span{grid-area:1/1;opacity:0;transition:opacity .3s ease}
.rp-deck-cap span.on{opacity:1}

/* ---------- Customers ---------- */
.rp-logo{height:44px;display:flex;align-items:center;margin-bottom:18px}
.rp-logo img{display:block;height:auto;width:auto;max-height:30px}
/* AIT has no logo file, so it is set as a wordmark */
.rp-wordmark{font:700 26px/1 var(--disp);color:var(--ink);letter-spacing:-.01em;margin:0}
.rp-wordmark small{display:block;font:500 11px/1.3 var(--sans);color:var(--ink-3);margin-top:4px;letter-spacing:0}

/* ---------- Annotated pages: the page on a stage, its parts beside it ---------- */
.rp-anat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.rp-anat figure{margin:0}
.rp-anat figcaption{margin-top:14px}
.rp-anat .rp-stage{padding:28px 28px 66px}
.rp-anat .hot{display:block;position:relative;margin:0 auto}
.rp-anat .hot img{width:100%;height:auto}
/* A tall page (the email briefing) scrolls inside the stage, at mail width */
.rp-scroll{max-height:640px;overflow-y:auto;overscroll-behavior:contain;padding:2px 16px 18px;margin:-2px -16px 0;scrollbar-width:thin}
.rp-scroll .hot{width:min(100%,480px)}
/* Dots are placed by their centre, so x/y in the template point at the spot */
.rp-anat .hot-p{margin:-13px 0 0 -13px}
.rp-region{position:absolute;pointer-events:none;border:2px solid var(--blue);border-radius:8px;
  background:rgba(0,79,255,.05);
  transition:left .3s cubic-bezier(.3,0,.2,1),top .3s cubic-bezier(.3,0,.2,1),width .3s cubic-bezier(.3,0,.2,1),height .3s cubic-bezier(.3,0,.2,1)}
.rp-anat .shot-zoom{appearance:none;cursor:zoom-in;font-family:var(--sans)}
.rp-anat .shot-zoom:hover{border-color:rgba(0,79,255,.35)}

/* The parts as a list; the chosen one opens with its explanation */
.rp-parts{display:flex;flex-direction:column;gap:6px}
.rp-part{appearance:none;display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;width:100%;
  padding:14px 16px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r-s);transition:background .2s,border-color .2s}
.rp-part:hover{background:#fff;border-color:var(--line)}
.rp-part[aria-pressed="true"]{background:#fff;border-color:rgba(0,79,255,.35);box-shadow:var(--sh)}
.rp-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--blue-tint);color:var(--blue-ink);font:500 12px var(--mono);margin-top:1px;transition:background .2s,color .2s}
.rp-part[aria-pressed="true"] .rp-num{background:var(--blue);color:#fff}
.rp-part-t{display:block;font-weight:700;font-size:17px;line-height:1.35;color:var(--ink);padding-top:3px}
.rp-part-x{display:none;font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:6px}
.rp-part[aria-pressed="true"] .rp-part-x{display:block}

/* ---------- Press review: the following pages as product cards ---------- */
.rp-follow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:56px;align-items:stretch}
.rp-pv{appearance:none;display:flex;flex-direction:column;padding:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.rp-pv:hover{border-color:#C9D8FF;box-shadow:var(--sh)}
.rp-pv .rp-stage{display:block;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:26px 30px 0;height:210px}
.rp-pv .rp-sheet-img{width:100%;height:auto;border-radius:6px 6px 0 0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rp-pv:hover .rp-sheet-img{transform:translateY(-4px)}
.rp-pv-body{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:1}
.rp-pv-body > span{display:block}
.rp-pv-go{margin-top:auto;padding-top:10px;color:var(--blue);font-weight:600;font-size:15px;display:flex!important;justify-content:space-between}

/* A single tall image in the reader (the briefing) stays at reading width */
.reader-viewport.rp-single .reader-page{max-width:720px}

.tsr-2{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1100px){
  .rp-hero .h1{font-size:52px}
}
@media (max-width:900px){
  .rp-hero{padding:40px 0 48px}
  .rp-hero-grid,.rp-anat,.rp-follow{grid-template-columns:minmax(0,1fr);gap:28px}
  .rp-hero .h1{font-size:42px}
  .rp-anat .rp-stage{padding:18px 18px 68px}
  .rp-follow{margin-top:40px}
}
@media (max-width:820px){.tsr-2{grid-template-columns:1fr}}
@media (max-width:520px){
  .rp-tabs button{padding:6px 10px;font-size:13px}
  /* The full labels need ~410px, wider than the deck on any phone. Short
     labels on a full-width switch, as on the landing page (.pv-tabs). */
  .rp-deck .rp-tabs{display:flex;left:10px;right:10px;bottom:10px;transform:none}
  .rp-deck .rp-tabs button{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:12.5px}
  .rp-tab-long{display:none}
  .rp-tab-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .rp-deck-sheet,.rp-deck-cap span,.rp-region,.rp-part,.rp-pv .rp-sheet-img{transition:none}
}