/* Helio Posts inner sales pages in the front page's look (8 Oct 2026).
   Loaded after sales.css and home.css on every page that extends
   sales_base.html. It changes the shell (header, footer, closing photo), the
   fonts and the surface treatment, and leaves each page's own layout alone. */
body.home {
  --ink: #121417; --ink2: #5D636D; --ink-2: #5D636D; --bg: #F3F5F8; --cream: #F3F5F8;
  --line: rgba(18, 20, 23, 0.09); --navy: #12203C; --navy-2: #1B2440; --rail: #12203C; --rail2: #1B2440;
  --gold: #FFD98A; --amber: #E8A13F; --blue: #121417; --r: 16px;
  --display: 'Libre Franklin', 'Franklin Gothic Medium', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--display);
  --font-body: 'Libre Franklin', 'Segoe UI', system-ui, sans-serif;
  --brand: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --soft: #5D636D;
  background: #F3F5F8; color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55;
}
body.home h1, body.home h2, body.home h3 { font-weight: 700; letter-spacing: -0.015em; }
body.home .wrap { max-width: 1248px; padding: 0 24px; }
:focus-visible { outline: 3px solid #F0A73A; outline-offset: 2px; border-radius: 6px; }

/* ---- header, the same as the front page ---- */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(243, 245, 248, 0.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.hdr-in { max-width: 1320px; margin: 0 auto; padding-inline: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { flex: none; display: block; }
.wm { font-family: var(--brand); font-weight: 700; font-size: 24px; letter-spacing: -0.025em; white-space: nowrap; }
.wm span { color: #E8A13F; }
.nav { display: flex; gap: 28px; font-size: 15.5px; font-weight: 500; }
.nav a { color: #353A42; text-decoration: none; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav a.on { font-weight: 700; }
.hdr-signin { flex: none; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; opacity: .85; margin-right: 4px; }
.hdr-signin:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hbtn { flex: none; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.hbtn:hover { transform: translateY(-1px); background: #000; text-decoration: none; }
@media (max-width: 960px) { .nav { display: none; } }
@media (max-width: 480px) { .hdr-signin { display: none; } .wm { font-size: 21px; } .hbtn { padding: 9px 14px; font-size: 14px; } }

/* ---- page head: plain ground, a large heading, no gradient wash ---- */
.hm-pagehead { padding: 56px 0 44px; }
.hm-pagehead h1 { font-size: clamp(38px, 4.2vw, 56px); line-height: 1.04; max-width: 18ch; }
.hm-pagehead .lead { font-size: 20px; line-height: 1.5; color: #353A42; max-width: 60ch; margin-top: 20px; }
body.home h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.08; }
body.home .secsub { font-size: 18px; color: #353A42; }
body.home section { padding: 72px 0; }
body.home section.hm-white { background: #fff; }
body.home section.hm-white + section.hm-white, body.home section:not(.hm-white):not(.hm-dark) + section:not(.hm-white):not(.hm-dark) { border-top: 0; }

/* ---- surfaces: soft shadow instead of a hairline box ---- */
.hm-card, .hm-shot, .hm-costcard { border: 0; border-radius: 16px; box-shadow: 0 20px 50px -30px rgba(18, 32, 60, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.hm-dark { background: #12203C; }
.hm-link, .hm-head .secsub a, body.home .secsub a { text-decoration-color: #E8A13F; }

/* ---- buttons: ink pill first, gold kept for the closing photo ---- */
.hm-btn { padding: 13px 22px; font-weight: 600; font-size: 15.5px; }
.hm-btn.gold { background: var(--ink); color: #fff; }
.hm-btn.gold:hover { background: #000; }
.hm-dark .hm-btn.gold { background: linear-gradient(180deg, #FFD98A, #E8A13F); color: #12203C; }

/* ---- questions: the price inside a question must not be spread apart ---- */
.hm-faq summary { display: block; position: relative; padding-right: 40px; }
.hm-faq summary::after { position: absolute; right: 0; top: 50%; margin-top: -14px; }

/* ---- closing photo, the same as the front page ---- */
.xclose { padding: 96px 24px 0 !important; background: #F3F5F8; }
.xclose .frame { position: relative; max-width: 1392px; margin: 0 auto; height: 520px; border-radius: 28px; overflow: hidden; background: #cfcac2; }
.xclose .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.xclose .grade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,32,60,0.88) 0%, rgba(18,32,60,0.6) 42%, rgba(18,32,60,0) 72%); }
.xclose .words { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); max-width: 560px; color: #fff; z-index: 2; }
body.home .xclose h2 { color: #fff; font-size: clamp(30px, 3vw, 40px); }
.xclose .sub { margin: 16px 0 0; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.xclose .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.xbtn { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15.5px; text-decoration: none; transition: transform 160ms ease; }
.xbtn:hover { transform: translateY(-1px); text-decoration: none; }
.xbtn.gold { background: linear-gradient(180deg, #FFD98A, #E8A13F); color: #12203C; }
.xbtn.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (max-width: 900px) {
  .xclose { padding: 64px 12px 0 !important; }
  .xclose .frame { height: auto; display: flex; flex-direction: column; border-radius: 22px; }
  .xclose .photo { position: relative; height: 220px; }
  .xclose .grade { display: none; }
  .xclose .words { position: relative; left: auto; top: auto; transform: none; max-width: none; padding: 24px 20px 28px; background: #12203C; }
}

/* ---- footer, the same as the front page ---- */
.ftr { padding: 64px 0 48px; }
.ftr-in { max-width: 1320px; margin: 0 auto; padding-inline: 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.ftr-brand p { margin: 8px 0 0; color: #5D636D; font-size: 15px; }
.ftr-brand p a { color: inherit; }
.ftr-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.ftr-nav a { text-decoration: none; color: #353A42; }
.ftr-co { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: #5D636D; padding-top: 18px; border-top: 1px solid rgba(18, 20, 23, 0.09); }
@media (max-width: 640px) { .ftr-in { grid-template-columns: 1fr; } }
.hm-costcard.us .hm-btn.gold, .us .hm-btn.gold { background: linear-gradient(180deg, #FFD98A, #E8A13F); color: #12203C; }
.band.close h2.big { color: #fff; }