/*
Theme Name: Pitch Midnight
Theme URI: https://pitchmidnight.com/
Author: Pitch Midnight LLC
Author URI: https://pitchmidnight.com/
Description: Child theme of Twenty Twenty-Five for pitchmidnight.com. Carries the
locked Pitch Midnight palette and type scale as theme.json presets so every later
page inherits them, and ships the v1 home page as a block template.
Template: twentytwentyfive
Version: 1.3.3
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pitchmidnight
*/

/* ==========================================================================
   Pitch Midnight - v1 home page
   Ported from branding-assets/pitchmidnight-home-mockup.html.
   Palette is locked: see branding.md and branding-assets/icons/USAGE.md.
   The same four values are declared as theme.json presets; these custom
   properties exist so the section CSS below reads the way the mockup did.
   ========================================================================== */

:root {
  /* Locked palette */
  --tile:       #232544;
  --peak-near:  #8F80F0;
  --peak-far:   #B0A5FB;
  --moon:       #F2C14E;

  /* Derived page scale */
  --bg:         #14162b;
  --bg-2:       #1a1c35;
  --surface:    #232544;
  --surface-2:  #2b2d54;
  --line:       #34376a;
  --text:       #e9eaf6;
  --muted:      #a3a6ca;
  --dim:        #7e82ab;

  --measure: 60ch;
  --pad: clamp(20px, 5vw, 40px);
  --gap: clamp(56px, 9vw, 104px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--peak-far); }

/* --------------------------------------------------------------------------
   Block layout spacing.

   WordPress emits `:root :where(.is-layout-flow) > * { margin-block-start:
   <blockGap> }` at specificity (0,1,0) - the same as a single class. Any
   attempt to neutralise that with a more specific selector also out-specifies
   the deliberate margins below, which silently flattens the page's vertical
   rhythm.

   So the gap is switched off at the source instead: theme.json sets blockGap
   to 0 and every margin on this page is stated explicitly here, exactly as the
   mockup did. Do not reintroduce a blanket margin reset - it will fight these
   rules and win.
   -------------------------------------------------------------------------- */

.pm .wp-block-group { min-width: 0; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.narrow { max-width: var(--measure); }

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 620;
}

/* Element selector on purpose. A class-scoped `.pm p` would out-specify the
   single-class margin rules further down (.kicker, .form-note) and silently
   drop them - which is exactly the bug this line replaced. */
p { margin: 0; }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moon);
  font-weight: 600;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(20, 22, 43, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  row-gap: 10px;
  padding-block: 18px;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.site-nav a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--text); border-bottom-color: var(--peak-near); }

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.lockup svg { display: block; width: 52px; height: auto; flex: none; }

.wordmark {
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.wordmark span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  line-height: 1.4;
}

.site-header .contact-link {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-header .contact-link:hover {
  color: var(--text);
  border-bottom-color: var(--peak-near);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 12vw, 132px) clamp(52px, 9vw, 96px);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 40% 20% -20%;
  background: radial-gradient(circle at 30% 40%,
              rgba(143, 128, 240, 0.20), transparent 62%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: -30% -25% 30% 45%;
  background: radial-gradient(circle at 60% 45%,
              rgba(242, 193, 78, 0.11), transparent 60%);
  pointer-events: none;
}

.hero .wrap { position: relative; }

.hero h1 {
  font-size: clamp(34px, 6.2vw, 62px);
  max-width: 19ch;
  margin-block: 22px 24px;
  font-weight: 660;
}

.hero h1 em {
  font-style: normal;
  color: var(--moon);
}

.hero .sub {
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.55;
}

.hero .sub strong { color: var(--text); font-weight: 600; }

/* ---------- Continuity strip ---------- */

.strip {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding-block: 26px;
}

.strip .row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
}

.strip .lead {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 600;
}

.strip .lead b { color: var(--peak-far); font-weight: 600; }

.strip .tail { color: var(--muted); font-size: 16px; }

/* ---------- Sections ---------- */

.band { padding-block: var(--gap); }

.band + .band { border-top: 1px solid var(--line); }

.band h2 {
  font-size: clamp(26px, 4vw, 38px);
  max-width: 22ch;
  margin-block: 16px 0;
}

.band .intro {
  color: var(--muted);
  margin-top: 18px;
  font-size: 18px;
}

/* ---------- Four questions ---------- */

.questions {
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.questions > * {
  background: var(--surface);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.questions .n {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--moon);
}

.questions p { font-size: 16.5px; line-height: 1.5; }

.kicker {
  margin-top: 34px;
  font-size: 18px;
  color: var(--text);
  max-width: 58ch;
}

.kicker b { color: var(--moon); font-weight: 600; }

/* ---------- Proof table ---------- */

.proof {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.proof-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
}

.proof-head .t { font-weight: 600; font-size: 16px; }

.proof-head .note {
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.scroller { overflow-x: auto; }

.proof table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.proof th,
.proof td {
  text-align: right;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.proof th:first-child,
.proof td:first-child { text-align: left; }

.proof thead th {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  background: var(--bg-2);
}

.proof thead th.est { color: var(--dim); }
.proof thead th.act { color: var(--moon); }

.proof tbody td.est { color: var(--muted); }
.proof tbody td.act { color: var(--moon); font-weight: 600; }

.proof tbody tr:last-child td { border-bottom: 0; }

.neg { color: #ff8f8f; font-weight: 600; }
.pos { color: #7fd6a8; font-weight: 600; }

.proof-foot {
  padding: 18px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
}

.proof-foot b { color: var(--text); font-weight: 600; }

/* ---------- Differentiators ---------- */

.cards {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card .icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.card h3 { font-size: 19px; }

.card p { color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ---------- Product page: tier comparison ---------- */
/* Two side-by-side scope boxes - "what's in Tier A" vs "what's in Tier B".
   Never a price: see the note in patterns/product.php. The right-hand box
   (.tier.paid) gets the accent border regardless of whether it names a paid
   tier or just a "pairs with" cross-sell - it is the box meant to draw the eye. */

.tiers {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}

.tier.paid { border-color: var(--peak-near); }

.tier-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.tier.paid .tier-label { color: var(--moon); }

.tier h3 { margin-block: 10px 16px; font-size: 20px; }

.tier ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tier li {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--peak-far);
}

/* ---------- Status / contact ---------- */

.status .box {
  margin-top: 40px;
  background: linear-gradient(150deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(30px, 5vw, 48px);
}

.status .box h2 { margin-block: 14px 20px; }

.status .box p { color: var(--muted); font-size: 17.5px; max-width: 58ch; }

.status .box p + p { margin-top: 16px; }

.btn {
  display: inline-block;
  background: var(--peak-near);
  color: #16172c;
  font-weight: 650;
  font-size: 16px;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 9px;
  border: 1px solid var(--peak-near);
}

.btn:hover { background: var(--peak-far); border-color: var(--peak-far); }

/* Second, lower-emphasis CTA sitting next to a .btn - e.g. Net Profit's
   "Start free" beside its paid "Get Net Profit". Transparent fill so the
   filled .btn still reads as the primary action; border-only, no gold. */
.btn.is-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn.is-secondary:hover { border-color: var(--peak-far); color: var(--peak-far); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.form-note {
  font-size: 14.5px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 52ch;
  margin-top: 18px;
}

.form-note b { color: var(--muted); font-weight: 600; }

/* Product-page CTA microcopy - the tenure line under a "Get <plugin>" button
   in .status .box, the same slot .form-note fills under the contact form's
   submit button. Sized like .eyebrow (13px caption class) but with every
   loud trait it has - uppercase, letter-spacing, bold, the gold accent -
   dropped in favor of .form-note's quiet muted treatment. Added 2026-08-16
   for the className the 2026-08-15 product-page copy pass introduced;
   see pitch-midnight/15-product-pages.md's Open list. */
.tenure {
  margin-top: 18px;
  color: var(--dim);
  font-size: 13.5px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Gravity Forms

   The form is built in the Gravity UI, so this styles Gravity's own markup to
   match the mockup rather than restating the mockup's fields. Gravity's theme
   stylesheet is dequeued in functions.php (see PM_DEQUEUE_GF_CSS) so these
   rules are not fighting it.

   NOT VISUALLY VERIFIED. Gravity Forms is commercial and could not be
   installed in the local test environment, so unlike the rest of this file
   these rules were written to Gravity 2.10 markup rather than checked against
   a render. Expect one pass of adjustment after the form exists.
   -------------------------------------------------------------------------- */

.gform_wrapper { margin-top: 32px; max-width: 560px; }

.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
}

/* Name and email ride together on one row; everything else spans. */
.gform_wrapper .gfield.pm-half { grid-column: span 1; }

.gform_wrapper .gfield_label {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0;
}

.gform_wrapper .gfield_required { color: var(--moon); }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper select,
.gform_wrapper textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 14px;
  width: 100%;
}

.gform_wrapper textarea { min-height: 130px; resize: vertical; }

.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none" stroke="%23a3a6ca" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1.8 L6 6.2 L11 1.8"/></svg>');
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: 2px solid var(--peak-near);
  outline-offset: 1px;
  border-color: var(--peak-near);
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: #6a6e96; }

.gform_wrapper .gform_footer {
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
}

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button {
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  padding: 13px 28px;
  background: var(--peak-near);
  color: #16172c;
  border: 1px solid var(--peak-near);
  border-radius: 9px;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: var(--peak-far);
  border-color: var(--peak-far);
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
  font-size: 14.5px;
  color: var(--muted);
}

.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors { color: #ff8f8f; }

.gform_confirmation_message {
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 17px;
  max-width: 560px;
}

/* Shown to logged-in admins only, when the form is not embeddable yet. */
.pm-form-missing {
  margin-top: 32px;
  padding: 18px 22px;
  border: 1px dashed var(--moon);
  border-radius: 12px;
  color: var(--moon);
  font-size: 15px;
  max-width: 560px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 42px 56px;
  color: var(--dim);
  font-size: 14.5px;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 28px;
  align-items: center;
}

.foot-row svg { width: 30px; height: auto; display: block; opacity: 0.85; }

.foot-left { display: flex; align-items: center; gap: 12px; }

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ---------- Ordinary content pages (privacy policy, and whatever follows) --- */

.pm-content {
  padding-block: var(--gap);
}

.pm-content h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin-bottom: 28px;
}

.pm-content h2 {
  font-size: clamp(21px, 3vw, 26px);
  margin-top: 40px;
  margin-bottom: 12px;
}

.pm-content h3 {
  font-size: 18px;
  margin-top: 28px;
  margin-bottom: 8px;
}

.pm-content p,
.pm-content li {
  color: var(--muted);
  max-width: var(--measure);
}

.pm-content p { margin-bottom: 16px; }

.pm-content ul,
.pm-content ol { padding-left: 22px; margin-bottom: 16px; }

.pm-content li { margin-bottom: 6px; }

/* ---------- Accessibility ---------- */

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--peak-near);
  outline-offset: 2px;
}

.skip-link:focus {
  background: var(--surface);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Narrow ---------- */

@media (max-width: 700px) {
  body { font-size: 16px; }
  .questions { grid-template-columns: 1fr; }
  .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
  .gform_wrapper .gfield.pm-half { grid-column: 1 / -1; }
}