/* Stowe Holdings: inner pages (Privacy Notice, Demo Centres, Shop Online, Success Hub).
   Loaded after enterprise.css, which supplies the tokens, header, footer, buttons and type.
   This file only adds the page header band, the "coming soon" layout and legal prose. */

/* =========================================================
   Page header band: midnight, ruled, with the brand gradient along the foot
   ========================================================= */
.pg-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #c3ccda;
  border-bottom: 3px solid transparent; border-image: var(--grad) 1;
}
.pg-hero::before { /* the same column grid the home page draws behind its hero */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: calc(var(--wrap) / 12) 100%; background-position: var(--edge) 0;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.pg-hero .wrap { position: relative; padding: clamp(56px, 7vw, 120px) 0 clamp(48px, 6vw, 96px); }
.pg-hero .eyebrow { color: #9aa7bb; }
.pg-hero .eyebrow b { color: var(--gold); }
.pg-hero h1 { margin-top: 22px; color: #fff; font-size: clamp(36px, 4.4vw, 72px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; max-width: 16em; }
.pg-hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pg-hero .lead { margin-top: 22px; color: #c3ccda; }
.pg-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #9aa7bb; }
.pg-meta span { display: inline-flex; align-items: flex-start; gap: 10px; }
.pg-meta span::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.5em; background: var(--gold); }

/* =========================================================
   Coming soon: words left, photo right, then three ways to get help now
   ========================================================= */
.pg-hero.split .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center; }
.split-copy { grid-column: 1 / span 6; }
.split-fig { grid-column: 8 / span 5; position: relative; margin: 0; }
.split-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line-dk); filter: var(--photo-filter, none); }
.split-fig figcaption {
  position: absolute; left: 0; bottom: 0; padding: 10px 14px;
  background: var(--ink); color: #c3ccda;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  border-top: 2px solid var(--gold);
}
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 8px 14px;
  border: 1px solid var(--line-dk); color: #dfe5ee; font-size: 14px; font-weight: 500;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(216, 185, 121, 0.18); }
.pg-hero .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pg-hero .btn-line { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.pg-hero .btn-line:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.06); }

.help-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 48px; }
.help-c {
  display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.4vw, 40px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff; text-decoration: none; transition: background 0.2s;
}
.help-c:hover { background: var(--mist); }
.help-c small { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.help-c b { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.help-c p { color: var(--slate); }
.help-c .link { margin-top: auto; padding-top: 12px; }

/* =========================================================
   Legal prose with a contents rail
   ========================================================= */
.legal-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--head) + 32px); }
.toc p { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.toc ol { counter-reset: toc; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; color: var(--slate); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.prose { grid-column: 5 / span 8; max-width: 46em; font-size: 17px; line-height: 1.7; color: var(--slate); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.6em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: clamp(22px, 1.7vw, 28px); font-weight: 600; letter-spacing: -0.02em; scroll-margin-top: calc(var(--head) + 24px); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 0; }
.prose li { position: relative; padding-left: 26px; }
.prose li + li { margin-top: 0.5em; }
.prose li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 10px; height: 2px; background: var(--grad); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose .intro { font-size: clamp(18px, 1.25vw, 21px); color: var(--ink); line-height: 1.6; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .split-copy { grid-column: 1 / span 7; }
  .split-fig { grid-column: 8 / span 5; }
  .toc { display: none; }
  .prose { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pg-hero.split .wrap { grid-template-columns: 1fr; }
  .split-copy, .split-fig { grid-column: 1 / -1; }
  .split-fig img { aspect-ratio: 16 / 10; }
  .pg-hero .btns .btn { flex: 1 1 100%; }
  .help-g { grid-template-columns: 1fr; }
  .prose { font-size: 16px; }
}