/* ============================================================
   REVL franchise funnel, holding page.
   Self contained: this project carries its own tokens, faces and
   components rather than reaching into revl-franchise-lps.

   Same rules as everything else in this build. Flat, no glow, borders
   are either full or absent, and the only accent is the beige. Every
   hex here is off the official palette; the brand guard rejects
   anything that is not.
   ============================================================ */

@font-face{
  font-family:'Acier';
  src:url('assets/fonts/AcierTextSolid.otf') format('opentype');
  font-weight:400; font-display:swap;
}

:root{
  --black:#0A0A0A; --off:#E8E8E6; --white:#FFFFFF;
  --warm:#9A9A93; --grey:#6E6E68; --chalk:#D3D4D3; --beige:#CCCABB;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.06);
  --gut:clamp(22px,5vw,72px);
}

*{ box-sizing:border-box; margin:0; padding:0; min-width:0; }

body{
  background:var(--black); color:var(--off);
  font-family:'Manrope',system-ui,sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}

img{ display:block; max-width:100%; }

/* ---------- the top ----------
   No running header and no photograph behind it (Macca 30 Jul). With the
   chrome gone the title has nothing to clear, so the whole block simply
   centres on the page and the type does the work. */
/* wide enough that 'The franchise funnel,' holds one line before the
   forced break, rather than wrapping to three lines of two words */
.top{ padding:clamp(96px,15vh,170px) var(--gut) clamp(56px,8vh,92px);
  max-width:980px; margin-inline:auto; text-align:center; }

h1{ font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white);
  font-size:clamp(32px,5.4vw,72px); line-height:1.02; letter-spacing:.01em;
  font-weight:400; }

.pages{ margin-top:clamp(30px,4vw,44px); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--beige); font-weight:700; }

/* numbered, because it is two steps in an order rather than two facts */
.two{ list-style:none; counter-reset:pg;
  margin:18px auto 0; max-width:70ch; }
.two li{ counter-increment:pg; position:relative;
  padding:11px 0; font-size:clamp(15px,1.4vw,18px); line-height:1.6;
  color:var(--off); border-top:1px solid var(--line2); }
.two li:last-child{ border-bottom:1px solid var(--line2); }
.two li::before{ content:counter(pg,decimal-leading-zero); margin-right:14px;
  font-family:'Acier',sans-serif; font-size:11px; color:var(--beige);
  letter-spacing:.06em; }

.lead{ margin:clamp(28px,3.6vw,40px) auto 0;
  font-size:clamp(15px,1.4vw,18px); line-height:1.65;
  max-width:62ch; color:var(--off); }

/* ---------- the steps ---------- */
.wrap{ max-width:1100px; margin-inline:auto; padding:0 var(--gut); }

.step{ padding:clamp(52px,8vh,88px) 0; border-top:1px solid var(--line2); }
.step:first-child{ border-top:0; }
.lab{ display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.lab .n{ font-family:'Acier',sans-serif; font-size:13px; color:var(--beige); }
.lab .t{ font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--white); font-weight:700; }
.note{ font-size:15px; line-height:1.65; color:var(--warm); max-width:70ch;
  margin-bottom:clamp(26px,3.5vw,38px); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,22px); }

/* full borders, never one edge */
.card{ display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:rgba(255,255,255,.014);
  transition:border-color .18s, background .18s, transform .18s; }
.card:hover{ border-color:var(--chalk); background:rgba(255,255,255,.04);
  transform:translateY(-2px); }
.cbody{ padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column;
  height:100%; }
.letter{ display:block; font-family:'Acier',sans-serif; font-size:15px;
  color:var(--beige); margin-bottom:14px; }
.card h2{ font-family:'Acier',sans-serif; text-transform:uppercase;
  color:var(--white); font-weight:400; line-height:1.05;
  font-size:clamp(20px,2.2vw,28px); }
.card p{ margin-top:13px; font-size:13.5px; line-height:1.6; color:var(--warm);
  flex:1 1 auto; }
.go{ display:inline-block; margin-top:22px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--beige);
  border-bottom:1px solid rgba(204,202,187,.4); padding-bottom:4px;
  align-self:flex-start; transition:color .18s, border-color .18s; }
.card:hover .go{ color:var(--white); border-bottom-color:var(--chalk); }

.card.wide h2{ font-size:clamp(24px,3vw,38px); }
.card.wide p{ max-width:62ch; }

/* ---------- the small print ---------- */
.fine{ padding:clamp(40px,6vh,64px) 0 clamp(56px,8vh,84px);
  border-top:1px solid var(--line2); }
.fine p{ font-size:12.5px; line-height:1.7; color:var(--grey); max-width:74ch; }
.fine p + p{ margin-top:10px; }

.foot{ display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:34px var(--gut);
  border-top:1px solid var(--line2); }
.foot img{ height:14px; opacity:.7; }
.foot span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .card{ transition:none; }
  .card:hover{ transform:none; }
}