:root {
  --up-ink: #0a0e1a;
  --up-paper: #faf7f0;
  --up-cream: #f5f1e8;
  --up-gold: #b8924a;
  --up-gold-bright: #d4a957;
  --up-rule: rgba(10, 14, 26, 0.12);
  --up-muted: #5a6072;
}
.up-mag * { box-sizing: border-box; }
.up-mag { font-family: "Inter", "Helvetica Neue", -apple-system, sans-serif; color: var(--up-ink); line-height: 1.7; background: var(--up-paper); }
.up-mag a { color: var(--up-ink); text-decoration: none; border-bottom: 1px solid var(--up-gold); transition: color .2s; }
.up-mag a:hover { color: var(--up-gold); }
.up-mag h1, .up-mag h2, .up-mag h3, .up-mag h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--up-ink); margin: 0 0 24px; }
.up-mag h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.up-mag h2 { font-size: clamp(2rem, 5vw, 4rem); }
.up-mag h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.up-mag .up-eyebrow { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--up-gold); margin-bottom: 18px; }
.up-mag .up-rule { width: 60px; height: 2px; background: var(--up-gold); margin: 0 0 24px; }
.up-mag .up-container { max-width: 1500px; margin: 0 auto; padding: 0 24px; }
.up-mag .up-btn { display: inline-block; background: var(--up-ink); color: #fff !important; padding: 16px 36px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border: 1.5px solid var(--up-ink); transition: all .3s ease; text-decoration: none; }
.up-mag .up-btn:hover { background: var(--up-gold); border-color: var(--up-gold); color: #fff !important; }
.up-mag .up-btn-light { background: transparent; color: var(--up-ink) !important; border: 1.5px solid var(--up-ink); }
.up-mag .up-btn-light:hover { background: var(--up-ink); color: #fff !important; }
/* HERO — full-bleed London */
.up-hero { position: relative; min-height: 92vh; padding: 140px 24px 100px; background-image: linear-gradient(rgba(10,14,26,0.55), rgba(10,14,26,0.85)), url('https://unitedpress.uk/wp-content/uploads/2026/01/R-4.jpg'); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; }
.up-hero h1,.up-hero h2 { color: #fff !important; max-width: 1100px; font-size: clamp(3rem, 7vw, 6rem) !important; margin: 0 0 24px; }
.up-hero h1::before,.up-hero h2::before { content: ""; display: block; width: 80px; height: 2px; background: var(--up-gold); margin: 0 auto 32px; }
.up-hero .up-lead { font-family: "Inter", sans-serif; font-size: clamp(1rem, 1.4vw, 1.25rem); max-width: 720px; margin: 0 auto 32px; color: rgba(255,255,255,0.9); }
.up-hero .up-pubs { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(.9rem, 1.2vw, 1.1rem); color: rgba(255,255,255,0.75); letter-spacing: 1px; }
/* GUARANTEED FEATURE — magazine cover spread */
.up-guarantee { background: #fff; padding: 120px 24px; }
.up-guarantee-inner { max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.up-guarantee .up-badge { display: inline-block; background: var(--up-ink); color: #fff; padding: 10px 18px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 24px; }
.up-guarantee h2 em { color: var(--up-gold); font-style: normal; }
.up-guarantee .up-checklist { list-style: none; padding: 0; margin: 32px 0; }
.up-guarantee .up-checklist li { font-family: "Inter", sans-serif; font-size: 1rem; padding: 18px 0; border-top: 1px solid var(--up-rule); display: flex; align-items: baseline; gap: 16px; color: var(--up-ink); }
.up-guarantee .up-checklist li:last-child { border-bottom: 1px solid var(--up-rule); }
.up-guarantee .up-checklist li::before { content: "✓"; color: var(--up-gold); font-weight: 700; font-size: 1.1rem; }
.up-guarantee .up-img-wrap { position: relative; }
.up-guarantee .up-img-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.up-guarantee .up-img-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(255,255,255,0.96); padding: 12px 18px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--up-ink); }
/* STATS — dark editorial */
.up-stats { background: var(--up-ink); color: #fff; padding: 120px 24px; }
.up-stats-eyebrow { color: var(--up-gold); text-align: center; margin-bottom: 18px; }
.up-stats h2 { color: #fff !important; text-align: center; max-width: 760px; margin: 0 auto 70px; }
.up-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1420px; margin: 0 auto; }
.up-stat-num { font-family: "Playfair Display", serif; font-size: clamp(2.75rem, 5vw, 4.5rem); color: var(--up-gold); line-height: 1; font-weight: 700; margin-bottom: 14px; text-align: center; }
.up-stat-lbl { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.75); font-weight: 600; text-align: center; }
/* WHY US — 3 card editorial grid */
.up-why { background: var(--up-paper); padding: 120px 24px; }
.up-why-headline { max-width: 920px; }
.up-why .up-lead { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.55; color: #3a3f4f; margin-bottom: 56px; max-width: 820px; }
.up-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.up-card { background: #fff; overflow: hidden; box-shadow: 0 4px 24px rgba(10,14,26,0.06); transition: all .4s ease; }
.up-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(10,14,26,0.12); }
.up-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.up-card-body { padding: 32px 32px 40px; }
.up-card-cat { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--up-gold); margin-bottom: 14px; }
.up-card h3 { font-family: "Playfair Display", serif; font-size: 1.55rem; line-height: 1.25; margin-bottom: 14px; }
.up-card p { font-size: 0.95rem; line-height: 1.7; color: #3a3f4f; margin: 0; }
/* PULL QUOTE */
.up-pullquote { background: #fff; padding: 140px 24px; text-align: center; border-top: 1px solid var(--up-rule); border-bottom: 1px solid var(--up-rule); }
.up-pullquote-text { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.45; color: var(--up-ink); max-width: 940px; margin: 0 auto 32px; }
.up-pullquote-text::before, .up-pullquote-text::after { content: '"'; color: var(--up-gold); font-size: 1.2em; }
.up-pullquote-attr { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--up-gold); }
/* SERVICES — alternating editorial */
.up-services { background: var(--up-paper); padding: 120px 24px; }
.up-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1420px; margin: 0 auto; }
.up-services-grid > div:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--up-rule); }
.up-service h3 { font-family: "Playfair Display", serif; font-size: 1.75rem; margin-bottom: 16px; }
.up-service .up-service-num { font-family: "Playfair Display", serif; font-size: 2.5rem; color: var(--up-gold); margin-right: 16px; vertical-align: top; line-height: 1; }
.up-service p { font-size: 1rem; line-height: 1.75; color: #2a2f3e; margin-bottom: 16px; }
.up-service .up-service-tags { font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--up-muted); font-weight: 600; }
/* PROCESS - 4 step timeline */
.up-process { background: #fff; padding: 120px 24px; text-align: center; }
.up-process h2 { max-width: 760px; margin: 0 auto 24px; }
.up-process > .up-container > .up-lead { font-family: "Playfair Display", serif; font-style: italic; font-size: 1.25rem; color: #3a3f4f; max-width: 720px; margin: 0 auto 70px; }
.up-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1420px; margin: 0 auto; text-align: left; }
.up-process-step { position: relative; padding-top: 60px; }
.up-process-step::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--up-gold); }
.up-process-num { font-family: "Playfair Display", serif; font-size: 3rem; color: var(--up-gold); line-height: 1; margin-bottom: 12px; }
.up-process-step h3 { font-size: 1.25rem; margin-bottom: 14px; }
.up-process-step p { font-size: 0.95rem; line-height: 1.65; color: #3a3f4f; margin: 0; }
/* FAQ */
.up-faq { background: var(--up-cream); padding: 120px 24px; }
.up-faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; max-width: 1420px; margin: 0 auto; align-items: start; }
.up-faq-grid h2 { position: sticky; top: 100px; }
.up-faq-list details { border-bottom: 1px solid var(--up-rule); padding: 24px 0; }
.up-faq-list details:first-child { border-top: 1px solid var(--up-rule); }
.up-faq-list summary { font-family: "Playfair Display", serif; font-size: 1.35rem; font-weight: 700; cursor: pointer; list-style: none; color: var(--up-ink); padding-right: 40px; position: relative; }
.up-faq-list summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--up-gold); font-size: 1.5rem; transition: transform .3s; }
.up-faq-list details[open] summary::after { transform: rotate(45deg); }
.up-faq-list details p { padding-top: 18px; font-size: 1rem; line-height: 1.7; color: #2a2f3e; margin: 0; }
/* FINAL CTA */
.up-final { background: var(--up-ink); color: #fff; padding: 140px 24px; text-align: center; }
.up-final h2 { color: #fff !important; max-width: 820px; margin: 0 auto 24px; }
.up-final-lead { font-family: "Playfair Display", serif; font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: rgba(255,255,255,0.85); max-width: 680px; margin: 0 auto 40px; }
.up-final .up-btn { background: var(--up-gold); border-color: var(--up-gold); }
.up-final .up-btn:hover { background: #fff; color: var(--up-ink) !important; border-color: #fff; }
/* MOBILE */
@media (max-width: 900px) {
  .up-guarantee-inner, .up-services-grid, .up-faq-grid { grid-template-columns: 1fr; gap: 50px; }
  .up-services-grid > div:nth-child(odd) { padding-right: 0; border-right: none; border-bottom: 1px solid var(--up-rule); padding-bottom: 40px; }
  .up-why-grid, .up-process-grid { grid-template-columns: 1fr; }
  .up-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .up-hero { padding: 100px 20px 80px; min-height: 80vh; }
  .up-faq-grid h2 { position: static; }
}



.up-form-intro{text-align:center;max-width:780px;margin:0 auto;padding:56px 20px 8px}
.up-form-intro .up-eyebrow{display:inline-block}
.up-form-intro h2{margin:14px 0 14px}
.up-form-intro .up-fi-sub{max-width:660px;margin:0 auto;font-size:1.06rem;line-height:1.65}


/* --- Homepage polish (Claude) --- */
body.home main#content .elementor-widget-container > p:empty{display:none!important}
body.home main#content .elementor-widget-container > p > br{display:none!important}
body.home main#content .elementor-widget-container > p{margin:0!important}
.up-crest{display:flex!important;align-items:center!important;justify-content:flex-start!important}
.up-crest img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:left center!important;display:block!important}

/* Full-bleed section backgrounds on up-mag guide/article pages - each section's own background should span the full viewport width even though the theme's .site-main / .page-content wrappers cap content at ~1140px/820px. Inner content wrappers (.up-container, .up-hero-text, etc.) keep their own max-width, so only the colored band stretches edge to edge. */
.up-mag > section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* Root-cause fix: .site-main and .page-content are centered, width-capped
   (1140px / 820px) boxes with overflow-x:hidden. That clips the .up-mag > section
   full-bleed breakout above to their own narrow box instead of the real viewport,
   which is why sections still showed cream side margins with content cut off on
   the right. Remove the width cap and clipping on these two wrappers, but only on
   up-mag pages, so inner content wrappers (.up-container etc, which keep their own
   max-width) can center normally while section backgrounds paint edge-to-edge. */
body:has(.up-mag) .site-main,
body:has(.up-mag) .page-content {
  max-width: 100% !important;
  overflow: visible !important;
  overflow-x: visible !important;
}

/* Hide the theme's default WordPress page title bar on up-mag guide pages.
   The hero section below already has its own large heading, so this plain
   .page-header > h1.entry-title bar above the article was a duplicate title. */
body:has(.up-mag) .page-header {
  display: none !important;
}

/* Fix invisible text in the dark 'Real Guardian Coverage vs Guaranteed Shortcuts'
   comparison table (.up-compare-table). A generic sitewide zebra-stripe rule
   (body.page:not(.home) .page-content tr:nth-child(2n) td) paints even table
   rows with an opaque cream background, but this table's text/check/cross
   marks are cream/white for its dark navy section - cream-on-cream was
   invisible. Force even rows back to the same translucent dark stripe as the
   odd rows so all text stays readable. */
.up-compare .up-compare-table tbody tr:nth-child(2n) td {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Fix the sitewide Ninja Forms lead-form (#nf-form-2-cont) clipping its own
   left-hand info column (logos + As Featured In + Visible Across AI Search).
   That column is grid-row spanned to a fixed '1 / 1 / 7' - written before the
   'Visible Across AI Search' block existed in the field's HTML. Its real
   content is now taller than those 6 fixed rows, so the grid wrapper's
   overflow:hidden clips it while the right-hand form fields (Name, Phone,
   Email, Message, dropdown, button - not row-spanned) keep growing normally,
   producing a mismatched card with a blank gap under the clipped column.
   Span the full grid height instead of a fixed row count, and stop clipping,
   so this stays correct even if the info column's content changes again.
   (Note: the site already had an attempted fix for this - '.upviz-help
   #nf-form-2-cont .nf-fields-wrap' - but it targets a .nf-fields-wrap CLASS
   that doesn't exist; the real element is the <nf-fields-wrap> custom tag
   with no class, so that old rule never matched anything, anywhere.) */
body #nf-form-2-cont nf-fields-wrap > nf-field:nth-child(1) {
  grid-row: 1 / -1 !important;
}
body #nf-form-2-cont nf-fields-wrap {
  overflow: visible !important;
}

/* Lead form panel spacing - match homepage exactly.
   Root cause: on up-mag guide pages the editorial article stylesheet applies
   28px top/bottom margins to every img in the content area. The lead form is
   injected inside that content area, so the press logos and AI-platform icons
   inherited those margins: press-logo grid rows grew from 52px to 108px (grid
   277px -> 477px) and the "Visible Across AI Search" panel from 153px to 321px,
   pushing the left panel ~287px past the bottom of the card. The homepage
   renders these same images with zero margin, so restore that inside the form
   component only - article images elsewhere are untouched. */
#nf-form-2-cont img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Stats band heading - centre it.
   The section styles it as "margin: 0 auto 70px" (centred), but the sitewide
   rule "body.page:not(.home) .page-content h2 { margin: 64px 0 20px !important }"
   outranks it and pins the 760px heading box to the left of the full-bleed
   band, while the eyebrow above and the stats below stay centred. Restore the
   horizontal centring for this band only, leaving the vertical rhythm alone. */
body.page:not(.home) .page-content .up-mag .up-stats > h2 {
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page:not(.home) .page-content .up-mag .up-stats > h2::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
}


/* ============================================================
   Task 2 - up-mag template vs. sitewide editorial CSS (Claude)
   The editorial snippet (17071) forces "!important" margins/colours on
   h2/h3/p for prose pages. Magazine-template (.up-mag) pages are built on top
   of it, but three of their sections are laid out by the template itself and
   the editorial rules were breaking them. These rules restore the template's
   own layout; they must carry !important only because the editorial rule they
   correct is itself !important (equal importance -> higher specificity wins).
   ============================================================ */

/* 1. Hero: paragraphs inherit the hero text colour (editorial forced #2b3038
      on a navy background -> invisible text). */
body.page:not(.home) .page-content .up-mag .up-hero-text p,
body.page:not(.home) .page-content .up-mag .up-hero p { color: inherit; }

/* 2. Final CTA: centred heading + lead (template uses margin:0 auto). Note: .up-final
      is rendered as a sibling of article.up-mag, so it is scoped to .page-content. */
body.page:not(.home) .page-content .up-final h2 { margin: 0 auto 24px !important; padding-top: 0; }
body.page:not(.home) .page-content .up-final h2::before { left: 50%; transform: translateX(-50%); top: -26px; }
body.page:not(.home) .page-content .up-final .up-final-lead { margin: 0 auto 40px !important; }

/* 3. Section headings that already have the template's eyebrow + gold rule
      (.up-eyebrow / .up-rule) were getting a second gold line and 64px of
      extra space from the editorial h2::before decoration. */
body.page:not(.home) .page-content .up-rule + h2,
body.page:not(.home) .page-content .up-eyebrow + h2 { margin-top: 0 !important; padding-top: 0; }
body.page:not(.home) .page-content .up-rule + h2::before,
body.page:not(.home) .page-content .up-eyebrow + h2::before { display: none; }


/* ============================================================
   Task 2 - "Get featured in ..." template (.upx2): lead-form card (Claude)
   The white card around the Ninja form used an inline padding (26px 24px) that,
   combined with .contact .panel's 26px side padding, left the form only 275px
   wide on a 390px phone. The inline padding was moved to this class (one-off
   snippet 17392) so it can respond to the viewport. The form itself is untouched.
   ============================================================ */
.upx2 .contact .up-form-card { padding: 26px 24px; }
@media (max-width: 820px) {
  .upx2 .contact .panel { padding: 40px 14px; }
  .upx2 .contact .up-form-card { padding: 18px 10px; }
}

/* ============================================================
   Task 2 - up-mag trust panel on small screens (Claude)
   .up-trustpanel is an inline SVG banner (viewBox 1600x520) with its copy set
   inside the SVG. At phone widths it scaled to ~290px and the text became
   unreadable. Below 700px it now keeps a readable minimum width and scrolls
   horizontally inside its own container instead of shrinking.
   ============================================================ */
@media (max-width: 700px) {
  .up-mag .up-trustpanel { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .up-mag .up-trustpanel > svg { min-width: 760px; }
}

/* Sitewide (Claude): the auto-inserted lead form panel heading keeps the site heading face on
   self-styled (up-designed) pages too, where the editorial stylesheet no longer applies. */
.up-sitewide-lead-form h2,.up-sitewide-lead-form h3{font-family:"Playfair Display",Georgia,serif;}