/*
 * NewPlay Meta Ads Workflow landing page
 * All visual rules are scoped to .np-maw so they do not affect other pages.
 */

.np-maw {
  --np-paper: #ffffff;
  --np-ink: #14262d;
  --np-muted: #50595d;
  --np-deep: #26373d;
  --np-blue: #d3e9f0;
  --np-red: #f0231e;
  --np-line: #aeb6b8;
  width: 100vw;
  max-width: none !important;
  margin-right: calc(50% - 50vw) !important;
  margin-left: calc(50% - 50vw) !important;
  background: var(--np-paper);
  color: var(--np-ink);
  font-family: "Work Sans", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.np-maw, .np-maw * { box-sizing: border-box; }
/* The production NewPlay theme adds this legacy wrapper to every Gutenberg
 * Group block. Removing only its visual box restores the intended flex/grid
 * relationships while leaving all editable Gutenberg blocks intact. */
.np-maw .wp-block-group__inner-container { display: contents !important; }
.np-maw > *, .np-maw .wp-block-group, .np-maw figure { margin-block-start: 0; margin-block-end: 0; }
.np-maw a { color: inherit; }
.np-maw p { margin: 0; }
.np-maw-page { width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: clip; }

.np-maw h1,
.np-maw h2 {
  margin: 0;
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
  text-transform: uppercase;
}

.np-maw h1 { font-size: clamp(34px, 3vw, 48px); }
.np-maw h2 { font-size: clamp(34px, 3.5vw, 46px); }
.np-maw h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }

.np-maw .np-eyebrow {
  margin-bottom: 16px;
  color: var(--np-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
}

.np-maw .np-hero { width: 100%; background: var(--np-blue); }
.np-maw .np-hero-inner { max-width: 1180px; margin: 0 auto; padding: 62px 28px 42px; }
/* The active NewPlay header is fixed and overlays the first part of the page. */
.wp-theme-newplay .np-maw .np-hero-inner { padding-top: 138px; }
.np-maw .np-hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
  gap: 52px;
  align-items: center;
}
.np-maw .np-hero-copy { max-width: 680px; }
.np-maw .np-hero-lede { max-width: 670px; margin-top: 20px; font-size: 16px; line-height: 1.55; }
.np-maw .np-actions { margin-top: 28px; }
.np-maw .np-button .wp-block-button__link {
  display: inline-flex;
  min-height: 50px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: var(--np-red);
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
}
.np-maw .np-button .wp-block-button__link:hover { background: #d91f1b; color: white; }

.np-maw .np-campaign-graphic { position: relative; max-width: 540px; justify-self: end; isolation: isolate; }
.np-maw .np-campaign-graphic::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 25.3%;
  left: 34.8%;
  width: 27.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
}
.np-maw .np-campaign-graphic img { position: relative; z-index: 1; display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.np-maw .np-workflow {
  margin-top: 52px;
  padding: 46px 36px;
  overflow: hidden;
  background:
    linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px),
    var(--np-deep);
  background-size: 32px 32px;
}
.np-maw .np-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, .72fr) repeat(4, minmax(108px, 1fr)) minmax(146px, 1.2fr) minmax(204px, 1.65fr);
  gap: 16px;
  align-items: stretch;
}
.np-maw .np-flow::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 4%;
  left: 4%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--np-red);
}
.np-maw .np-flow-node {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 154px;
  padding: 20px 16px;
  border: 1px solid rgb(20 38 45 / 24%);
  background: white;
  color: var(--np-ink);
}
.np-maw .np-flow-node:not(.np-flow-output)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  width: 13px;
  height: 15px;
  transform: translateY(-50%);
  background: var(--np-red);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.np-maw .np-flow-input { align-items: center; justify-content: center; font-family: "Anton", Impact, sans-serif; font-size: 21px; line-height: 1.05; text-align: center; text-transform: uppercase; }
.np-maw .np-flow-step { flex-direction: column; justify-content: space-between; gap: 24px; }
.np-maw .np-flow-step .np-number { color: var(--np-red); font-family: "Anton", Impact, sans-serif; font-size: 38px; line-height: 1; }
.np-maw .np-flow-step p:last-child { font-size: 13px; line-height: 1.25; text-transform: uppercase; }
.np-maw .np-flow-output { flex-direction: column; align-items: center; justify-content: center; border-color: var(--np-red); background: var(--np-red); color: white; font-family: "Anton", Impact, sans-serif; font-size: 22px; line-height: 1.06; text-transform: uppercase; }

.np-maw .np-package-strip { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); margin-top: 0; }
.np-maw .np-package-strip > * { min-height: 82px; padding: 22px; border-top: 1px solid rgb(20 38 45 / 32%); border-right: 1px solid rgb(20 38 45 / 32%); }
.np-maw .np-package-strip > p { display: flex; align-items: center; padding-left: 0; font-size: 14px; font-weight: 600; }
.np-maw .np-package-strip .np-small-number { color: var(--np-red); font-family: "Anton", Impact, sans-serif; font-size: 19px; }
.np-maw .np-package-strip strong { font-size: 14px; }

.np-maw .np-section { max-width: 1180px; margin: 0 auto; padding: 92px 28px; }
.np-maw .np-section-heading { max-width: 820px; margin-bottom: 42px; }
.np-maw .np-section-heading > p:last-child { margin-top: 17px; font-size: 16px; line-height: 1.6; }

.np-maw .np-problem-section { max-width: none; padding-inline: max(28px, calc((100vw - 1124px) / 2)); background: var(--np-deep); color: white; }
.np-maw .np-problem-section .np-eyebrow { color: white; }
.np-maw .np-problem-section .np-section-heading > p:last-child { color: #e6ecee; }
.np-maw .np-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / 30%); }
.np-maw .np-problem-card { min-height: 170px; padding: 29px; background: white; color: var(--np-ink); }
.np-maw .np-problem-card:nth-child(3), .np-maw .np-problem-card:nth-child(4) { background: #d9ddde; }
.np-maw .np-card-label { color: var(--np-red); font-family: "Anton", Impact, sans-serif; font-size: 22px; }
.np-maw .np-problem-card > p:last-child { margin-top: 15px; font-weight: 600; }

.np-maw .np-outcome-section { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 80px; }
.np-maw .np-outcome-list { border-top: 1px solid var(--np-line); }
.np-maw .np-list-row { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 21px 0; border-bottom: 1px solid var(--np-line); }
.np-maw .np-list-number, .np-maw .np-card-number { color: var(--np-red); font-family: "Anton", Impact, sans-serif; font-size: 23px; line-height: 1; }
.np-maw .np-list-row strong { font-size: 19px; }
.np-maw .np-list-row div p:last-child { color: var(--np-muted); }
.np-maw .np-review-note { grid-column: 2; margin-top: 28px; padding: 24px 26px; border-left: 3px solid var(--np-red); background: var(--np-blue); }
.np-maw .np-review-note p + p { margin-top: 7px; color: var(--np-muted); font-size: 14px; }

.np-maw .np-package-section { max-width: none; padding-inline: max(28px, calc((100vw - 1124px) / 2)); background: var(--np-blue); }
.np-maw .np-package-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.np-maw .np-package-card { min-height: 240px; padding: 30px; border: 1px solid rgb(20 38 45 / 38%); background: white; }
.np-maw .np-package-card .np-card-number { margin-bottom: 36px; font-size: 25px; }
.np-maw .np-package-card p:last-child { margin-top: 14px; color: var(--np-muted); font-size: 15px; }
.np-maw .np-text-link { margin-top: 30px; color: var(--np-red); font-size: 14px; font-weight: 700; text-transform: uppercase; }

.np-maw .np-process-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: end; margin-bottom: 54px; }
.np-maw .np-editorial-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.np-maw .np-editorial-photo figcaption { margin-top: 10px; color: var(--np-muted); font-size: 10px; }
.np-maw .np-module-list { border-top: 1px solid var(--np-line); }
.np-maw .np-module { display: grid; grid-template-columns: 80px 1fr; gap: 28px; padding: 27px 0; border-bottom: 1px solid var(--np-line); }
.np-maw .np-module > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 38px; }
.np-maw .np-module p:last-child { color: var(--np-muted); font-size: 15px; }
.np-maw .np-memory-note { max-width: 880px; margin: 42px 0 0 auto; padding: 28px 30px; background: var(--np-deep); color: white; font-size: 17px; font-weight: 600; }

.np-maw .np-agency-section { padding: 100px max(28px, calc((100vw - 1124px) / 2)); background: var(--np-deep); color: white; }
.np-maw .np-agency-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 84px; align-items: center; max-width: 1124px; margin: 0 auto; }
.np-maw .np-eyebrow-light { color: white; }
.np-maw .np-agency-lede { margin-top: 24px; color: #e6ecee; }
.np-maw .wp-block-quote { margin: 38px 0 0; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / 20%); font-size: 18px; font-weight: 600; }
.np-maw .wp-block-quote cite { display: block; margin-top: 16px; color: #c9d9de; font-size: 11px; font-style: normal; }
.np-maw .np-dark-photo img { max-height: 500px; }
.np-maw .np-dark-photo figcaption { color: #c9d9de; }

.np-maw .np-fit-section { max-width: none; padding-inline: max(28px, calc((100vw - 1124px) / 2)); background: var(--np-blue); }
.np-maw .np-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-maw .np-fit-card { padding: 31px; border: 1px solid rgb(20 38 45 / 38%); background: white; }
.np-maw .np-fit-card h3 { margin-bottom: 22px; }
.np-maw .np-fit-card ul { margin: 0; padding-left: 21px; color: var(--np-muted); }
.np-maw .np-fit-card li + li { margin-top: 13px; }
.np-maw .np-not-for-card { background: rgb(255 255 255 / 46%); }
.np-maw .np-requirements { margin-top: 24px; padding: 24px 28px; border-left: 4px solid var(--np-red); background: white; color: var(--np-muted); font-size: 14px; }

.np-maw .np-request-section { padding: 100px max(28px, calc((100vw - 1124px) / 2)); background: var(--np-deep); color: white; }
.np-maw .np-request-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; max-width: 1124px; margin: 0 auto; }
.np-maw .np-request-grid > div:first-child > p:last-child { margin-top: 24px; color: #e6ecee; }
.np-maw .np-form-panel { padding: 34px; background: white; color: var(--np-ink); }
.np-maw .np-form-setup, .np-maw .np-form-fallback { padding: 20px; border: 1px solid var(--np-line); background: #f6f7f7; color: var(--np-ink); }
.np-maw .np-form-setup code { overflow-wrap: anywhere; }
.np-maw .wpcf7-form { display: grid; gap: 18px; }
.np-maw .np-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-maw .wpcf7-form p { margin: 0; }
.np-maw .wpcf7-form label { display: grid; gap: 7px; color: var(--np-ink); font-size: 13px; font-weight: 700; }
.np-maw .wpcf7-form input[type="text"], .np-maw .wpcf7-form input[type="email"] { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #cfd4d7; border-radius: 0; background: white; color: var(--np-ink); font: inherit; }
.np-maw .wpcf7-form input[type="submit"] { width: 100%; min-height: 50px; border: 0; border-radius: 0; background: var(--np-red); color: white; cursor: pointer; font-weight: 700; text-transform: uppercase; }
.np-maw .wpcf7-acceptance label { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 9px; color: var(--np-muted); font-weight: 400; }
.np-maw .wpcf7-not-valid-tip { font-size: 12px; }
.np-maw .wpcf7 form.sent .wpcf7-response-output,
.np-maw .wpcf7 form.failed .wpcf7-response-output,
.np-maw .wpcf7 form.aborted .wpcf7-response-output,
.np-maw .wpcf7 form.spam .wpcf7-response-output,
.np-maw .wpcf7 form.invalid .wpcf7-response-output,
.np-maw .wpcf7 form.unaccepted .wpcf7-response-output,
.np-maw .wpcf7 form.payment-required .wpcf7-response-output {
  display: block !important;
  margin: 0;
  padding: 13px 15px;
  border: 0;
  border-left: 4px solid var(--np-red);
  background: var(--np-blue);
  color: var(--np-ink);
  font-size: 14px;
  line-height: 1.45;
}
.np-maw .wpcf7 form.sent .wpcf7-response-output { border-left-color: #287a70; }

.np-maw .np-faq-section { max-width: 860px; }
.np-maw .wp-block-details { border-top: 1px solid var(--np-line); }
.np-maw .wp-block-details:last-child { border-bottom: 1px solid var(--np-line); }
.np-maw .wp-block-details summary { padding: 23px 0; cursor: pointer; font-size: 18px; font-weight: 700; }
.np-maw .wp-block-details > p { padding: 0 45px 24px 0; color: var(--np-muted); }

.np-maw .np-irina-section { max-width: none; padding-inline: max(28px, calc((100vw - 920px) / 2)); background: var(--np-blue); }
.np-maw .np-contact-card { display: grid; grid-template-columns: 280px 1fr; gap: 45px; align-items: center; max-width: 920px; margin: 0 auto; padding: 32px; border: 1px solid rgb(20 38 45 / 38%); background: white; }
.np-maw .np-irina-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center; }
.np-maw .np-contact-card h3 { font-family: "Anton", Impact, sans-serif; font-size: 32px; font-weight: 400; text-transform: uppercase; }
.np-maw .np-role { margin: 8px 0 18px; color: var(--np-red); font-size: 11px; font-weight: 700; }
.np-maw .np-bio { color: var(--np-muted); font-size: 15px; }
.np-maw .np-bio + .np-bio { margin-top: 14px; }
.np-maw .np-bio-origin { color: var(--np-ink); font-weight: 600; }
.np-maw .np-secondary-button { margin-top: 22px; }

@media (max-width: 1100px) {
  .np-maw .np-hero-intro { grid-template-columns: 1fr; }
  .np-maw .np-campaign-graphic { max-width: 560px; justify-self: center; }
}

@media (max-width: 1000px) {
  .np-maw .np-workflow { padding: 38px 26px; }
  .np-maw .np-flow { grid-template-columns: minmax(82px, .68fr) repeat(4, minmax(88px, 1fr)) minmax(124px, 1.2fr) minmax(174px, 1.6fr); gap: 12px; }
  .np-maw .np-flow-node { min-height: 142px; padding: 17px 12px; }
  .np-maw .np-flow-node:not(.np-flow-output)::after { right: -12px; width: 10px; height: 13px; }
  .np-maw .np-flow-step p:last-child { font-size: 11px; }
  .np-maw .np-flow-output { font-size: 19px; }
}

@media (max-width: 860px) {
  .np-maw .np-package-strip { grid-template-columns: 1fr; }
  .np-maw .np-package-strip > * { min-height: auto; padding-left: 0; border-right: 0; }
  .np-maw .np-outcome-section, .np-maw .np-process-intro, .np-maw .np-agency-grid, .np-maw .np-request-grid { grid-template-columns: 1fr; gap: 42px; }
  .np-maw .np-review-note { grid-column: 1; }
  .np-maw .np-package-cards { grid-template-columns: 1fr; }
  .np-maw .np-package-card { min-height: auto; }
  .np-maw .np-module > div { grid-template-columns: 1fr; gap: 12px; }
  .np-maw .np-dark-photo img { max-height: none; }
}

@media (max-width: 760px) {
  .np-maw .np-workflow { padding: 28px 20px; }
  .np-maw .np-flow { grid-template-columns: 1fr; gap: 13px; }
  .np-maw .np-flow::before { top: 4%; right: auto; bottom: 4%; left: 50%; width: 4px; height: auto; transform: translateX(-50%); }
  .np-maw .np-flow-node { min-height: 0; padding: 16px 18px; }
  .np-maw .np-flow-node:not(.np-flow-output)::after { top: auto; right: auto; bottom: -13px; left: 50%; width: 15px; height: 11px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .np-maw .np-flow-input { min-height: 58px; }
  .np-maw .np-flow-step { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
  .np-maw .np-flow-step .np-number { flex: 0 0 44px; font-size: 35px; }
  .np-maw .np-flow-step p:last-child { font-size: 13px; }
  .np-maw .np-flow-output { min-height: 86px; text-align: center; font-size: 24px; }
}

@media (max-width: 560px) {
  .np-maw h1 { font-size: 34px; }
  .np-maw h2 { font-size: 32px; }
  .np-maw .np-hero-inner { padding: 48px 20px 30px; }
  .wp-theme-newplay .np-maw .np-hero-inner { padding-top: 112px; }
  .np-maw .np-actions .wp-block-button, .np-maw .np-actions .wp-block-button__link { width: 100%; }
  .np-maw .np-section, .np-maw .np-problem-section, .np-maw .np-package-section, .np-maw .np-agency-section, .np-maw .np-fit-section, .np-maw .np-request-section, .np-maw .np-irina-section { padding: 72px 20px; }
  .np-maw .np-problem-grid, .np-maw .np-fit-grid, .np-maw .np-contact-card, .np-maw .np-form-row { grid-template-columns: 1fr; }
  .np-maw .np-module { grid-template-columns: 42px 1fr; gap: 12px; }
  .np-maw .np-form-panel { padding: 25px 20px; }
  .np-maw .np-contact-card { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-maw * { scroll-behavior: auto !important; }
}

/* Gutenberg uses a much narrower canvas than the published page. This editor-only
 * layout keeps every block readable without changing the real front-end design. */
.editor-styles-wrapper .np-maw { max-width: none !important; width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; }
.editor-styles-wrapper .np-maw .np-hero-inner { padding: 38px 24px 30px; }
.editor-styles-wrapper .np-maw .np-hero-intro,
.editor-styles-wrapper .np-maw .np-outcome-section,
.editor-styles-wrapper .np-maw .np-process-intro,
.editor-styles-wrapper .np-maw .np-agency-grid,
.editor-styles-wrapper .np-maw .np-request-grid,
.editor-styles-wrapper .np-maw .np-contact-card { grid-template-columns: 1fr; gap: 32px; }
.editor-styles-wrapper .np-maw .np-campaign-graphic { max-width: 460px; justify-self: center; }
.editor-styles-wrapper .np-maw .np-workflow { padding: 26px 20px; }
.editor-styles-wrapper .np-maw .np-flow { grid-template-columns: 1fr; gap: 12px; }
.editor-styles-wrapper .np-maw .np-flow::before { display: none; }
.editor-styles-wrapper .np-maw .np-flow-node { min-height: 68px; }
.editor-styles-wrapper .np-maw .np-flow-node:not(.np-flow-output)::after { display: none; }
.editor-styles-wrapper .np-maw .np-flow-step { flex-direction: row; align-items: center; justify-content: flex-start; }
.editor-styles-wrapper .np-maw .np-flow-step .np-number { flex: 0 0 48px; }
.editor-styles-wrapper .np-maw .np-package-strip,
.editor-styles-wrapper .np-maw .np-package-cards,
.editor-styles-wrapper .np-maw .np-problem-grid,
.editor-styles-wrapper .np-maw .np-fit-grid { grid-template-columns: 1fr; }
.editor-styles-wrapper .np-maw .np-review-note { grid-column: 1; }
.editor-styles-wrapper .np-maw .np-section,
.editor-styles-wrapper .np-maw .np-problem-section,
.editor-styles-wrapper .np-maw .np-package-section,
.editor-styles-wrapper .np-maw .np-agency-section,
.editor-styles-wrapper .np-maw .np-fit-section,
.editor-styles-wrapper .np-maw .np-request-section,
.editor-styles-wrapper .np-maw .np-irina-section { padding: 56px 24px; }