/* ==========================================================================
   FRANCHISING.CSS  —  this page only
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#1D364D;
  --text-color:#3C4B64;
  --muted:#8A8A8A;
  --page:#F5F8FC;
  --sky:#BEDCF0;        /* hero card */
  --stone:#DEDDD5;      /* benefit cards */
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shell:1440px;
}

body{
  font-family: var(--font-secondary);
  margin:0;background:var(--page);color:var(--head-color);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{
    text-decoration: none;
}
:focus-visible{outline:2px solid var(--head-color);outline-offset:3px;border-radius:4px}

.wrap{margin:0 auto;padding:56px var(--gutter) 80px}
h1{margin:0 0 30px;font-size:40px;line-height:1.2;font-weight:500}
h2{margin:0 0 24px;font-size:40px;line-height:1.25;font-weight:500}

/* clipped-corner button, same as the rest of the site */
.btn-cut{
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),
                    calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 26px;background:var(--head-color);color:#fff;
  font-size:16px;font-weight:500;text-decoration:none;border:0;cursor:pointer;
}
/*.btn:hover{background:#16293C}*/

/* ============ HERO ============ */
.hero{
  background:var(--sky);border-radius:var(--r-lg);margin-bottom:24px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;
  padding:44px 56px;
}
.hero p{margin:0 0 30px;font-size:34px;line-height:1.34;font-weight:400;color:var(--head-color);max-width:19ch}
.hero-art img{width:100%;height:auto;margin-left:auto;max-width:600px}

/* ============ SECTIONS ============ */
.sec>p{margin:0 0 24px;font-size:18px;line-height:1.6;}
.cards{display:grid;gap:24px;margin:24px 0px;}
.cards.five{grid-template-columns:repeat(5,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--stone);border-radius:var(--r-sm);padding:24px 24px;
  font-size:18px;line-height:1.45;color:var(--head-color);
}
.mail{margin:26px 0 0;font-size:16px;font-weight:500}
.mail a{text-decoration:underline}
.closing{margin:0;font-size:28px;line-height:1.35;font-weight:400;color:var(--head-color)}
.closing-cta{display:none}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .wrap{padding:26px var(--gutter) 48px}
  h1{font-size:26px;margin-bottom:20px}
  h2{font-size:24px;margin-bottom:14px}

  /* hero: image first, then centred copy and a full-width button */
  .hero{
    grid-template-columns:1fr;gap:0;padding:0 0 26px;text-align:center;margin-bottom:34px;
  }
  .hero-art{order:-1;padding:18px 16px 0}
  .hero-art img{margin:0 auto;max-width:100%}
  .hero-copy{padding:0 20px}
  .hero p{font-size:22px;line-height:1.35;max-width:none;margin:22px 0 20px}
  .hero .btn{width:100%;height:56px;font-size:15px}

  .sec>p{font-size:15px;color:var(--muted);margin-bottom:14px}
  .sec>p+p{margin-top:-2px}
  .sec>p:last-of-type{margin-bottom:20px}

  .cards{gap:14px}
  .cards.five,.cards.four{grid-template-columns:1fr 1fr}
  .cards.five .card:nth-child(5){grid-column:1 / -1}   /* last one spans, as drawn */
  .card{font-size:14.5px;padding:16px 16px 18px}

  .mail{font-size:14.5px;margin-top:20px}
  .closing{font-size:22px;line-height:1.35;margin-bottom:22px}
  .closing-cta{display:block}
  .closing-cta .btn{width:100%;height:56px;font-size:15px}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s ease}
}