/* Page-specific styles for /losninger.html. Shared foundations live in /v2/. */

    /* ── Headline solution rows ───────────────────────────────── */
    :root {
      --solutions-callout-green: var(--green);
      --solutions-callout-green-rgb: 0, 232, 122;
    }

    .solution-stack {
      display: grid;
      gap: var(--s3);
      margin-top: var(--s4);
      max-width: 1120px;
      width: 100%;
    }

    .solution-card {
      position: relative;
      background: var(--dark-3);
      border: 1px solid var(--bd-dark);
      border-radius: var(--r3);
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
    }
    .solution-card-accent {
      height: 4px;
      background: linear-gradient(90deg, #F5A623, #E8773A);
    }
    .solution-card.is-isomap .solution-card-accent {
      background: linear-gradient(90deg, var(--blue), var(--solutions-callout-green));
    }
    .solution-card.is-yearlywheel .solution-card-accent {
      background: linear-gradient(90deg, var(--solutions-callout-green), var(--blue));
    }
    .solution-card.is-cybertabletop .solution-card-accent {
      background: linear-gradient(90deg, var(--blue), var(--solutions-callout-green), #F5A623);
    }
    .solution-card-body {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "brand"
        "chips"
        "copy"
        "facts"
        "actions";
      gap: var(--s3);
      padding: clamp(1.25rem, 3vw, 2rem);
      min-width: 0;
    }
    .solution-brand-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--s2);
      min-width: 0;
      grid-area: brand;
    }
    .solution-logo-box {
      min-height: 88px;
      width: min(100%, 520px);
      min-width: 0;
      border: 1px solid var(--bd-dark);
      background: var(--dark-4);
      border-radius: var(--r2);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--s3);
    }
    .solution-logo-box img {
      width: min(170px, 100%);
      height: auto;
    }
    .solution-wordmark-logo img {
      width: min(145px, 48vw);
    }
    .solution-wordmark {
      display: inline-flex;
      align-items: center;
      gap: .62rem;
      font-size: clamp(1.6rem, 4vw, 2.25rem);
      font-weight: 850;
      letter-spacing: -.02em;
      color: var(--td-hi);
    }
    .solution-wordmark::before {
      content: "";
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
      background: var(--solutions-callout-green);
      box-shadow: 0 0 0 6px rgba(var(--solutions-callout-green-rgb), .12);
    }
    .solution-wordmark.has-name-emoji::before {
      content: none;
    }
    .name-emoji {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      font-size: .9em;
      letter-spacing: 0;
      line-height: 1;
      text-transform: none;
    }
    .solution-kicker {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: .25rem;
    }
    .solution-title {
      margin: 0;
      color: var(--td-hi);
      font-size: clamp(1.45rem, 3.5vw, 2rem);
      line-height: 1.18;
      letter-spacing: -.018em;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .solution-copy {
      max-width: 72ch;
      color: var(--td-med);
      line-height: 1.7;
      font-size: .98rem;
      overflow-wrap: anywhere;
      grid-area: copy;
    }
    .solution-chips {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      grid-area: chips;
    }
    .solution-chip {
      font-family: var(--mono);
      font-size: .68rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      border-radius: var(--r5);
      padding: .28rem .72rem;
      background: color-mix(in srgb, var(--blue) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
      color: var(--blue);
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .solution-card:not(.is-isomap) .solution-chip {
      background: rgba(245,166,35,.1);
      border-color: rgba(245,166,35,.25);
      color: #F5A623;
    }
    .solution-card.is-yearlywheel .solution-chip {
      background: rgba(var(--solutions-callout-green-rgb), .1);
      border-color: rgba(var(--solutions-callout-green-rgb), .25);
      color: var(--solutions-callout-green);
    }
    .solution-card.is-cybertabletop .solution-chip {
      background: color-mix(in srgb, var(--blue) 8%, transparent);
      border-color: color-mix(in srgb, var(--blue) 22%, transparent);
      color: #b9d6ff;
    }
    .solution-free-corner {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      z-index: 2;
      pointer-events: none;
      font-family: var(--mono);
      font-size: .68rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      border-radius: var(--r5);
      padding: .28rem .72rem;
      background: rgba(var(--solutions-callout-green-rgb), .14);
      border-color: rgba(var(--solutions-callout-green-rgb), .36);
      border: 1px solid rgba(var(--solutions-callout-green-rgb), .36);
      color: var(--solutions-callout-green);
      font-weight: 900;
      box-shadow: 0 10px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent);
    }
    .solution-card.has-free-corner .solution-brand-row {
      padding-right: 7.75rem;
    }
    .solution-card.has-free-corner .solution-facts {
      padding-top: 2.35rem;
    }
    .solution-facts {
      display: grid;
      gap: .7rem;
      grid-area: facts;
      align-content: start;
    }
    .solution-fact {
      border-left: 3px solid var(--blue);
      background: color-mix(in srgb, var(--cream-0) 4%, transparent);
      border-radius: 0 var(--r2) var(--r2) 0;
      padding: .8rem 1rem;
      color: var(--td-med);
      line-height: 1.55;
      font-size: .9rem;
      overflow-wrap: anywhere;
    }
    .solution-card:not(.is-isomap) .solution-fact {
      border-left-color: #F5A623;
    }
    .solution-card.is-isomap .solution-fact {
      border-left-color: var(--solutions-callout-green);
    }
    .solution-card.is-yearlywheel .solution-fact {
      border-left-color: var(--solutions-callout-green);
    }
    .solution-card.is-cybertabletop .solution-fact {
      border-left-color: var(--blue);
    }
    .solution-fact strong {
      display: block;
      color: var(--td-hi);
      font-size: .88rem;
      margin-bottom: .2rem;
    }
    .solution-actions {
      display: flex;
      gap: .75rem;
      flex-wrap: wrap;
      padding-top: .2rem;
      grid-area: actions;
    }

    @media (min-width: 900px) {
      .solution-card-body {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
        grid-template-areas:
          "brand facts"
          "chips facts"
          "copy facts"
          "actions facts";
        align-items: start;
        column-gap: clamp(2rem, 5vw, 4rem);
      }
      .solution-logo-box {
        width: 100%;
      }
      .solution-copy {
        max-width: none;
      }
      .solution-facts {
        padding-top: .2rem;
      }
    }

    /* ── Resource cards ───────────────────────────────────────── */
    .resource-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.25rem;
      margin-top: var(--s4);
    }
    .resource-card-v2 {
      background: var(--dark-3);
      border: 1px solid var(--bd-dark);
      border-radius: var(--r3);
      overflow: hidden;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease;
      text-decoration: none;
      display: flex;
      flex-direction: column;
    }
    .resource-card-v2:hover {
      border-color: rgba(var(--solutions-callout-green-rgb), .3);
      transform: translateY(-4px);
    }
    .resource-card-accent {
      height: 3px;
      background: var(--solutions-callout-green);
    }
    .resource-card-body {
      padding: var(--s3);
      display: flex;
      flex-direction: column;
      gap: var(--s2);
      flex: 1;
    }
    .resource-card-head {
      display: flex;
      align-items: center;
      gap: .6rem;
      min-width: 0;
    }
    .resource-card-head .tag {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .resource-card-body h3 {
      display: flex;
      align-items: center;
      gap: .45rem;
      font-size: 1rem;
      font-weight: 700;
      color: var(--td-hi);
    }
    .resource-card-body p {
      font-size: .88rem;
      color: var(--td-med);
      line-height: 1.6;
    }
    .resource-card-body ul {
      padding-left: 1.1rem;
      margin: 0;
      list-style: none;
    }
    .resource-card-body ul li {
      font-size: .85rem;
      color: var(--td-med);
      margin: .25rem 0;
      padding-left: .2rem;
    }
    .resource-card-body ul li::before {
      content: "— ";
      color: var(--solutions-callout-green);
      font-weight: 700;
    }
    .resource-card-footer {
      margin-top: auto;
      padding-top: var(--s2);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .resource-free-badge {
      font-family: var(--mono);
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      background: rgba(var(--solutions-callout-green-rgb), .1);
      color: var(--solutions-callout-green);
      border: 1px solid rgba(var(--solutions-callout-green-rgb), .25);
      border-radius: var(--r5);
      padding: .2rem .6rem;
    }
    .solutions-green-tag {
      color: var(--solutions-callout-green);
    }
    .resource-arrow {
      font-size: .8rem;
      color: var(--td-lo);
    }

    @media (max-width: 640px) {
      .content-section .section-title,
      .content-section .section-sub {
        overflow-wrap: anywhere;
        hyphens: auto;
      }
      .solution-card-body {
        padding: var(--s3);
      }
      .solution-brand-row {
        gap: var(--s2);
      }
      .solution-logo-box {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        min-height: 72px;
        padding: var(--s2);
      }
      .solution-card.has-free-corner .solution-brand-row {
        padding-right: 0;
        padding-top: 2.35rem;
      }
      .solution-card.has-free-corner .solution-facts {
        padding-top: 0;
      }
      .solution-chips {
        align-items: flex-start;
      }
      .solution-actions {
        display: grid;
        grid-template-columns: 1fr;
      }
      .solution-actions .btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
      }
    }

    @media (prefers-color-scheme: light) {
      :root {
        --solutions-callout-green: var(--green-on-light);
        --solutions-callout-green-rgb: 26, 122, 69;
      }
      .solution-card {
        background: var(--cream-0);
        border-color: color-mix(in srgb, var(--shadow-color) 9%, transparent);
      }
      .solution-logo-box {
        background: var(--cream-2);
        border-color: color-mix(in srgb, var(--shadow-color) 8%, transparent);
      }
      .solution-wordmark,
      .solution-title,
      .solution-fact strong {
        color: var(--tl-hi);
      }
      .solution-copy,
      .solution-fact {
        color: var(--tl-med);
      }
      .solution-fact {
        background: color-mix(in srgb, var(--shadow-color) 3%, transparent);
      }
      .solution-card.is-cybertabletop .solution-chip {
        background: color-mix(in srgb, var(--blue-on-light) 7%, transparent);
        border-color: color-mix(in srgb, var(--blue-on-light) 20%, transparent);
        color: var(--blue-on-light);
      }
      .solution-card.is-cybertabletop .solution-fact {
        border-left-color: var(--blue-on-light);
      }

      /* Resource cards */
      .resource-card-v2 {
        background: var(--cream-0);
        border-color: color-mix(in srgb, var(--shadow-color) 9%, transparent);
      }
      .resource-card-v2:hover {
        border-color: rgba(var(--solutions-callout-green-rgb), .4);
        box-shadow: 0 4px 14px color-mix(in srgb, var(--shadow-color) 6%, transparent);
      }
      .resource-card-body h3 { color: var(--tl-hi); }
      .resource-card-body p { color: var(--tl-med); }
      .resource-card-body ul li { color: var(--tl-med); }
      .resource-arrow { color: var(--tl-lo); }
    }