/* CLEOWebsites.ca — page-scoped composition for the "plans" page.
 * Lifted verbatim from the approved J2 prototype (plans.html), which kept each
 * page's own composition in a page <style> block. Kept per-page rather than
 * merged into system.css on purpose: #open and #close are each used by three
 * different pages with different rules, and merging would silently cross them.
 * Everything shared lives in system.css. */

#plans{background:var(--paper);color:var(--ink)}
  #plans .scene__media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(104deg,rgba(251,248,243,.95) 0%,rgba(251,248,243,.87) 44%,
      rgba(251,248,243,.6) 72%,rgba(251,248,243,.38) 100%)}
  #plans .scene__body{align-items:center;padding-top:124px;padding-bottom:96px}
  .plans__inner{width:100%;max-width:1040px;margin:0 auto}
  #plans .slate,#plans .meta{color:#7A6D5C}
  #plans .h-title,#plans .h-sec{color:var(--ink)}
  #plans .lede{color:#5C5245}
  .note{margin-top:32px;display:flex;gap:12px;align-items:flex-start;max-width:64ch;
    font-size:16px;color:#5C5245}
  /* The promotion, stated plainly on the same warm ground — the struck-out
     normal fee is what makes the waiver mean something. */
  .offer{margin-top:34px;padding:22px 26px;max-width:64ch;
    border:1px solid rgba(192,143,60,.45);border-radius:6px;
    background:linear-gradient(180deg,rgba(255,252,245,.72),rgba(250,244,233,.5))}
  .offer__head{margin:0;font-family:var(--f-display);font-weight:500;
    font-size:clamp(19px,1.8vw,24px);letter-spacing:-.012em;color:var(--ink)}
  .offer__head s{color:#8A7B68;text-decoration-thickness:1px}
  .offer__head b{font-weight:500;color:#8A6A25}
  .offer__body{margin:8px 0 0;font-size:15px;color:#5C5245}
  #included .scene__body{align-items:center;padding-top:100px;padding-bottom:100px}
  .included__inner{width:100%;max-width:1040px;margin:0 auto}
  #close .scene__body{align-items:center;justify-content:center;flex-direction:column;
    text-align:center;gap:20px}
  @media (max-width:820px){
    #plans .scene__body{padding-top:96px;padding-bottom:72px}
    #plans .scene__media::after{background:linear-gradient(to bottom,
      rgba(251,248,243,.95) 0%,rgba(251,248,243,.9) 58%,rgba(251,248,243,.7) 100%)}
  }