/*
 * features.benefitzone.com — shared stylesheet (theme v2)
 * v2: login panel text width is 70% of the content column (was 30% padding of the whole window,
 *     which squeezed the text to nothing on very wide or zoomed-out screens).
 * Recreates HubSpot's "BZ Landing Page" look. Pages must not add their own CSS.
 * Cached for a year: to change anything, copy to theme.v3.css and update the assets partials (then sync).
 */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --bz-orange: #ee6221;        /* brand orange (HubSpot BZ theme) */
  --bz-orange-text: #ee6221;   /* orange text and buttons: exact HubSpot colour, chosen by Brett over a darker WCAG-AA orange */
  --bz-orange-hover: #f97e3f;  /* HubSpot button hover */
  --bz-text: #666666;
  --bz-heading: #666666;
  --bz-link: #0270e0;
  --bz-link-hover: #0048b8;
  --bz-bg: #ffffff;
  --bz-bg-soft: #f7f7f8;
  --bz-border: #d1d6dc;
  --bz-error: #b42318;
  --bz-success-bg: #ecf8f0;
  --bz-success: #1d6b3a;
  --bz-max: 1240px;
  --bz-gutter: 1.25rem;
  --bz-radius: 6px;
  --bz-font: Arial, Helvetica, sans-serif;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-size: 14px; }

body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-text);
  font-family: var(--bz-font);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

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

/* Sizes, weights and spacing copied from HubSpot "BZ" theme-overrides + _typography.css.
   Weight 500 renders as regular in Arial, exactly as on HubSpot. */
h1, h2, h3, h4 { color: var(--bz-heading); line-height: 1.4; margin: 0 0 1.4rem; }
h1 { font-size: 50px; font-weight: 700; }
h2 { font-size: 26px; font-weight: 500; }
h3 { font-size: 18px; font-weight: 500; color: var(--bz-orange-text); margin-bottom: 5px; }
@media (max-width: 767px) { h1 { font-size: 36px; } }

p, ul, ol { margin: 0 0 1.4rem; }
ul ul, ol ul, ul ol, ol ol { margin: 0; }
ul, ol { padding-left: 1.4rem; }
strong { color: var(--bz-heading); }
/* HubSpot theme-overrides: blockquote border colour #EE6221, _typography.css spacing */
blockquote { border-left: 2px solid var(--bz-orange); margin: 0 0 1.4rem; padding-left: 0.7rem; }

a { color: var(--bz-link); }
a:hover, a:focus { color: var(--bz-link-hover); }
:focus-visible { outline: 3px solid var(--bz-link); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  background: var(--bz-bg);
  padding: 0.5rem 1rem;
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; }

/* ---- Buttons ------------------------------------------------------------ */
.button {
  display: inline-block;
  background: var(--bz-orange-text);
  color: #ffffff;
  border: 0;
  border-radius: var(--bz-radius);
  padding: 15px 24px;
  font: 400 14px/1.2 var(--bz-font);
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .button:focus { background: var(--bz-orange-hover); color: #ffffff; }
.button[disabled] { opacity: 0.6; cursor: wait; }

/* ---- Header & footer ---------------------------------------------------- */
.site-header {
  padding: 0.6rem var(--bz-gutter);
  background: var(--bz-bg);
}
.site-header__logo { display: inline-block; }
.site-header__logo img { width: 200px; }

.site-footer {
  background: var(--bz-bg-soft);
  font-size: 0.875rem;
  padding: 2.5rem var(--bz-gutter) 1rem;
}
.site-footer__inner { max-width: 1120px; margin: 0 auto; }
.site-footer__title { color: var(--bz-orange-text); font-size: 1.125rem; font-weight: 600; margin-bottom: 1.25rem; }
.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  font-style: normal;
}
.site-footer__item { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.6rem; }
.site-footer__item svg { flex: 0 0 auto; width: 1rem; height: 1rem; fill: var(--bz-orange); }
.site-footer__item a { color: var(--bz-text); text-decoration: none; }
.site-footer__item a:hover, .site-footer__item a:focus { color: var(--bz-orange-text); text-decoration: underline; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; border-top: 1px solid var(--bz-border); margin-top: 1.5rem; padding-top: 1rem; }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: var(--bz-text); }

/* ---- Layout helpers ----------------------------------------------------- */
.container { max-width: var(--bz-max); margin: 0 auto; padding: 0 var(--bz-gutter); }
.narrow { max-width: 50rem; margin: 0 auto; padding: 0 var(--bz-gutter); }

/* ---- Hero (from "BZ Feature Banner - Landing Page") ---------------------- */
.hero { background: var(--bz-bg-soft); padding: 3rem 0 2.5rem; margin-bottom: 2.5rem; }
.hero__inner { max-width: var(--bz-max); margin: 0 auto; padding: 0 var(--bz-gutter); display: grid; gap: 2rem; align-items: center; }
.hero__text { text-align: center; }
.hero__actions { margin-top: 1.5rem; }
.hero__media { display: none; }
.hero__media img { border-radius: var(--bz-radius); }

@media (min-width: 768px) {
  .hero { padding: 80px 0 0; margin-bottom: 100px; }
  .hero__inner { grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; }
  .hero__text { text-align: left; padding-bottom: 40px; }
  .hero__media { display: block; margin-bottom: -80px; }
}

/* ---- Feature sections (from "BZ Left/Right Image Section") -------------- */
/* Layout like HubSpot: the section heading sits on its own row above the text column
   (40px below it); the image sits beside the text, level with the first sub-heading. */
.feature { padding: 40px 0; }
.feature__inner { max-width: var(--bz-max); margin: 0 auto; padding: 0 var(--bz-gutter); display: grid; row-gap: 1.4rem; }
.feature__heading { margin: 0; }
.feature__media { margin: 0; }
.feature__media img { border-radius: var(--bz-radius); margin: 0 auto; }
.feature__media figcaption { font-size: 0.875rem; margin-top: 0.5rem; text-align: center; }

@media (min-width: 768px) {
  .feature { padding: 80px 0; }
  .feature__inner { grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 0; align-items: start; }
  .feature__heading { grid-row: 1; padding-bottom: 40px; }
  .feature__text, .feature__media { grid-row: 2; }
  .feature--image-right .feature__heading, .feature--image-right .feature__text { grid-column: 1; }
  .feature--image-right .feature__media { grid-column: 2; }
  .feature--image-left .feature__heading, .feature--image-left .feature__text { grid-column: 2; }
  .feature--image-left .feature__media { grid-column: 1; }
}

/* Layered images (HubSpot "background-overlay" + floating front image).
   <figure class="feature__media layered">
     <img class="layered__back fade-60" ...>                 faded screenshot, 80% wide, pinned to the outer corner
     <img class="layered__front front-500 drop-200" ...>     optional: overlaps the back one, inner corner, with shadow
   </figure>
   A section with only a back image is fine. Classes mirror HubSpot per-section settings. */
.layered { display: grid; }
.layered > img { grid-area: 1 / 1; border-radius: var(--bz-radius); }
.layered > .layered__back { margin: 0; }
.layered__back { width: 80%; align-self: start; justify-self: start; }
.feature--image-right .layered__back { justify-self: end; }
/* .layered > .layered__front: specific enough to beat .feature__media img { margin } */
.layered > .layered__front { position: relative; z-index: 1; justify-self: end; align-self: start; max-width: 75%; margin: calc(var(--drop, 0px) * 0.6) 0 0; box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.5); }
.feature--image-right .layered > .layered__front { justify-self: start; }
@media (min-width: 768px) { .layered > .layered__front { max-width: 100%; margin-top: var(--drop, 0px); } }
.fade-40 { opacity: 0.43; } .fade-50 { opacity: 0.53; } .fade-60 { opacity: 0.6; }
.fade-70 { opacity: 0.73; } .fade-80 { opacity: 0.8; } .fade-90 { opacity: 0.9; }
.front-200 { width: 200px; } .front-250 { width: 250px; } .front-350 { width: 350px; } .front-500 { width: 500px; }
.drop-100 { --drop: 100px; } .drop-200 { --drop: 200px; } .drop-250 { --drop: 250px; } .drop-300 { --drop: 300px; } .drop-370 { --drop: 370px; }

.text-section { padding: 40px 0; }
@media (min-width: 768px) { .text-section { padding: 80px 0; } }

/* ---- Call to action ----------------------------------------------------- */
.cta { background: var(--bz-bg-soft); padding: 3rem 0; text-align: center; margin-top: 2rem; }
.cta p:last-child { margin-bottom: 0; }

/* ---- Forms -------------------------------------------------------------- */
.form-section { padding: 3rem 0; }
.form { max-width: 36rem; margin: 0 auto; }
.form__field { margin-bottom: 1.1rem; }
.form__field label { display: block; font-weight: 600; color: var(--bz-heading); margin-bottom: 0.35rem; }
.form__field .form__optional { font-weight: 400; color: var(--bz-text); }
.form__field input, .form__field textarea, .form__field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--bz-border);
  border-radius: 3px;
  font: 1rem/1.4 var(--bz-font);
  color: var(--bz-heading);
  background: #ffffff;
}
.form__field input:focus, .form__field textarea:focus { border-color: var(--bz-link); outline: none; }
.form__field textarea { min-height: 7rem; resize: vertical; }
/* Compact request-a-call form (form-request-call): fields stacked in a narrow centred column. */
.request-call { text-align: center; }
.form--inline { max-width: 26rem; margin: 1.5rem auto 0; text-align: left; }
.form--inline .button { display: block; width: 100%; margin-top: 0.5rem; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--bz-radius); }
.form__status--error { color: var(--bz-error); background: #fdf0ee; }
.form__status--success { color: var(--bz-success); background: var(--bz-success-bg); }

/* ---- Changelog ---------------------------------------------------------- */
.changelog { padding: 1rem 0 3rem; }
.changelog-group { margin-bottom: 2.5rem; }
.changelog-group h2 { border-bottom: 2px solid var(--bz-orange); padding-bottom: 0.5rem; }
.changelog-list { list-style: none; padding: 0; }
.changelog-entry { padding: 0.9rem 0; border-bottom: 1px solid var(--bz-border); margin: 0; }
.changelog-entry h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.changelog-entry p:last-child, .changelog-entry ul:last-child { margin-bottom: 0; }
.changelog-back { margin-top: 2rem; }

.changelog-index { list-style: none; padding: 0; }
.changelog-index li { padding: 1rem 0; border-bottom: 1px solid var(--bz-border); margin: 0; }
.changelog-index a { font-size: 1.15rem; font-weight: 600; }
.changelog-index p { margin: 0.25rem 0 0; }

/* ---- Confirmation ------------------------------------------------------- */
.confirmation { padding: 4rem 0 5rem; text-align: center; }
.confirmation .form { text-align: left; margin-top: 1.5rem; }

/* ---- Login panel (shown in an iframe on the product's login page) ------- */
/* From HubSpot "BZ Login Landing Page": full-bleed photo, dark tint, white text kept off the
   right-hand side of the photo. The tint is darker than HubSpot's (0.55 vs 0.28) so white text
   meets WCAG AA contrast over any part of the photo. */
.login-panel { position: relative; margin: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: #54595f; color: #ffffff; }
.login-panel::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1; }
.login-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.login-panel__card { position: relative; z-index: 2; width: 100%; max-width: 1140px; margin: 0 auto; padding: 2rem 1.25rem; }
.login-panel__eyebrow { text-transform: uppercase; letter-spacing: 12px; font-size: 20px; font-weight: 600; color: #ffffff; margin-bottom: 10px; }
.login-panel__card h1 { color: #ffffff; font-size: 39px; font-weight: 900; line-height: 1.2; }
.login-panel__card p { color: rgba(255, 255, 255, 0.92); font-size: 16px; font-weight: 300; line-height: 2; }
.login-panel__card a:not(.button) { color: #ffffff; }
@media (max-width: 767px) { .login-panel__eyebrow { letter-spacing: 6px; font-size: 16px; } .login-panel__card h1 { font-size: 30px; } }
.login-panel__privacy { font-size: 0.8rem; margin-top: 2rem; }
/* Like HubSpot: text limited to 70% of the 1140px column, keeping it clear of the photo on the right. */
@media (min-width: 768px) { .login-panel__card > * { max-width: 70%; } }