/* ============================================================
   MAINE STAYS — generic content pages (contact, find-accommodation,
   become-a-host, thanks) on assets-v2.  ms-page-v1
   These pages keep their original content markup (forms, grids), so this
   styles by ELEMENT inside .page-block rather than by their old classes.
   Loaded after base.css + theme.css.
   ============================================================ */

/* hero */
.page-hero{position:relative;overflow:hidden;background:var(--ink-deep);
  padding:clamp(6.5rem,14vh,9rem) 0 clamp(2.6rem,6vh,4rem);}
.page-hero .band-bg{position:absolute;inset:0;}
.page-hero .band-bg img{width:100%;height:100%;object-fit:cover;}
.page-hero .band-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 88% -8%, rgba(43,212,212,.20), transparent 58%),
    linear-gradient(180deg, rgba(9,13,17,.86) 0%, rgba(9,13,17,.93) 100%);}
.page-hero .section-inner{position:relative;z-index:1;}
.page-hero h1{font-family:var(--font-head);font-weight:600;color:#fff;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.015em;}
.page-hero .page-sub{margin-top:.8rem;max-width:40rem;color:rgba(255,255,255,.66);
  line-height:1.55;font-size:.98rem;}

/* body */
.page-body{background:var(--fog);padding:clamp(2.4rem,6vh,4rem) 0 clamp(3rem,7vh,5rem);}
.page-block{max-width:920px;margin:0 auto 1.4rem;background:#fff;
  border:1px solid rgba(22,24,26,.06);border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);padding:clamp(1.4rem,3vw,2.2rem);
  /* the preserved markup carries inline styles like background:var(--accent,#0d4a3d).
     Those vars lived in the old styles.css — define them here so they resolve to the
     brand teal instead of falling back to the old dark green. */
  --accent:#0e9aa7; --accent-dark:#0b7f8a; --accent-light:#d6eff1;
  --warm-gray:#e6e0d6; --cream:#fdfaf6; --text-dark:#16181a; --text-mid:rgba(22,24,26,.62);}

/* generic typography inside the preserved content */
.page-block h2{font-family:var(--font-head);font-weight:600;color:var(--ink);
  font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.01em;margin:1.4rem 0 .8rem;}
.page-block h2:first-child{margin-top:0;}
.page-block h3{font-family:var(--font-ui);font-weight:600;color:var(--ink);
  font-size:1.05rem;margin:1.1rem 0 .5rem;}
.page-block p{color:var(--ink-60);line-height:1.65;font-size:.95rem;margin-bottom:.85rem;}
.page-block ul,.page-block ol{margin:0 0 1rem 1.1rem;color:var(--ink-60);line-height:1.7;font-size:.95rem;}
.page-block li{margin-bottom:.35rem;}
.page-block a{color:var(--teal);}
.page-block a:hover{color:var(--teal-deep);}

/* generic form styling (their markup is preserved) */
.page-block form{display:grid;gap:.9rem;margin-top:1rem;}
.page-block label{font-family:var(--font-ui);font-weight:600;font-size:.82rem;
  color:var(--ink);display:block;margin-bottom:.3rem;}
.page-block input[type=text],.page-block input[type=email],.page-block input[type=tel],
.page-block input[type=date],.page-block input[type=number],.page-block select,.page-block textarea{
  width:100%;background:var(--fog);border:1px solid rgba(22,24,26,.10);border-radius:.8rem;
  padding:.8rem 1rem;color:var(--ink);font-family:var(--font-body);font-size:.95rem;
  transition:border-color .25s,background .25s;}
.page-block input:focus,.page-block select:focus,.page-block textarea:focus{
  outline:none;border-color:var(--teal);background:#fff;}
.page-block textarea{min-height:120px;resize:vertical;}
.page-block button,.page-block input[type=submit],.page-block .btn-submit{
  justify-self:start;background:var(--teal);color:#fff;border:0;cursor:pointer;
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-pill);
  transition:background .25s,transform .25s,box-shadow .25s;}
.page-block button:hover,.page-block input[type=submit]:hover,.page-block .btn-submit:hover{
  background:var(--teal-deep);transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(11,127,138,.6);}

/* any grid-ish blocks the old pages had (benefits, popular locations) */
.page-block .benefits-grid,.page-block .locations-grid,.page-block .benefit-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin-top:1rem;}
.page-block .benefits-grid > *,.page-block .locations-grid > *,.page-block .benefit-cards > *{
  background:var(--fog);border:1px solid rgba(22,24,26,.05);border-radius:.9rem;padding:1rem 1.1rem;}
