/* ==========================================================================
   For Organizations page
   Uses the site-wide brand tokens already set in global.css:
   surface #0f1317 | accent #54ccff | body copy #d7d7d7 | Myriad Pro family
   ========================================================================== */

.org-page {
  --org-surface: #0f1317;
  --org-surface-2: #151b21;
  --org-surface-light: #eef3f8;
  --org-accent: #54ccff;
  --org-accent-strong: #1b8ef2;
  --org-text: #ffffff;
  --org-text-muted: #d7d7d7;
  --org-text-dark: #0f1317;
  --org-text-dark-muted: #3d4a56;
  --org-rule: rgba(255, 255, 255, 0.14);
  --org-rule-dark: rgba(15, 19, 23, 0.14);
}

/* Eyebrow label above section headings ------------------------------------ */
.org-eyebrow {
  display: block;
  color: var(--org-accent);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.org-eyebrow-dark {
  color: var(--org-accent-strong);
}

/* Shared heading treatment ------------------------------------------------- */
.org-h2 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 105%;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.org-h2-dark {
  color: var(--org-text-dark);
}
.org-h2 .accent {
  color: var(--org-accent);
}
.org-h2-dark .accent {
  color: var(--org-accent-strong);
}

.org-lede {
  color: var(--org-text-muted);
  font-size: 18px;
  line-height: 160%;
  max-width: 56ch;
  margin-top: 24px;
}
.org-lede-dark {
  color: var(--org-text-dark-muted);
}

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.banner.org-hero {
  position: relative;
  background-color: var(--org-surface);
  background-image: url("/assets/images/skill-revolution-banner.jpg");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  min-height: 660px;
  padding: 96px 0 120px;
  overflow: hidden;
}
/* Left-weighted scrim: keeps the headline legible over the photo while the
   goaltender stays visible on the right. */
.banner.org-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0f1317 0%,
    rgba(15, 19, 23, 0.94) 26%,
    rgba(15, 19, 23, 0.6) 55%,
    rgba(15, 19, 23, 0.15) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Same bottom fade the other hero banners use (#herobanner::before). */
.banner.org-hero::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgba(15, 19, 23, 0) 0%, #0f1317 100%);
  pointer-events: none;
  z-index: 2;
}
.org-hero .container {
  position: relative;
  width: 100%;
  z-index: 3;
}
.org-hero .row {
  align-items: center;
  row-gap: 40px;
}
.org-hero h1 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 66px;
  font-weight: 700;
  line-height: 96%;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.org-hero h1 .accent {
  color: var(--org-accent);
  display: block;
}
.org-hero p {
  color: var(--org-text-muted);
  font-size: 18px;
  line-height: 160%;
  padding: 24px 0 36px;
  max-width: 48ch;
}
/* Primary CTA: the site's pill button plus a trailing arrow ---------------- */
.org-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--org-accent);
  box-shadow: 0 4px 18px 0 rgba(0, 204, 255, 0.29);
  color: var(--org-text-dark);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.org-btn:hover {
  background: #7ad9ff;
  color: var(--org-text-dark);
}
.org-btn:active {
  transform: translateY(1px);
}
.org-btn svg {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2. The development gap
   -------------------------------------------------------------------------- */
.org-gap {
  background: var(--org-surface);
  padding: 0 0 96px;
}
.org-gap .row {
  align-items: center;
  row-gap: 40px;
}
/* The copy column here is a full half of the grid, so the 56ch measure above
   stops the paragraph well short of the heading's right edge. Let it run to
   the column instead -- at this width it still lands around 68ch. */
.org-gap .org-lede {
  max-width: none;
}
.org-gap-media img {
  width: 100%;
  max-width: 640px;
  object-fit: contain;
  /* The rounded corners used to be baked into the composite; the single photo
     is a plain rectangle, so the radius lives here now. */
  border-radius: 20px;
}
.org-gap-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.org-gap-point {
  padding-left: 24px;
  border-left: 1px solid var(--org-rule);
}
.org-gap-points .org-gap-point:first-child {
  padding-left: 0;
  border-left: 0;
}
.org-gap-point svg {
  display: block;
  margin-bottom: 16px;
}
.org-gap-point h3 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  /* Sits well above the 16px body copy, so the card title reads as the title. */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.org-gap-point p {
  color: var(--org-text-muted);
  font-size: 16px;
  line-height: 150%;
}
/* Each card now carries a PROBLEM line and a SOLUTION line, so the two need
   space between them and a label that reads as a label, not as body copy. */
.org-gap-line + .org-gap-line {
  margin-top: 10px;
}
.org-gap-label {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. The FTC solution (light band)
   -------------------------------------------------------------------------- */
.org-solution {
  /* Plain white: the device artwork's backdrop is white, and the old blue-grey
     surface read as a mismatched tint behind it. */
  background: #fff;
  padding: 80px 0;
}
/* "Total Goalie Development." reads as one unit, so it gets its own line and
   is kept off the wrap until the column is too narrow to hold it. Slightly
   smaller than the page's other h2s so the phrase fits this half-width column
   on one line. */
.org-solution .org-h2 {
  /* Scales with the column so the accent line below can stay unwrapped. */
  font-size: clamp(28px, 2.7vw, 42px);
}
.org-solution .org-h2 .accent {
  display: block;
}
@media screen and (min-width: 1200px) {
  .org-solution .org-h2 .accent {
    white-space: nowrap;
  }
}
/* Wider measure and tighter leading here: the 56ch default left three stubby
   lines above the rows, and the section ran taller than the artwork beside it. */
.org-solution .org-lede {
  max-width: 68ch;
  line-height: 145%;
  /* Mockup keeps the lede tucked under the heading, not floating between it
     and the rows. */
  margin-top: 12px;
}
.org-solution .row {
  align-items: center;
  row-gap: 48px;
}
/* Each row pairs what FTC ships (left) with what the organization gets (right),
   with an arrow between them. Three columns on desktop; the arrow turns to
   point down once the pair stacks. */
.org-value-rows {
  margin-top: 20px;
}
.org-value-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--org-rule-dark);
}
.org-value-row:last-child {
  border-bottom: 1px solid var(--org-rule-dark);
}
.org-value-cell-gain {
  padding-left: 18px;
  border-left: 1px solid var(--org-rule-dark);
}
.org-value-eyebrow {
  display: block;
  color: var(--org-accent-strong);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.org-value-cell h3 {
  color: var(--org-text-dark);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 115%;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.org-value-cell-gain h3 {
  color: var(--org-accent-strong);
}
.org-value-cell p {
  color: var(--org-text-dark-muted);
  font-size: 15px;
  line-height: 132%;
}
.org-value-arrow {
  color: var(--org-accent-strong);
  align-self: center;
  flex-shrink: 0;
}
.org-solution-media img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  /* Portrait artwork: capping the height keeps it in step with the copy block
     instead of towering past it on narrow desktops. */
  max-height: 680px;
}

/* --------------------------------------------------------------------------
   4. Led by Ian Clark
   -------------------------------------------------------------------------- */
.org-founder {
  background: var(--org-surface-2);
  padding: 112px 0;
}
.org-founder .row {
  align-items: center;
  row-gap: 40px;
}
.org-founder-media {
  /* Keeps the portrait off the copy: the Bootstrap gutter alone read as
     crowded once the image was in place. */
  padding-right: 28px;
}
.org-founder-media img {
  width: 100%;
  /* Source is square (900x900) with the face in the upper half, so `cover`
     scales to the box WIDTH and crops top and bottom. `object-position`
     keeps the crop off the top of his head. Raise the ratio to show more of
     the frame, lower it to crop tighter. */
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 20px;
  /* Knocked back so the portrait sits in the dark band rather than punching a
     bright rectangle through it, matching the treatment in the design. */
  filter: grayscale(0.4) brightness(0.85);
}
.org-founder h2 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 105%;
  text-transform: uppercase;
}
.org-founder .org-founder-sub {
  color: var(--org-accent);
  font-family: "Myriad Pro Bold Italic", sans-serif;
  font-size: 20px;
  padding: 12px 0 20px;
  display: block;
}
.org-founder p {
  color: var(--org-text-muted);
  font-size: 18px;
  line-height: 165%;
  max-width: 62ch;
}
.org-quote {
  border-left: 2px solid var(--org-accent);
  padding-left: 28px;
}
.org-quote blockquote {
  color: var(--org-text);
  font-family: "Myriad Pro Bold Italic", sans-serif;
  font-size: 22px;
  line-height: 150%;
  margin: 0 0 24px;
}
.org-quote cite {
  display: block;
  font-style: normal;
}
.org-quote .org-quote-name {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.org-quote .org-quote-role {
  color: var(--org-text-muted);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   5. How it works
   -------------------------------------------------------------------------- */
.org-steps {
  background: var(--org-surface);
  padding: 88px 0;
}
.org-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  counter-reset: org-step;
}
.org-step {
  padding-left: 24px;
  border-left: 1px solid var(--org-rule);
}
.org-steps-grid .org-step:first-child {
  padding-left: 0;
  border-left: 0;
}
.org-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--org-accent-strong);
  color: #fff;
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 20px;
  margin-bottom: 20px;
}
.org-step h3 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold Italic", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 120%;
  margin-bottom: 10px;
}
.org-step p {
  color: var(--org-text-muted);
  font-size: 16px;
  line-height: 155%;
}

/* --------------------------------------------------------------------------
   6. Closing CTA + FAQ
   -------------------------------------------------------------------------- */
.org-close {
  background: var(--org-surface);
  padding: 0 0 96px;
}
.org-close .row {
  row-gap: 48px;
}
.org-close-cta {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(120deg, #123a5c 0%, #0f1317 70%);
  padding: 56px 40px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.org-close-cta h2 {
  position: relative;
  z-index: 2;
  max-width: 11ch;
  font-size: 40px;
}
.org-close-cta .org-btn {
  position: relative;
  z-index: 2;
  margin-top: 32px;
  align-self: flex-start;
}
.org-close-cta img {
  position: absolute;
  /* Source is a studio shot on a black backdrop with a glow, not a cut-out.
     `screen` drops the black into the panel gradient and keeps the glow, so
     no alpha channel is needed. Swap to a transparent PNG and drop this line
     if the art ever ships pre-cut. */
  mix-blend-mode: screen;
  right: -20px;
  bottom: 0;
  width: 46%;
  max-width: 300px;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

.org-faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
}
.org-faq-head h2 {
  color: var(--org-text);
  font-family: "Myriad Pro Bold Italic", sans-serif;
  font-size: 24px;
  text-transform: uppercase;
}
.org-faq-head a {
  color: var(--org-accent);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.org-faq-head a:hover {
  text-decoration: underline;
}
.org-faq .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--org-rule);
}
.org-faq .accordion-button {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--org-text);
  font-size: 20px;
  line-height: 140%;
  padding: 20px 40px 20px 0;
  min-height: 48px;
}
.org-faq .accordion-button::after {
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  background-image: url("/assets/images/accordion-plus.svg");
  background-size: 20px 20px;
}
.org-faq .accordion-button:not(.collapsed)::after {
  background-image: url("/assets/images/accordion-minus.svg");
  transform: none;
}
.org-faq .accordion-body {
  color: var(--org-text-muted);
  font-size: 16px;
  line-height: 165%;
  padding: 0 40px 24px 0;
}

/* --------------------------------------------------------------------------
   Request a demo modal
   -------------------------------------------------------------------------- */
.org-demo-modal .modal-content {
  background: linear-gradient(160deg, #10202f 0%, #0f1317 60%);
  border: 1px solid rgba(84, 204, 255, 0.35);
  border-radius: 20px;
  color: var(--org-text);
  padding: 8px;
}
.org-demo-modal .modal-header {
  align-items: flex-start;
  border-bottom: 0;
  padding-bottom: 0;
}
.org-demo-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.8;
}
.org-demo-modal .modal-title {
  color: var(--org-text);
  font-family: "Myriad Pro Bold", sans-serif;
  font-size: 40px;
  text-transform: uppercase;
  line-height: 100%;
}
.org-demo-modal .modal-title .accent {
  color: var(--org-accent);
}
.org-demo-modal .modal-body > p {
  color: var(--org-text-muted);
  font-size: 16px;
  line-height: 155%;
  padding: 12px 0 24px;
}
.org-demo-modal label {
  display: block;
  color: var(--org-text);
  font-size: 15px;
  margin-bottom: 6px;
}
.org-demo-modal .req {
  color: #ff6b6b;
}
.org-demo-modal .form-control,
.org-demo-modal .form-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--org-text);
  font-size: 15px;
  min-height: 48px;
  /* global.css:553 sets `input { padding: 12px 16px 12px 40px !important }` to
     clear the icon on the site's email fields. It applies to every input on
     the page and outranks a plain rule, so these fields sat 40px in -- and
     only the inputs did, leaving them out of line with the selects and the
     textarea, which that rule does not match. None of the fields here are
     icon-prefixed, so the inset is overridden back to normal. */
  padding: 12px 14px !important;
}
.org-demo-modal textarea.form-control {
  min-height: 96px;
  resize: vertical;
}
/* global.css declares `input::placeholder { color: #fff !important }` at :539
   and `#D7D7D7 !important` at :756. The second wins, so every placeholder
   rendered in the same colour as real body copy -- the form looked pre-filled.
   Needs !important to outrank them. #8a94a0 sits at 4.6:1 on the field
   background: clearly unfilled, still legible. */
.org-demo-modal .form-control::placeholder {
  color: #8a94a0 !important;
  opacity: 1 !important;
}
/* A select showing its empty option is not a placeholder -- that is real
   option text, so it took the field's white. Match the inputs while the
   empty option is the selected one. */
.org-demo-modal .form-select:has(option[value=""]:checked) {
  color: #8a94a0;
}
.org-demo-modal .form-select {
  /* chevron drawn in the accent colour so it reads on the dark field */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2354ccff'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
/* Only reached when the dropdown enhancer below has not run (no JS). macOS
   draws the native popup itself and honours none of this, which is why the
   enhancer exists. */
.org-demo-modal .form-select option {
  background: #10202f;
  color: var(--org-text);
}
.org-demo-modal .form-control:focus,
.org-demo-modal .form-select:focus {
  /* background-color, not the shorthand: the shorthand resets the chevron
     background-image set above and the field lost its arrow on focus. */
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--org-accent);
  box-shadow: 0 0 0 3px rgba(84, 204, 255, 0.28);
  color: var(--org-text);
}

/* --------------------------------------------------------------------------
   Custom select (enhanceSelect in for-organizations.html)

   The native <select> popup is drawn by the OS on macOS -- no CSS reaches it,
   so both selects render a Bootstrap dropdown instead. The <select> stays in
   the DOM as the value holder; validation and the submit payload still read
   it, so none of that code had to change.
   -------------------------------------------------------------------------- */
.org-demo-modal .org-select {
  position: relative;
}
/* Kept in the form (and in the tab order's shadow) purely to hold the value. */
.org-demo-modal .org-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.org-demo-modal .org-select-toggle {
  display: block;
  width: 100%;
  text-align: left;
}
.org-demo-modal .org-select-toggle.is-placeholder {
  color: #8a94a0;
}
/* validateField toggles .is-invalid on the hidden select; mirror it. */
.org-demo-modal .org-select-native.is-invalid ~ .org-select-toggle {
  border-color: #ff6b6b;
}
.org-demo-modal .org-select-toggle[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--org-accent);
  box-shadow: 0 0 0 3px rgba(84, 204, 255, 0.28);
}
.org-demo-modal .org-select-menu {
  width: 100%;
  background: #10202f;
  border: 1px solid rgba(84, 204, 255, 0.35);
  border-radius: 12px;
  padding: 6px;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.org-demo-modal .org-select-menu .dropdown-item {
  border-radius: 8px;
  color: var(--org-text);
  font-size: 15px;
  padding: 10px 12px;
  white-space: normal;
}
.org-demo-modal .org-select-menu .dropdown-item:hover,
.org-demo-modal .org-select-menu .dropdown-item:focus,
.org-demo-modal .org-select-menu .dropdown-item.active {
  background: var(--org-accent);
  color: var(--org-text-dark);
}
.org-demo-modal .form-control.is-invalid,
.org-demo-modal .form-select.is-invalid {
  border-color: #ff6b6b;
}
.org-demo-modal .org-field-error {
  display: block;
  min-height: 18px;
  color: #ff8a8a;
  font-size: 14px;
  margin-top: 4px;
}
.org-demo-modal .org-submit {
  width: 100%;
  justify-content: center;
  /* Every other field reserves an .org-field-error slot underneath; the
     textarea has none, so without this the button sits flush against it. */
  margin-top: 20px;
}
.org-demo-modal .org-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.org-demo-modal .org-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--org-text-muted);
  font-size: 14px;
  padding-top: 16px;
}
.org-demo-status {
  margin-top: 12px;
  font-size: 15px;
  line-height: 150%;
}
.org-demo-status.is-error {
  color: #ff8a8a;
}
.org-demo-status.is-success {
  color: var(--org-accent);
}

/* Short viewports: the dialog measured 854px tall, which does not fit a
   ~780px laptop viewport, so it opened already cut off and had to be
   scrolled. Everything below trims vertical space only -- no field is
   removed and nothing reflows horizontally. */
@media (max-height: 900px) {
  .org-demo-modal .modal-dialog {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .org-demo-modal .modal-content {
    padding: 4px;
  }
  .org-demo-modal .modal-title {
    font-size: 30px;
  }
  .org-demo-modal .modal-body > p {
    font-size: 15px;
    padding: 6px 0 14px;
  }
  .org-demo-modal .row.g-3 {
    --bs-gutter-y: 0.6rem;
  }
  .org-demo-modal label {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .org-demo-modal .form-control,
  .org-demo-modal .form-select {
    min-height: 42px;
    padding: 9px 14px !important;
  }
  .org-demo-modal textarea.form-control {
    min-height: 64px;
  }
  /* Reserved so an appearing message does not shove the form down. */
  .org-demo-modal .org-field-error {
    min-height: 15px;
    font-size: 13px;
  }
  .org-demo-modal .org-submit {
    margin-top: 16px;
  }
  .org-demo-modal .org-privacy {
    font-size: 13px;
    padding-top: 10px;
  }
}

/* --------------------------------------------------------------------------
   Focus visibility (global.css does not set one for these controls)
   -------------------------------------------------------------------------- */
.org-page a:focus-visible,
.org-page button:focus-visible,
.org-page .org-btn:focus-visible,
.org-page .accordion-button:focus-visible {
  outline: 3px solid var(--org-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  .org-hero h1 {
    font-size: 54px;
  }
  .org-h2 {
    font-size: 40px;
  }
  .org-founder h2 {
    font-size: 36px;
  }
}

@media screen and (max-width: 991px) {
  /* Stacked, the portrait would run the full container width. Cap it and drop
     the gutter that only existed to separate it from the copy beside it. */
  .org-founder-media {
    padding-right: 0;
  }
  .org-founder-media img {
    max-width: 320px;
  }
  /* Stacked, the photo pair has the whole container to itself -- the 640px cap
     that kept it in scale beside the copy just leaves a gap on tablets. */
  .org-gap-media img {
    max-width: 100%;
  }
  .org-gap-points,
  .org-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .org-gap-point,
  .org-step {
    padding-left: 0;
    border-left: 0;
  }
  /* Stacked: offer above outcome, with the arrow turned to point down. */
  .org-value-row {
    grid-template-columns: 1fr;
    row-gap: 12px;
    justify-items: start;
  }
  .org-value-cell-gain {
    padding-left: 0;
    border-left: 0;
  }
  .org-value-arrow {
    transform: rotate(90deg);
    margin-left: 4px;
  }
  .org-close-cta img {
    width: 45%;
    right: -20px;
  }
}

@media screen and (max-width: 767px) {
  .banner.org-hero {
    min-height: 0;
    padding: 56px 0 80px;
    background-position: 72% center;
  }
  .banner.org-hero::after {
    background: linear-gradient(
      180deg,
      rgba(15, 19, 23, 0.82) 0%,
      rgba(15, 19, 23, 0.92) 55%,
      #0f1317 100%
    );
  }
  .org-hero h1 {
    font-size: 40px;
  }
  .org-hero p,
  .org-lede {
    font-size: 16px;
  }
  .org-h2 {
    font-size: 32px;
  }
  .org-gap,
  .org-close {
    padding-bottom: 64px;
  }
  .org-solution,
  .org-founder,
  .org-steps {
    padding: 64px 0;
  }
  .org-gap-points,
  .org-steps-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .org-founder h2 {
    font-size: 30px;
  }
  .org-quote blockquote {
    font-size: 19px;
  }
  .org-close-cta {
    padding: 40px 24px;
    min-height: 0;
  }
  .org-close-cta img {
    position: static;
    width: 70%;
    margin: 24px auto 0;
    display: block;
  }
  .org-close-cta h2 {
    max-width: none;
  }
  .org-demo-modal .modal-title {
    font-size: 30px;
  }
  .org-btn {
    font-size: 16px;
    padding: 12px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .org-btn {
    transition: none;
  }
}