/* ============================================================
   REVL franchise emails, design page.
   Loads ../styles.css first for the tokens, the faces and the type
   scale, then adds only what a two up email review needs.

   The rule the layout is built on: desktop and mobile are shown at the
   SAME scale, side by side, so the width difference between them is
   real rather than decorative. Both panes carry a full hairline, never
   a single edge.
   ============================================================ */

/* the review needs more room than the four link holding page */
.wrap{ max-width:1280px; }

/* ---------- top ---------- */
.back{ display:inline-block; margin-top:26px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--warm); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:4px;
  transition:color .18s, border-color .18s; }
.back:hover{ color:var(--white); border-bottom-color:var(--chalk); }

/* ---------- one email ---------- */
.mail{ padding:clamp(52px,8vh,88px) 0; border-top:1px solid var(--line2); }
.mail:first-of-type{ border-top:0; }

.head{ max-width:70ch; }
.head h2{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-weight:400; line-height:1.05; font-size:clamp(24px,3vw,38px); margin-top:16px; }
.head .note{ margin-top:16px; margin-bottom:0; }

/* ---------- the spec strip ---------- */
.spec{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line2); border:1px solid var(--line2);
  margin-top:clamp(28px,3.6vw,40px); }
.spec div{ background:var(--black); padding:18px 20px; }
.spec dt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey); font-weight:700; }
.spec dd{ margin:9px 0 0; font-size:14px; line-height:1.55; color:var(--off); }
.spec dd code{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:var(--beige); }

/* ---------- the two views ---------- */
.views{ --sd:.86; --sm:.86;
  display:flex; align-items:flex-start; gap:clamp(18px,3vw,44px);
  margin-top:clamp(30px,4vw,46px); }
.view{ margin:0; }
.view.desk .screen{ --s:var(--sd); }
.view.mob .screen{ --s:var(--sm); }

.cap{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.cap b{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--white); font-weight:700; }
.cap span{ font-size:11px; color:var(--grey); }

.screen{ width:calc(var(--w) * var(--s)); border:1px solid var(--line);
  background:var(--black); overflow:hidden; }
.screen iframe{ width:var(--w); border:0; display:block;
  transform:scale(var(--s)); transform-origin:top left; }

.open{ display:inline-block; margin-top:14px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--beige); text-decoration:none;
  border-bottom:1px solid rgba(204,202,187,.4); padding-bottom:4px;
  transition:color .18s, border-color .18s; }
.open:hover{ color:var(--white); border-bottom-color:var(--chalk); }

/* ---------- what still needs REVL ---------- */
.open-items{ margin-top:clamp(34px,4vw,48px); }
.open-items h3{ font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--white); font-weight:700; font-family:'Manrope',system-ui,sans-serif; }
.open-items ul{ list-style:none; margin-top:16px; max-width:80ch; }
.open-items li{ position:relative; padding:11px 0 11px 30px;
  border-top:1px solid var(--line2); font-size:14px; line-height:1.6;
  color:var(--warm); }
.open-items li:last-child{ border-bottom:1px solid var(--line2); }
.open-items li::before{ content:''; position:absolute; left:2px; top:20px;
  width:12px; height:1px; background:var(--beige); }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .views{ --sd:.7; --sm:.7; }
}
@media (max-width:980px){
  .spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .views{ --sd:.56; --sm:.56; }
}
@media (max-width:860px){
  .views{ flex-direction:column; --sd:.66; --sm:.9; }
  .screen{ max-width:100%; }
}
@media (max-width:560px){
  .spec{ grid-template-columns:1fr; }
  .views{ --sd:.44; --sm:.78; }
}