/* ============================================================
   Inner-page components (shared by every interior page)
   ============================================================ */

/* ---- Page hero ---- */
.phero { position: relative; overflow: hidden; text-align: center;
  padding: clamp(6.5rem, 11vh, 8.5rem) 0 clamp(2.5rem, 4vw, 3.8rem); }
.phero__inner { position: relative; z-index: 3; max-width: 62rem; margin-inline: auto; }
.phero .eyebrow { justify-content: center; }
.phero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.7rem);
  line-height: 1.06; letter-spacing: -0.02em; margin: 1.3rem 0; color: var(--ink); max-width: 17ch; margin-inline: auto; }
.phero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.phero__sub { font-size: var(--t-lead); color: var(--text-soft); max-width: 44ch; margin: 0 auto 2.2rem; }
.phero__cta { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
/* heroes with no CTA button leave a large void before the next section — tighten it */
.phero--nocta { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.phero--nocta .phero__sub { margin-bottom: 0; }
.phero--nocta + section { padding-top: clamp(1.5rem, 3vw, 2.75rem); }
/* .phero clips its own overflow, so the noise mask (a radial that is still
   opaque at the section's bottom edge) used to end in a hard horizontal line
   right where the next section starts. Fade it out before the cut. */
.phero .gridbg {
  -webkit-mask-image: radial-gradient(125% 95% at 50% 32%, #000 48%, transparent 90%),
                      linear-gradient(to bottom, #000 46%, transparent 96%);
          mask-image: radial-gradient(125% 95% at 50% 32%, #000 48%, transparent 90%),
                      linear-gradient(to bottom, #000 46%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.wrap--form { max-width: 46rem; }
.phero .paths { z-index: 0; }
.phero .shapes { z-index: 1; }

/* ---- Generic section heading ---- */
.shead { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.shead.center { margin-inline: auto; text-align: center; }
.shead h2 { color: var(--ink); margin-top: 0.8rem; }
.shead p { color: var(--text-soft); margin-top: 1rem; }

/* ---- Prose ---- */
.prose { max-width: 46rem; }
.prose.center { margin-inline: auto; text-align: center; }
.prose p { color: var(--text-soft); margin-bottom: 1.2rem; font-size: var(--t-body); }
.prose p strong { color: var(--ink); font-weight: 600; }

/* ---- Value / spotlight cards ---- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; align-items: stretch; }
.vgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .vgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgrid--4 { grid-template-columns: 1fr; } }
.vcard { background: linear-gradient(160deg, rgba(255,255,255,0.78), rgba(255,255,255,0.5));
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.7); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  box-shadow: 0 18px 40px -30px rgba(12,20,34,0.42), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .4s var(--ease); height: 100%; }
.vcard:hover { transform: translateY(-4px); }
.vcard__ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(64,153,255,0.92), rgba(10,111,240,0.86));
  -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.5); color: #fff; margin-bottom: 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 18px -10px rgba(10,111,240,0.5);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.vcard:hover .vcard__ico { transform: translateY(-5px) scale(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 20px 32px -10px rgba(10,111,240,0.55); }
.vcard__ico svg { width: 22px; height: 22px; }
.vcard h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.22rem, 1rem + 0.7vw, 1.42rem);
  line-height: 1.16; letter-spacing: -0.01em; margin-bottom: 0.7rem; color: var(--ink); text-wrap: balance; }
.vcard p { color: var(--text-soft); }

/* ---- Process steps ---- */
.steps { display: grid; gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.step { background: var(--card); padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: baseline; }
.step__n { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; color: var(--accent); }
.step h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); margin-bottom: 0.5rem;
  letter-spacing: -0.01em; color: var(--ink); }
.step p { color: var(--text-soft); max-width: 52ch; }

/* ---- Split (text + list/media) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--media .split__media { aspect-ratio: 5/4; position: relative; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid var(--line); box-shadow: 0 30px 60px -32px rgba(12,20,34,0.45); }
.split--media .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.02) saturate(1.02); }
.split--media .split__media::after { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(140deg, rgba(10,111,240,0.4), transparent 60%); }
.ulist { list-style: none; display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.ulist li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--text-soft); }
.ulist li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: translateY(-1px); }

/* ---- Animated tabs ---- */
.tabs { display: grid; gap: clamp(1.4rem, 3vw, 2rem); }
.tabs__nav { position: relative; display: inline-flex; gap: 0.25rem; padding: 0.4rem; align-self: start;
  width: fit-content; max-width: 100%;
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.6); border-radius: 100px;
  overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -2px 6px rgba(12,20,34,0.05), 0 16px 32px -22px rgba(12,20,34,0.42); }
.tabs__nav::-webkit-scrollbar { display: none; }
.tab { position: relative; z-index: 1; padding: 0.6rem 1.25rem; border-radius: 100px; white-space: nowrap;
  font-size: var(--t-small); font-weight: 600; color: var(--ink-soft); transition: color .3s var(--ease); }
.tab.is-active { color: #fff; }
.tabs__ind { position: absolute; z-index: 0; top: 0.4rem; bottom: 0.4rem; left: 0; width: 0;
  border-radius: 100px; border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(160deg, rgba(64,153,255,0.96), rgba(10,111,240,0.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 16px -4px rgba(10,111,240,0.5), 0 2px 5px -2px rgba(10,111,240,0.4);
  transition: transform .5s cubic-bezier(.34,1.4,.5,1), width .5s cubic-bezier(.34,1.4,.5,1); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: tabIn .5s var(--ease-out); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tabpanel__grid { display: grid; grid-template-columns: auto minmax(0, 38rem); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; justify-content: start; }
.tabpanel h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.tabpanel p { color: var(--text-soft); margin-top: 0; }

/* ---- FAQ accordion ---- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;
  gap: 1.2rem; padding: 1.4rem 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem); letter-spacing: -0.01em; color: var(--ink); }
.faq__ic { flex: 0 0 auto; position: relative; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); transition: all .3s var(--ease); }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%,-50%); transition: all .3s var(--ease); }
.faq__ic::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq__item.is-open .faq__ic { background: var(--accent); border-color: var(--accent); }
.faq__item.is-open .faq__ic::before, .faq__item.is-open .faq__ic::after { background: #fff; }
.faq__item.is-open .faq__ic::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq__item.is-open .faq__a { max-height: 460px; }
.faq__a p { color: var(--text-soft); padding-bottom: 1.5rem; max-width: 64ch; }

/* ---- Contact / forms ---- */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* The form sits in a soft glass panel so it reads as a considered object
   rather than a stack of default browser inputs. */
.formcard {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 40px 80px -52px rgba(12,20,34,0.55);
}

.form { display: grid; gap: 0.85rem; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }

/* Floating-label fields */
.field { position: relative; }
.field input, .field textarea, .form input, .form textarea {
  width: 100%; padding: 1.6rem 1.05rem 0.62rem; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--card-2); font: inherit; color: var(--ink); appearance: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.field > label {
  position: absolute; left: 1.08rem; top: 1.02rem; z-index: 1;
  font-size: var(--t-body); line-height: 1; color: var(--ink-faint); pointer-events: none;
  transform-origin: left top; transition: transform .25s var(--ease), color .25s var(--ease); }
.field input:focus, .field textarea:focus, .form input:focus, .form textarea:focus {
  outline: none; background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(10,111,240,0.12); }
.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label { transform: translateY(-0.62rem) scale(0.76); }
.field input:focus ~ label, .field textarea:focus ~ label { color: var(--accent); }
.field input:not(:placeholder-shown):invalid { border-color: rgba(214,69,69,0.45); }

.form textarea { min-height: 138px; resize: vertical; padding-top: 1.75rem; }
.field--area > label { top: 1.15rem; }
.form input::placeholder, .form textarea::placeholder { color: transparent; }

.form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.form__note { font-size: var(--t-small); color: var(--text-faint); margin: 0; }
.form button { justify-self: start; }
.form__done { padding: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--card); color: var(--text-soft); }
.form__done strong { color: var(--ink); font-family: var(--display); font-size: 1.3rem; }
.cinfo { display: grid; gap: 1.4rem; align-content: start; }
/* line the first info row up with the first field, not the card's edge */
.cgrid .cinfo { padding-top: clamp(1.5rem, 3.4vw, 2.6rem); }
.cinfo__row { display: flex; gap: 1rem; align-items: flex-start; }
.cinfo__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-2); color: var(--accent); }
.cinfo__ico svg { width: 20px; height: 20px; }
.cinfo h4 { font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin-bottom: 0.25rem; }
.cinfo p, .cinfo a { color: var(--text-soft); }
.cinfo a:hover { color: var(--accent); }

/* ---- Glass segmented control (axel365 audiences) ---- */
.glass-seg { display: inline-flex; gap: 0.3rem; padding: 0.4rem; border-radius: 100px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 18px 40px -24px rgba(12,20,34,0.4);
  position: relative; flex-wrap: wrap; justify-content: center; }

/* ---- Legal ---- */
.legal { max-width: 48rem; margin-inline: auto; }
.legal h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); margin: 2rem 0 0.7rem; color: var(--ink); }
.legal p, .legal li { color: var(--text-soft); margin-bottom: 1rem; }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--accent); }

@media (max-width: 860px) {
  .cgrid, .split, .tabpanel__grid { grid-template-columns: 1fr; }
  .cgrid .cinfo { padding-top: 0; }
  .form .row2 { grid-template-columns: 1fr; }
  .tabpanel h3 { white-space: normal; }

  /* Full-width, larger submit so the primary action is unmissable on mobile */
  .form__foot { flex-direction: column; align-items: stretch; text-align: center; gap: 0.7rem; }
  .form__foot button { justify-self: stretch; width: 100%;
    padding-block: 1.1em; font-size: 1.02rem; }

  /* Tabs: a single-row pill scroller overflows the viewport with 5–7
     options, so wrap them onto multiple rows. The sliding indicator can't
     track wrapped items (it only translates on X), so hide it and paint
     the active state onto the tab itself. */
  .tabs__nav {
    flex-wrap: wrap; width: 100%; overflow: visible;
    border-radius: 20px; gap: 0.4rem; padding: 0.5rem;
  }
  .tabs__ind { display: none; }
  .tab {
    flex: 1 1 auto; text-align: center; padding: 0.7rem 1rem;
    border-radius: 100px; transition: color .3s var(--ease), background-color .3s var(--ease);
  }
  .tab.is-active {
    color: #fff;
    background: linear-gradient(160deg, rgba(64,153,255,0.96), rgba(10,111,240,0.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 16px -6px rgba(10,111,240,0.5);
  }
}