/* ─────────────────────────────────────────────────────────────────
   WORLD TOUR PRO — site-wide look for worldtourpro.com
   Paste this into: Appearance → Customize → Additional CSS,
   below the User Manual styles (docs/user-manual-wordpress.css).

   Matches the app's palette (contexts/ThemeContext.tsx):
   navy header and footer, light pages, blue actions, tour gold accent.
   Uses only standard WordPress block classes, so it works with any
   block theme. Colours a block was given in the editor still win;
   clear them there if something stays the old colour.
   ───────────────────────────────────────────────────────────────── */

:root {
  --wtp-navy:        #0e1220;
  --wtp-navy-card:   #161b2e;
  --wtp-navy-raised: #1f2640;
  --wtp-page:        #f4f5f9;
  --wtp-card:        #ffffff;
  --wtp-line:        #d5d9e5;
  --wtp-line-dark:   #2a3150;
  --wtp-text:        #121626;
  --wtp-text-2:      #565e78;
  --wtp-on-navy:     #f2f4fa;
  --wtp-on-navy-2:   #a3aac2;
  --wtp-blue:        #0a64cc;
  --wtp-blue-hover:  #0852a8;
  --wtp-blue-light:  #5aa8ff; /* links on navy */
  --wtp-gold:        #e8c14a;
}

/* ─── PAGE ───
   Text, heading and link colours come from Styles → Colors, so sections
   that set their own colours (dark hero bands, coloured groups) keep them. */
body {
  background: var(--wtp-page);
}
/* The theme's own heading colour is a pale tint meant for a dark page.
   Headings on the light page go dark; ones inside a coloured section,
   the header or the footer keep their colour. */
.wp-block-heading:not(header *, footer *, .has-background *, .wp-block-cover *),
.wp-block-post-title:not(header *, footer *, .has-background *) {
  color: var(--wtp-text) !important;
}

/* ─── HEADER: navy bar with a gold rule, like the app ─── */
header.wp-block-template-part {
  background: var(--wtp-navy);
  border-bottom: 3px solid var(--wtp-gold);
}
header.wp-block-template-part > .has-background {
  background: transparent !important; /* let the navy bar show through the theme's own header colour */
}
header.wp-block-template-part,
header.wp-block-template-part p,
header.wp-block-template-part h1,
header.wp-block-template-part .wp-block-site-title a,
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation-item__content {
  color: var(--wtp-on-navy) !important;
}
header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .current-menu-item > a {
  color: var(--wtp-gold) !important;
}
/* Phone menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wtp-navy) !important;
  color: var(--wtp-on-navy) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wtp-on-navy); }

/* ─── BUTTONS ─── */
.wp-block-button__link,
.wp-element-button {
  background: var(--wtp-blue);
  color: #ffffff;
  border-radius: 10px;
  font-weight: 600;
  padding: 0.8em 1.5em;
  transition: background 0.15s;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--wtp-blue-hover);
  color: #ffffff;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wtp-blue);
  border: 2px solid var(--wtp-blue);
}

/* ─── CARDS, IMAGES, SEPARATORS ─── */
/* Coloured sections: the theme's purple becomes the app's navy. Bands
   that run edge to edge stay square; cards get rounded corners and a
   faint border so they read like the app's cards. */
:is(.wp-block-group, .wp-block-column, .wp-block-columns).has-background:not(header *, footer *) {
  background-color: var(--wtp-navy-card) !important;
}
:is(.wp-block-group, .wp-block-column).has-background:not(header *, footer *) {
  border-radius: 20px;
  border: 1px solid var(--wtp-line-dark);
}
/* Text inside navy sections is light, whatever colour it had before
   (some of these sections used to be light with dark text). */
:is(.wp-block-group, .wp-block-column, .wp-block-columns).has-background:not(header *, footer *)
  :is(h1, h2, h3, h4, h5, h6, .wp-block-heading, strong) {
  color: var(--wtp-on-navy) !important;
}
:is(.wp-block-group, .wp-block-column, .wp-block-columns).has-background:not(header *, footer *)
  :is(p, li, span:not(.wp-block-button__link *)) {
  color: var(--wtp-on-navy-2) !important;
}
:is(.wp-block-group, .wp-block-column, .wp-block-columns).has-background:not(header *, footer *)
  a:not(.wp-block-button__link, .wp-element-button) {
  color: var(--wtp-blue-light) !important;
}
.alignfull.has-background {
  border-radius: 0;
  border: none;
  background-color: var(--wtp-navy) !important;
}

/* One heading font everywhere, like the app (some headings used a slab serif). */
.wp-block-heading,
.wp-block-post-title {
  font-family: var(--wp--preset--font-family--roboto, Roboto, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: -0.01em;
}
/* Screenshots have a dark frame: a deep radius and a soft shadow make it
   read as a card sitting on the page. */
.wp-block-image img {
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(14, 18, 32, 0.22), 0 2px 6px rgba(14, 18, 32, 0.12);
}
.wp-block-site-logo img,
header .wp-block-image img,
footer .wp-block-image img {
  border-radius: 0;
  box-shadow: none;
}
.wp-block-separator {
  border-color: var(--wtp-line);
  opacity: 1;
}
.wp-block-quote {
  border-left-color: var(--wtp-gold);
}

/* ─── BLOG / RELEASE NOTES ─── */
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author {
  color: var(--wtp-text-2);
}
.wp-block-post-terms a {
  color: var(--wtp-blue);
}

/* ─── FOOTER: navy, matching the header ─── */
footer.wp-block-template-part {
  background: var(--wtp-navy);
  border-top: 3px solid var(--wtp-gold);
}
footer.wp-block-template-part > .has-background {
  background: transparent !important;
}
footer.wp-block-template-part,
footer.wp-block-template-part p {
  color: var(--wtp-on-navy-2) !important;
}
footer.wp-block-template-part a { color: var(--wtp-on-navy) !important; }
footer.wp-block-template-part a:hover { color: var(--wtp-gold) !important; }
footer.wp-block-template-part .wp-block-social-links .wp-social-link {
  background: var(--wtp-navy-raised);
  color: var(--wtp-on-navy);
}

/* ─────────────────────────────────────────────────────────────────
   CREW PAGE (page ID 830): feature landing page
   The wtpc- classes are set on the page's blocks under
   Advanced → Additional CSS class(es). Everything here is scoped to
   that page; delete this whole block if the page is removed.
   ───────────────────────────────────────────────────────────────── */

/* The hero carries the page title, and the bands run header to footer. */
.page-id-830 .wp-site-blocks > main { display: none; }
.page-id-830 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-830 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-830 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }

.wtpc { margin-block-start: 0 !important; }
/* Side gutters for the full-width bands (the theme drops them on nested full-width groups). */
.wtpc.alignfull:not(.wp-block-cover) { padding-left: max(5vw, 20px); padding-right: max(5vw, 20px); }
.wtpc .wp-block-heading { text-wrap: balance; }
.wtpc p { text-wrap: pretty; }
.wtpc.wtpc--dark .wp-block-heading { color: #f2f4fa !important; }
.wtpc.wtpc--dark p,
.wtpc.wtpc--dark li { color: #a3aac2; }

/* Buttons */
.wtpc .wp-block-buttons { gap: 0.75rem; margin-top: 2rem; }
.wtpc .wp-block-button__link {
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.wtpc .wp-block-button__link:active { transform: translateY(1px); }
.wtpc .wp-block-button__link:focus-visible { outline: 2px solid #e8c14a; outline-offset: 3px; }
.wtpc .wtpc-btn-gold .wp-block-button__link:hover { background: #f2f4fa !important; color: #0e1220 !important; }
.wtpc .wtpc-btn-ghost .wp-block-button__link {
  background: transparent;
  color: #f2f4fa;
  border-color: rgba(242, 244, 250, 0.35);
}
.wtpc .wtpc-btn-ghost .wp-block-button__link:hover { background: transparent; border-color: #e8c14a; color: #e8c14a; }

/* App screenshots as phones */
.wtpc .wtpc-phone { margin: 0 auto; max-width: 300px; }
.wtpc .wtpc-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  border: 8px solid #1f2640;
  box-shadow: 0 0 0 1px #2a3150, 0 40px 80px rgba(14, 18, 32, 0.6);
}

/* ─── Hero ─── */
.wtpc--hero {
  overflow: hidden;
  background:
    radial-gradient(55% 80% at 90% 20%, rgba(10, 100, 204, 0.9) 0%, rgba(10, 100, 204, 0) 62%),
    radial-gradient(36% 55% at 0% 100%, rgba(232, 193, 74, 0.18) 0%, rgba(232, 193, 74, 0) 70%),
    #0e1220;
}
.wtpc--hero .wtpc-hero-copy { padding-bottom: clamp(3rem, 6vw, 5rem); }
.wtpc p.wtpc-eyebrow {
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8c14a;
  margin: 0 0 1.1rem;
}
.wtpc--hero p.wtpc-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 33rem;
  margin: 1.4rem 0 0;
}
.wtpc--hero .wtpc-phone {
  transform: rotate(4deg);
  transform-origin: 50% 0;
  margin-bottom: -150px;
}

/* ─── Intro and the three facts ─── */
.wtpc--intro p.wtpc-intro-body {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #565e78;
  max-width: 34rem;
  margin: 1.25rem 0 0;
}
.wtpc--intro .wtpc-stat {
  display: grid;
  grid-template-columns: 5.75rem 1fr;
  column-gap: 1.25rem;
  align-items: center;
  border-top: 1px solid #d5d9e5;
  padding: 1.1rem 0;
  margin: 0;
}
.wtpc--intro .wtpc-stat:last-child { border-bottom: 1px solid #d5d9e5; }
.wtpc--intro .wtpc-stat > * { margin: 0; }
.wtpc--intro p.wtpc-stat-num {
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #0a64cc;
}
.wtpc--intro p.wtpc-stat-label { font-size: 1.0625rem; line-height: 1.45; color: #565e78; }
.wtpc--intro p.wtpc-stat-label strong { color: #121626; }

/* ─── Bento ─── */
.wtpc--bento .wtpc-bento-title { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
.wtpc--bento .wp-block-columns { gap: 20px; margin-block: 0 20px; }
.wtpc--bento .wp-block-columns:last-child { margin-bottom: 0; }
.wtpc .wtpc-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  border-radius: 20px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.wtpc .wtpc-card > * { margin-block: 0; }
.wtpc .wtpc-card .wp-block-heading {
  font-size: clamp(1.4rem, 2.3vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 0 0.7rem;
}
.wtpc .wtpc-card p { font-size: 1.0625rem; line-height: 1.6; max-width: 34rem; }
.wtpc .wtpc-card--light { background: #ffffff; border: 1px solid #d5d9e5; }
.wtpc .wtpc-card--light p { color: #565e78; }
.wtpc .wtpc-card--gold { background: #e8c14a; }
.wtpc .wtpc-card--gold .wp-block-heading,
.wtpc .wtpc-card--gold p { color: #0e1220 !important; }
.wtpc .wtpc-card--navy { background: #0e1220; border: 1px solid #2a3150; }
.wtpc .wtpc-card--navy .wp-block-heading { color: #f2f4fa !important; }
.wtpc .wtpc-card--navy p { color: #a3aac2; }
.wtpc .wtpc-card--blue {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(90, 168, 255, 0.55) 0%, rgba(90, 168, 255, 0) 60%),
    #0a64cc;
}
.wtpc .wtpc-card--blue .wp-block-heading { color: #ffffff !important; }
.wtpc .wtpc-card--blue p { color: #f2f4fa; }
.wtpc .wtpc-card-shot { margin: 1.75rem 0 calc(-1 * clamp(1.5rem, 3vw, 2.5rem)); }
.wtpc .wtpc-card-shot img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 270px;
  object-fit: cover;
  object-position: top;
  border-radius: 26px 26px 0 0;
  border: 6px solid #0e1220;
  border-bottom: 0;
  box-shadow: 0 20px 50px rgba(14, 18, 32, 0.45);
}
@media (min-width: 782px) {
  .wtpc .wtpc-card--media {
    justify-content: center;
    min-height: 330px;
    padding-right: calc(240px + clamp(3rem, 6vw, 5rem));
  }
  .wtpc .wtpc-card--media .wtpc-card-shot {
    position: absolute;
    right: clamp(1.5rem, 3vw, 2.5rem);
    bottom: 0;
    margin: 0;
  }
}

/* ─── Photo banner ─── */
.wtpc--banner .wp-block-heading { color: #f2f4fa; }
.wtpc--banner .wtpc-banner-copy > * { max-width: 36rem; }
.wtpc--banner p {
  color: #f2f4fa;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 30rem;
  margin: 1.5rem 0 0;
}

/* ─── Roles ─── */
.wtpc--roles {
  background:
    radial-gradient(45% 70% at 12% 55%, rgba(10, 100, 204, 0.55) 0%, rgba(10, 100, 204, 0) 70%),
    #0e1220;
}
.wtpc--roles .wtpc-phone { transform: rotate(-3deg); }
.wtpc--roles p.wtpc-roles-intro { font-size: 1.125rem; line-height: 1.6; max-width: 34rem; margin: 1.1rem 0 2rem; }
.wtpc--roles .wtpc-role {
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  column-gap: 1.5rem;
  align-items: baseline;
  border-top: 1px solid #2a3150;
  padding: 1.1rem 0;
  margin: 0;
}
.wtpc--roles .wtpc-role > * { margin: 0; }
.wtpc.wtpc--roles .wtpc-role .wp-block-heading {
  color: #e8c14a !important;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0;
}
.wtpc--roles .wtpc-role p { font-size: 1.0625rem; line-height: 1.55; }

/* ─── Joining ─── */
.wtpc--join p.wtpc-join-body { font-size: 1.125rem; line-height: 1.65; color: #565e78; max-width: 26rem; margin: 1.1rem 0 0; }
.wtpc .wtpc-steps { list-style: none; counter-reset: wtpc-step; margin: 0; padding: 0; }
.wtpc .wtpc-steps li {
  counter-increment: wtpc-step;
  position: relative;
  border-top: 1px solid #d5d9e5;
  padding: 1.25rem 0 1.25rem 4.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #565e78;
}
.wtpc .wtpc-steps li:last-child { border-bottom: 1px solid #d5d9e5; }
.wtpc .wtpc-steps li::before {
  content: counter(wtpc-step);
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: #0e1220;
  color: #e8c14a;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 3rem;
  text-align: center;
}
.wtpc .wtpc-steps li strong {
  display: block;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: #121626;
  margin-bottom: 0.2rem;
}

/* ─── Closing band ─── */
.wtpc--cta { background: linear-gradient(105deg, #0a64cc 0%, #0852a8 55%, #0e1220 130%); }
.wtpc--cta .wtpc-cta-row { gap: 1.5rem 3rem; }
.wtpc--cta .wtpc-cta-copy > * { margin-block: 0; }
.wtpc.wtpc--cta p { color: #f2f4fa; font-size: 1.125rem; margin: 0.7rem 0 0; }
.wtpc--cta .wp-block-buttons { margin-top: 0; }

/* ─── Phones ─── */
@media (max-width: 781px) {
  .wtpc--hero .wtpc-hero-copy { padding-bottom: 0; }
  .wtpc--hero .wtpc-phone { max-width: 240px; }
  .wtpc--roles .wtpc-phone { max-width: 240px; }
}
@media (max-width: 600px) {
  .wtpc--roles .wtpc-role { grid-template-columns: 1fr; row-gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wtpc .wp-block-button__link { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   HOME PAGE (page ID 888)
   Builds on the shared wtpc- rules in the Crew page block above
   (buttons, cards, stats, photo banner, closing band), so keep that
   block if you keep this one. Classes prefixed wtph- are home only.
   ───────────────────────────────────────────────────────────────── */

.page-id-888 .wp-site-blocks > main { display: none; }
.page-id-888 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-888 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-888 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }

/* Framed device images: the bezel is in the PNG, so no radius or box shadow. */
.wtph .wtph-device { margin: 0; }
.wtph .wtph-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 28px 36px rgba(14, 18, 32, 0.45));
}

/* Devices cropped inside a card: a drop shadow would show as a box at the crop edge. */
.wtph .wtph-card-device img { filter: none; }

.wtph p.wtph-body { font-size: 1.125rem; line-height: 1.65; color: #565e78; max-width: 34rem; margin-top: 1.1rem; margin-bottom: 0; }
.wtph p.wtph-pricing-intro { max-width: 1180px; }

/* Tick lists */
.wtph .wtph-ticks { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.wtph .wtph-ticks li {
  position: relative;
  border-top: 1px solid #d5d9e5;
  padding: 0.7rem 0 0.7rem 2rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #121626;
}
.wtph .wtph-ticks li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.15rem;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid #0a64cc;
  border-bottom: 2px solid #0a64cc;
  transform: rotate(-45deg);
}

/* ─── Hero ─── */
.wtph--hero {
  overflow: hidden;
  background:
    radial-gradient(60% 85% at 88% 32%, rgba(10, 100, 204, 0.95) 0%, rgba(10, 100, 204, 0) 62%),
    radial-gradient(34% 50% at 0% 100%, rgba(232, 193, 74, 0.2) 0%, rgba(232, 193, 74, 0) 70%),
    #0e1220;
}
.wtph--hero .wtph-hero-copy { padding-bottom: clamp(3rem, 7vw, 6rem); }
.wtph--hero p.wtph-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width: 30rem;
  margin: 1.4rem 0 0;
}
.wtph .wtph-stage { position: relative; width: 122%; margin: 0 0 clamp(5rem, 9vw, 7.5rem); }
.wtph .wtph-stage > * { margin-block: 0; }
.wtph .wtph-stage .wtph-device--iphone {
  position: absolute;
  left: -8%;
  bottom: -17%;
  width: 24%;
  transform: rotate(-5deg);
  z-index: 2;
}
.wtph .wtph-stage .wtph-device--android {
  position: absolute;
  left: 18%;
  bottom: -26%;
  width: 22%;
  z-index: 1;
}

/* ─── Intro facts: wider numeral column for "5.0" ─── */
.wtph.wtpc--intro .wtpc-stat { grid-template-columns: 7.25rem 1fr; }

/* ─── Dates: two phones, offset ─── */
.wtph .wtph-pair { display: flex; justify-content: center; align-items: flex-start; max-width: 520px; margin-inline: auto; }
.wtph .wtph-pair > .wtph-device { flex: 0 0 50%; margin: 0; }
.wtph .wtph-pair > .wtph-device + .wtph-device { margin: 16% 0 0 -9%; }

/* ─── Show day: tablet overlaps the next section ─── */
.wtph--showday {
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(10, 100, 204, 0.75) 0%, rgba(10, 100, 204, 0) 70%),
    #0e1220;
}
.wtph--showday .wtph-showday-title { max-width: 16ch; text-align: center; }
.wtph--showday p.wtph-showday-body { font-size: 1.125rem; line-height: 1.65; max-width: 36rem; margin: 1.25rem auto 0; text-align: center; }
.wtph--showday .wtph-device--overlap {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: clamp(2.5rem, 5vw, 4rem) auto clamp(-170px, -12vw, -60px);
}
.wtph--bento { position: relative; padding-top: calc(clamp(60px, 12vw, 170px) + clamp(3.5rem, 7vw, 6rem)); }

/* ─── Bento cards with devices ─── */
.wtph .wtpc-card.wtph-card--tall { justify-content: flex-start; padding-bottom: 0; }
.wtph .wtph-card--tall .wtph-card-device { width: min(230px, 72%); height: 330px; overflow: hidden; margin: 2rem auto 0; }
.wtph .wtpc-card.wtph-card--wide { justify-content: flex-start; padding-bottom: 0; }
.wtph .wtph-card--wide .wtph-card-device { width: min(230px, 72%); height: 330px; overflow: hidden; margin: 2rem auto 0; }
.wtph .wtph-card--wide .wtph-card-device--tablet { width: 100%; height: auto; overflow: visible; margin: 2rem 0 -8%; }
@media (min-width: 782px) {
  .wtph .wtpc-card.wtph-card--wide { justify-content: center; min-height: 430px; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .wtph .wtph-card--wide > :not(.wtph-card-device) { max-width: 44%; }
  .wtph .wtph-card--wide .wtph-card-device { position: absolute; right: 9%; top: 3rem; width: 230px; height: auto; overflow: visible; margin: 0; }
  .wtph .wtph-card--wide .wtph-card-device--tablet { right: -18%; top: 50%; width: 74%; transform: translateY(-50%); margin: 0; }
}

/* Let more of the crowd photo through than the Crew banner does. */
.wtph.wtpc--banner .wp-block-cover__background { opacity: 0.8; }

/* ─── Pricing ─── */
.wtph--pricing .wtph-price-cols { gap: 20px; margin-top: clamp(2rem, 4vw, 3rem); }
.wtph .wtpc-card.wtph-price { justify-content: flex-start; padding: clamp(1.75rem, 3.5vw, 3rem); }
.wtph .wtpc-card.wtph-price .wp-block-heading {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  max-width: none;
  margin: 0 0 1rem;
}
.wtph .wtpc-card--navy.wtph-price .wp-block-heading { color: #e8c14a !important; }
.wtph .wtpc-card--light.wtph-price .wp-block-heading { color: #0a64cc !important; }
.wtph .wtph-price p.wtph-price-figure { font-size: 1.125rem; line-height: 1.3; margin: 0 0 0.5rem; max-width: none; }
.wtph .wtph-price p.wtph-price-figure strong {
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.wtph .wtpc-card--navy.wtph-price p.wtph-price-figure strong { color: #f2f4fa; }
.wtph .wtpc-card--light.wtph-price p.wtph-price-figure strong { color: #121626; }
.wtph .wtpc-card--navy .wtph-ticks li { border-top-color: #2a3150; color: #f2f4fa; }
.wtph .wtpc-card--navy .wtph-ticks li::before { border-color: #e8c14a; }
.wtph .wtph-price .wp-block-buttons { margin-top: 1.75rem; }

/* ─── Testimonials ─── */
.wtph--reviews {
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(10, 100, 204, 0.55) 0%, rgba(10, 100, 204, 0) 70%),
    #0e1220;
}
.wtph.wtph--reviews p.wtph-rating { color: #f2f4fa; font-size: 1.0625rem; margin: 0 0 1.1rem; }
.wtph.wtph--reviews p.wtph-rating::before { content: "\2605\2605\2605\2605\2605"; color: #e8c14a; letter-spacing: 0.15em; margin-right: 0.75rem; }
.wtph.wtph--reviews p.wtph-rating strong { color: #e8c14a; }
.wtph .wtph-quote {
  margin: 0;
  background: #161b2e;
  border: 1px solid #2a3150;
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  break-inside: avoid;
}
.wtph .wtph-quote::before { content: "\2605\2605\2605\2605\2605"; display: block; color: #e8c14a; letter-spacing: 0.15em; font-size: 0.95rem; margin-bottom: 0.8rem; }
.wtph.wtph--reviews .wtph-quote p { color: #f2f4fa; font-size: 1.125rem; line-height: 1.45; margin: 0; }
.wtph .wtph-quote cite { display: block; margin-top: 0.9rem; font-style: normal; font-size: 0.9375rem; color: #a3aac2; }
/* Swipeable row: scroll-snap, no script. The next card peeks in from the right. */
.wtph .wtph-quotes {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(-1 * max(5vw, 20px));
  padding: 4px max(5vw, 20px) 18px 0;
  scrollbar-width: thin;
  scrollbar-color: #2a3150 transparent;
}
.wtph .wtph-quotes::-webkit-scrollbar { height: 6px; }
.wtph .wtph-quotes::-webkit-scrollbar-track { background: transparent; }
.wtph .wtph-quotes::-webkit-scrollbar-thumb { background: #2a3150; border-radius: 3px; }
.wtph .wtph-quotes:hover::-webkit-scrollbar-thumb { background: #e8c14a; }
.wtph .wtph-quotes:focus-visible { outline: 2px solid #e8c14a; outline-offset: 4px; }
.wtph .wtph-quotes > .wtph-quote {
  flex: 0 0 min(360px, 82%);
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.wtph .wtph-quotes > .wtph-quote cite { margin-top: auto; padding-top: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .wtph .wtph-quotes { scroll-behavior: smooth; }
}
.wtph .wtph-quote.wtph-quote--lead {
  background: transparent;
  border: 0;
  border-left: 4px solid #e8c14a;
  border-radius: 0;
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.wtph.wtph--reviews .wtph-quote--lead p {
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.wtph.wtph--reviews p.wtph-fineprint { font-size: 0.875rem; margin: 0.5rem 0 0; }
.wtph--reviews .wp-block-buttons { margin-top: 1.5rem; }

/* ─── What's new ─── */
.wtph .wtph-news-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; }
.wtph .wtph-news-list li { background: #ffffff; border: 1px solid #d5d9e5; border-radius: 20px; padding: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.wtph .wtph-news-list a.wp-block-latest-posts__post-title {
  display: block;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  color: #121626;
  text-decoration: none;
}
.wtph .wtph-news-list a.wp-block-latest-posts__post-title:hover { color: #0a64cc; }
.wtph .wtph-news-list time { display: block; margin-top: 0.4rem; font-size: 0.875rem; color: #565e78; }
.wtph .wtph-news-list .wp-block-latest-posts__post-excerpt { margin: 0.8rem 0 0; font-size: 1rem; line-height: 1.6; color: #565e78; }

/* ─── Phones ─── */
@media (max-width: 781px) {
  .wtph--hero .wtph-hero-copy { padding-bottom: 0; }
  .wtph .wtph-stage { width: 100%; margin: 1.5rem 0 24vw; }
  .wtph .wtph-stage .wtph-device--iphone { left: -2%; }
}

/* ─────────────────────────────────────────────────────────────────
   FEATURES PAGE
   Builds on the shared wtpc- rules (Crew block) and the wtph- device,
   hero and tick-list rules (Home block), so keep both if you keep
   this one. Classes prefixed wtpf- are Features only.
   ───────────────────────────────────────────────────────────────── */

/*wtpf-page-rules*/
.page-id-118 .wp-site-blocks > main { display: none; }
.page-id-118 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-118 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-118 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }
/*end wtpf-page-rules*/

/* Section heads */
.wtpf .wtpf-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.wtpf .wtpf-head > * { margin-block: 0; }
.wtpf .wtpf-head > p { font-size: 1.125rem; line-height: 1.65; color: #565e78; max-width: 40rem; margin-top: 1.1rem; }
.wtpf.wtpc--dark .wtpf-head > p { color: #a3aac2; }

/* Feature name above a list that is not in a card */
.wtpf .wtpf-feature-name {
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0a64cc !important;
  margin: 1.5rem 0 0;
}

/* Tick lists on navy bands and coloured cards */
.wtph.wtpc--dark .wtph-ticks li { color: #f2f4fa; border-top-color: #2a3150; }
.wtph.wtpc--dark .wtph-ticks li::before { border-color: #e8c14a; }
.wtph .wtpc-card.wtpc-card--gold .wtph-ticks li { color: #0e1220; border-top-color: rgba(14, 18, 32, 0.22); }
.wtph .wtpc-card.wtpc-card--gold .wtph-ticks li::before { border-color: #0e1220; }
.wtph .wtpc-card.wtpc-card--blue .wtph-ticks li { color: #ffffff; border-top-color: rgba(255, 255, 255, 0.28); }
.wtph .wtpc-card.wtpc-card--blue .wtph-ticks li::before { border-color: #ffffff; }
@media (min-width: 700px) {
  .wtpf .wtpf-ticks--2col { columns: 2; column-gap: 2rem; }
  .wtpf .wtpf-ticks--2col li { break-inside: avoid; }
}

/* Row of phones with a name and a line each: a grid on desktop, a swipe row on phones */
.wtpf .wtpf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.wtpf .wtpf-row > * { margin: 0; }
.wtpf .wtpf-tab > * { margin-block: 0; }
.wtpf .wtpf-tab .wtph-device img { filter: none; }
.wtpf .wtpf-tab .wp-block-heading { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; margin: 1.1rem 0 0.35rem; }
.wtpf .wtpf-tab p { font-size: 0.9375rem; line-height: 1.5; color: #565e78; }
@media (max-width: 900px) {
  .wtpf .wtpf-row {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: #d5d9e5 transparent;
  }
  .wtpf .wtpf-row > .wtpf-tab { flex: 0 0 min(210px, 58%); scroll-snap-align: start; }
}

/* Feature cards */
.wtpf .wp-block-columns.wtpf-cols { gap: 20px; margin-block: 20px 0; }
.wtpf .wtpc-card.wtpf-card { justify-content: flex-start; min-height: 0; }
.wtpf .wtpf-card--raised { background: #161b2e; border: 1px solid #2a3150; }
.wtpf .wtpf-card .wp-block-heading { max-width: none; margin-bottom: 0.25rem; }
.wtpf .wtpf-card .wtph-ticks { margin-top: 1rem; }
.wtpf .wtpf-card .wtph-ticks li { font-size: 1rem; }
.wtpf .wtpf-stack { display: flex; flex-direction: column; gap: 20px; }
.wtpf .wtpf-stack > * { margin: 0; flex: 1 1 auto; }
.wtpf .wtpf-card-device img { filter: none; }
.wtpf .wtpf-card .wtpf-card-device {
  width: min(240px, 70%);
  height: 340px;
  overflow: hidden;
  margin: 2rem auto calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
}
.wtpf .wtpf-card .wtpf-card-device--tablet { width: 100%; height: auto; overflow: visible; margin: 2rem 0 0; }
.wtpf .wtpf-card--top .wtpf-card-device--tablet { margin: 0 0 1.75rem; }
@media (min-width: 782px) {
  .wtpf .wtpf-card--side > :not(.wtpf-card-device) { max-width: 52%; }
  .wtpf .wtpf-card--side .wtpf-card-device {
    position: absolute;
    right: 7%;
    top: 2.5rem;
    width: min(240px, 34%);
    height: auto;
    overflow: visible;
    margin: 0;
  }
  .wtpf .wtpf-card--side .wtpf-card-device--tablet { right: -14%; top: 50%; width: 60%; transform: translateY(-50%); }
}

/* Keep the hero phones clear of the longer intro line, and give tablet cards room. */
.wtpf.wtph--hero p.wtph-lede { max-width: 26rem; }
.wtpf.wtph--hero .wtph-stage .wtph-device--iphone { left: -3%; }
.wtpf.wtph--hero .wtph-stage .wtph-device--android { left: 22%; }
@media (min-width: 782px) {
  .wtpf .wtpc-card.wtpf-card--side:has(.wtpf-card-device--tablet) { min-height: 470px; justify-content: center; }
}

/* Navy bands, each lit from a different side */
.wtpf--day { background: radial-gradient(55% 60% at 100% 0%, rgba(10, 100, 204, 0.55) 0%, rgba(10, 100, 204, 0) 70%), #0e1220; }
.wtpf--travel { background: radial-gradient(60% 70% at 0% 100%, rgba(10, 100, 204, 0.6) 0%, rgba(10, 100, 204, 0) 70%), #0e1220; }
.wtpf--team { background: radial-gradient(50% 60% at 50% 0%, rgba(10, 100, 204, 0.5) 0%, rgba(10, 100, 204, 0) 70%), #0e1220; }

/* ─────────────────────────────────────────────────────────────────
   APP PAGE
   Builds on the shared wtpc-, wtph- and wtpf- rules above, so keep
   those blocks if you keep this one. Classes prefixed wtpa- are App only.
   ───────────────────────────────────────────────────────────────── */

.page-id-330 .wp-site-blocks > main { display: none; }
.page-id-330 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-330 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-330 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }

/* App icon as an iPhone home-screen tile. The PNG has an uneven transparent
   margin around a 1024px tile, so the tile is scaled and shifted to fill the
   rounded frame exactly. 22.37% is the iOS icon corner radius. */
.wtpa .wtpa-icon {
  --wtpa-tile: 112px;
  width: var(--wtpa-tile);
  height: var(--wtpa-tile);
  margin: 0 0 1.75rem;
  overflow: hidden;
  border-radius: 22.37%;
  box-shadow: 0 18px 40px rgba(14, 18, 32, 0.55), 0 0 0 1px rgba(242, 244, 250, 0.14);
}
.wtpa .wtpa-icon img {
  display: block;
  max-width: none;
  width: calc(var(--wtpa-tile) * 1125 / 1024);
  height: auto;
  margin: calc(var(--wtpa-tile) * -43 / 1024) 0 0 calc(var(--wtpa-tile) * -41 / 1024);
  border-radius: 0;
  box-shadow: none;
}

/* Store badges at one height. Google's PNG carries 41px of clear space on
   every side of a 564 x 168 badge, so it is cropped to the badge itself. */
.wtpa .wtpa-badges { --wtpa-badge: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 2rem; }
.wtpa .wtpa-badges > * { margin: 0; }
.wtpa .wtpa-badge a { display: block; border-radius: 9px; transition: transform 0.15s; }
.wtpa .wtpa-badge a:hover { transform: translateY(-2px); }
.wtpa .wtpa-badge a:focus-visible { outline: 2px solid #e8c14a; outline-offset: 3px; }
.wtpa .wtpa-badge img { display: block; max-width: none; border-radius: 0; box-shadow: none; }
.wtpa .wtpa-badge--apple img { height: var(--wtpa-badge); width: auto; }
.wtpa .wtpa-badge--google { height: var(--wtpa-badge); width: calc(var(--wtpa-badge) * 564 / 168); overflow: hidden; }
.wtpa .wtpa-badge--google img {
  height: calc(var(--wtpa-badge) * 250 / 168);
  width: auto;
  margin: calc(var(--wtpa-badge) * -41 / 168) 0 0 calc(var(--wtpa-badge) * -41 / 168);
}
.wtpa.wtpc--dark p.wtpa-web { font-size: 1rem; margin: 1.25rem 0 0; }
.wtpa p.wtpa-web a { color: #5aa8ff; }
.wtpa p.wtpa-web a:hover { color: #e8c14a; }

/* Two phones rising from the bottom edge of the hero */
.wtpa .wtpa-pair { max-width: 460px; margin-bottom: -110px; }

/* Getting started cards */
.wtpa .wtpa-step p { font-size: 1.0625rem; line-height: 1.65; max-width: 46rem; }
.wtpa .wtpa-step p + p { margin-top: 0.9rem; }
.wtpa .wtpc-card--navy.wtpa-step a { color: #5aa8ff; }
.wtpa .wtpc-card--gold.wtpa-step a { color: #0e1220; }
@media (max-width: 781px) {
  .wtpa .wtpa-pair { margin-bottom: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .wtpa .wtpa-badge a { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   WEB APP PAGE
   Builds on the shared wtpc-, wtph- and wtpa- rules above (the app
   icon tile comes from the App block). Classes prefixed wtpw- are
   Web App only.
   ───────────────────────────────────────────────────────────────── */

.page-id-505 .wp-site-blocks > main { display: none; }
.page-id-505 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-505 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-505 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }

.wtpw .wtpa-icon a { display: block; }
.wtpw .wtpa-icon a:focus-visible { outline: 2px solid #e8c14a; outline-offset: 3px; }
/* Laptop frame drawn in CSS around a browser screenshot. The clip trims the
   thin window edge and the rounded corners where the desktop showed through. */
.wtpw .wtpw-screen {
  position: relative;
  width: auto;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  padding: 2.7% 1.7% 2.2%;
  background: #08090c;
  border: 2px solid #4a4d57;
  border-bottom-width: 0;
  border-radius: clamp(8px, 1.5vw, 18px) clamp(8px, 1.5vw, 18px) 0 0;
  filter: drop-shadow(0 30px 40px rgba(14, 18, 32, 0.55));
}
.wtpw .wtpw-screen img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  clip-path: inset(0.1% 0.15% 0.3% 0.2% round 5px 5px 6px 6px);
  border-radius: 0;
  box-shadow: none;
  filter: none;
}
/* Camera, in the bezel above the screen */
.wtpw .wtpw-screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0.9%;
  left: 50%;
  width: 0.9%;
  height: 0;
  padding-top: 0.9%;
  transform: translateX(-50%);
  background: #23262f;
  border-radius: 50%;
}
/* Base, with the lid groove */
.wtpw .wtpw-screen::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -9.5%;
  right: -9.5%;
  height: 0;
  padding-top: 2.5%;
  background:
    linear-gradient(#565962, #565962) top center / 15% 34% no-repeat,
    linear-gradient(180deg, #dcdee4 0%, #aeb2bc 45%, #7d818c 100%);
  border-radius: 2px 2px clamp(8px, 1.4vw, 18px) clamp(8px, 1.4vw, 18px);
}
.wtpw .wtpw-notes { margin-top: 0; }
.wtpw .wtpw-notes li { padding-top: 1.1rem; padding-bottom: 1.1rem; font-size: 1.125rem; line-height: 1.6; color: #565e78; }
.wtpw .wtpw-notes li::before { top: 1.6rem; }
.wtpw .wtpw-notes li strong { color: #121626; }
.wtpw .wtpw-notes li:last-child { border-bottom: 1px solid #d5d9e5; }
@media (max-width: 781px) {
  .wtpw .wtpw-screen { margin-top: 1.5rem; margin-left: 10%; margin-right: 10%; }
}

/* ─────────────────────────────────────────────────────────────────
   SUPPORT PAGE
   Builds on the shared wtpc- and wtph- rules above. Classes prefixed
   wtps- are Support only.
   ───────────────────────────────────────────────────────────────── */

.page-id-11 .wp-site-blocks > main { display: none; }
.page-id-11 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-11 .wp-site-blocks > .wp-block-spacer { display: none; }

/* Hero: tour bus photo, navy on the left where the words sit */
.wtps--hero .wp-block-heading { color: #f2f4fa; }
.wtps--hero .wtps-hero-copy > * { max-width: 34rem; }
.wtps--hero p.wtps-lede { color: #f2f4fa; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; margin: 1.4rem 0 0; }

/* Contact form card */
.wtps .wtpc-card.wtps-form { justify-content: flex-start; padding: clamp(1.75rem, 3.5vw, 3rem); }
.wtps .wtps-form .wp-block-heading { max-width: none; margin-bottom: 1.25rem; }
.wtps .wtps-form .wp-block-jetpack-contact-form { gap: 1.1rem; }
.wtps .wtps-form label,
.wtps .wtps-form .grunion-field-label { font-weight: 600; font-size: 1rem; color: #121626; }
.wtps .wtps-form input[type="text"],
.wtps .wtps-form input[type="email"],
.wtps .wtps-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #f4f5f9;
  border: 1px solid #d5d9e5;
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font: inherit;
  color: #121626;
}
.wtps .wtps-form textarea { min-height: 9rem; }
.wtps .wtps-form input:focus-visible,
.wtps .wtps-form textarea:focus-visible { outline: 2px solid #0a64cc; outline-offset: 1px; border-color: #0a64cc; }
.wtps .wtps-form button[type="submit"] { width: 100%; }
/* Cloudflare Turnstile box above the Send button */
.wtps .wtps-turnstile { min-height: 65px; margin: 0.25rem 0 0.25rem; }
/* Trap field for bots: off-screen so people never see or tab into it. */
.wtps .wtps-trap-wrap,
.wtps .wtps-trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────────
   SITE HEADER (the "header" template part)
   One slim row: logo and name on the left, menu and trial button on the
   right. Stays at the top of the screen while scrolling. The navy bar
   and gold rule come from the HEADER rules near the top of this file.
   ───────────────────────────────────────────────────────────────── */
header.wp-block-template-part { position: sticky; top: 0; z-index: 60; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }
/* Keep in-page links (such as #pricing) clear of the fixed bar. */
html { scroll-padding-top: 96px; }

.wtp-header .wtp-header-row { gap: 1.5rem; }
.wtp-header .wtp-brand { flex-shrink: 0; }
.wtp-header .wp-block-site-logo { margin: 0; line-height: 0; }
.wtp-header .wp-block-site-logo img { display: block; width: 48px; height: 48px; }
.wtp-header .wp-block-site-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
}
.wtp-header .wp-block-site-title a { text-decoration: none; }
.wtp-header .wp-block-navigation { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.wtp-header .wp-block-navigation .wp-block-navigation__container { gap: 1.75rem; }
.wtp-header .wp-block-navigation a:hover { text-decoration: none; }
.wtp-header .wtp-header-cta { margin: 0; }
.wtp-header .wtp-header-cta .wp-block-button__link {
  padding: 0.6em 1.15em;
  font-size: 0.9375rem;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.wtp-header .wtp-header-cta .wp-block-button__link:hover { background: #f2f4fa !important; color: #0e1220 !important; }
.wtp-header .wtp-header-cta .wp-block-button__link:focus-visible { outline: 2px solid #e8c14a; outline-offset: 3px; }
/* Phone menu: larger links that are easy to tap */
.wtp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; }
.wtp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}
@media (max-width: 1040px) {
  .wtp-header .wtp-header-cta { display: none; }
}
/* Small tablets: the full menu is still showing, so tighten it to fit beside the name. */
@media (max-width: 760px) {
  .wtp-header .wtp-header-row { gap: 1rem; }
  .wtp-header .wp-block-site-title { font-size: 1.375rem; }
  .wtp-header .wp-block-navigation { font-size: 0.9375rem; }
  .wtp-header .wp-block-navigation .wp-block-navigation__container { gap: 0.9rem; }
}
@media (max-width: 600px) {
  .wtp-header .wp-block-site-title { font-size: 1.5rem; }
  .wtp-header .wp-block-site-logo img { width: 42px; height: 42px; }
}

/* ─────────────────────────────────────────────────────────────────
   ABOUT PAGE
   Builds on the shared wtpc-, wtph- and wtpf- rules above. Classes
   prefixed wtpb- are About only.
   ───────────────────────────────────────────────────────────────── */

.page-id-1 .wp-site-blocks > main { display: none; }
.page-id-1 .wp-site-blocks > .entry-content { margin-block-start: 0; }
.page-id-1 .wp-site-blocks > .wp-block-spacer { display: none; }
.page-id-1 .wp-site-blocks > .wp-block-group:last-child { margin-block-start: 0; }

/* Hero: the side-of-stage photo, shown in full so the phone stays visible.
   Kept straight: tilting it stopped the photo painting in some Chromium views. */
.wtpb .wtpb-photo { max-width: 440px; margin: clamp(1rem, 2vw, 2rem) auto clamp(3rem, 6vw, 4.5rem); }
.wtpb .wtpb-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 0 0 1px #2a3150, 0 40px 80px rgba(14, 18, 32, 0.6);
}
.wtpb.wtph--hero .wtph-hero-copy { padding-bottom: clamp(4rem, 9vw, 7rem); }

/* Readable text column */
.wtpb .wtpb-copy { max-width: 1180px; }
.wtpb .wtpb-copy > * { margin-block: 0; }
.wtpb .wtpb-copy p { font-size: 1.1875rem; line-height: 1.7; color: #565e78; margin-top: 1.25rem; }
.wtpb.wtpc--dark .wtpb-copy p { color: #a3aac2; }
.wtpb .wtpb-copy p.wtpb-pull {
  margin-top: 2.25rem;
  padding-left: 1.25rem;
  border-left: 4px solid #e8c14a;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #121626;
}
.wtpb .wtpb-copy p.wtpb-closer {
  margin-top: 2.25rem;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #f2f4fa;
}

/* The two text sections: heading and closing line on the left, paragraphs on
   the right (stacked on phones). */
.wtpb .wtpb-cols { gap: clamp(2rem, 6vw, 6rem); }
.wtpb .wtpb-cols > .wp-block-column > * { margin-block: 0; }
.wtpb .wtpb-cols > .wp-block-column > p:first-child { margin-top: 0.35rem; }
.wtpb .wtpb-cols > .wp-block-column > p + p { margin-top: 1.25rem; }
.wtpb .wtpb-cols > .wp-block-column > p.wtpb-pull,
.wtpb .wtpb-cols > .wp-block-column > p.wtpb-closer { margin-top: 1.75rem; }
.wtpb .wtpb-cols > .wp-block-column > .wp-block-buttons { margin-top: 2rem; }
/* Phones: one column in reading order (heading, paragraphs, closing line, button). */
@media (max-width: 781px) {
  .wtpb .wtpb-cols { flex-direction: column; gap: 0; }
  .wtpb .wtpb-cols > .wp-block-column { display: contents; }
  .wtpb .wtpb-cols .wp-block-heading { order: 1; }
  .wtpb .wtpb-cols > .wp-block-column > p { order: 2; margin-top: 1.25rem; }
  .wtpb .wtpb-cols > .wp-block-column > p.wtpb-pull,
  .wtpb .wtpb-cols > .wp-block-column > p.wtpb-closer { order: 3; margin-top: 2rem; }
  .wtpb .wtpb-cols > .wp-block-column > .wp-block-buttons { order: 4; }
}

/* Lived it: a big statement beside two phones */
.wtpb--lived { background: radial-gradient(55% 70% at 100% 50%, rgba(10, 100, 204, 0.55) 0%, rgba(10, 100, 204, 0) 70%), #0e1220; }
.wtpb.wtpc--dark p.wtpb-statement {
  margin: 0;
  font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #f2f4fa;
}
.wtpb.wtpc--dark p.wtpb-statement-body { font-size: 1.125rem; line-height: 1.65; max-width: 34rem; margin: 1.5rem 0 0; }

/* Bento cards hold two paragraphs each */
.wtpb .wtpc-card p + p { margin-top: 0.85rem; }
.wtpb .wtpf-card .wp-block-heading { margin-bottom: 0.6rem; }

.wtpb--need { background: radial-gradient(50% 60% at 0% 100%, rgba(10, 100, 204, 0.5) 0%, rgba(10, 100, 204, 0) 70%), #0e1220; }
.wtpb--need .wp-block-buttons { margin-top: 2rem; }

@media (max-width: 781px) {
  .wtpb.wtph--hero .wtph-hero-copy { padding-bottom: 0; }
  .wtpb .wtpb-photo { max-width: 320px; margin-top: 1.5rem; margin-bottom: 3rem; }
}