  html:has([data-tt-landing].tt-public-page),
  body:has([data-tt-landing].tt-public-page) {
    background: var(--tt-color-bg);
  }

  [data-tt-landing].tt-public-page {
    background: var(--tt-color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  [data-tt-landing] .tt-public-header .tt-container {
    gap: var(--tt-space-4);
  }

  [data-tt-landing] .tt-public-header__label {
    align-items: center;
    background: color-mix(in srgb, var(--tt-color-gold) 20%, var(--tt-color-white));
    border-radius: var(--tt-radius-pill);
    color: var(--tt-color-gold);
    display: inline-flex;
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step--1);
    font-weight: 700;
    min-height: 32px;
    padding: 0 var(--tt-space-3);
  }

  [data-tt-landing] .tt-public-header .tt-landing__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  [data-tt-landing] .tt-public-header .tt-landing__nav a[aria-current="page"] {
    color: var(--tt-color-gold);
  }

  [data-tt-landing] .tt-public-page__main {
    background: var(--tt-color-bg);
    flex: 1 0 auto;
  }

  [data-tt-landing] .tt-public-hero {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tt-color-purple-light) 18%, var(--tt-color-white)),
      var(--tt-color-white)
    );
    padding-block: 34px var(--tt-space-7);
  }

  [data-tt-landing] .tt-public-hero__inner {
    align-items: stretch;
    display: grid;
    gap: var(--tt-space-6);
    grid-template-columns: minmax(340px, 0.84fr) minmax(0, 1.16fr);
  }

  [data-tt-landing] .tt-public-hero__copy {
    align-content: center;
    display: grid;
    gap: var(--tt-space-4);
    min-width: 0;
    padding-block: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-hero h1 {
    font-size: 46px;
    max-width: 15ch;
  }

  [data-tt-landing] .tt-public-hero__intro {
    color: var(--tt-color-text);
    font-size: var(--tt-step-1);
    font-weight: 700;
    max-width: 620px;
  }

  [data-tt-landing] .tt-public-hero__note {
    color: color-mix(in srgb, var(--tt-color-charcoal) 78%, var(--tt-color-purple));
    font-size: var(--tt-step-0);
    font-weight: 700;
    margin: 0;
    max-width: 560px;
  }

  [data-tt-landing] .tt-public-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-space-2);
  }

  [data-tt-landing] .tt-public-facts span {
    background: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-pill);
    color: var(--tt-color-purple);
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step--1);
    font-weight: 700;
    padding: var(--tt-space-2) var(--tt-space-4);
  }

  [data-tt-landing] .tt-public-image {
    background: var(--tt-color-surface);
    border-radius: var(--tt-radius-3);
    box-shadow: var(--tt-shadow-1);
    margin: 0;
    min-height: 220px;
    overflow: hidden;
  }

  [data-tt-landing] .tt-public-image img {
    display: block;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    width: 100%;
  }

  [data-tt-landing] .tt-public-image--hero {
    min-height: 420px;
  }

  [data-tt-landing] .tt-public-image--wide {
    min-height: 280px;
  }

  [data-tt-landing] .tt-public-section:nth-of-type(even) {
    background: var(--tt-color-bg-alt);
  }

  [data-tt-landing] .tt-public-section .tt-section-heading > p:not(.tt-kicker) {
    color: var(--tt-color-muted);
    font-size: var(--tt-step-1);
    max-width: 760px;
  }

  [data-tt-landing] .tt-public-steps {
    counter-reset: public-step;
    display: grid;
    gap: var(--tt-space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  [data-tt-landing] .tt-public-steps li {
    background: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-2);
    display: grid;
    gap: var(--tt-space-3);
    padding: var(--tt-space-4);
  }

  [data-tt-landing] .tt-public-steps__number {
    align-items: center;
    background: var(--tt-color-purple);
    border-radius: var(--tt-radius-pill);
    color: var(--tt-color-white);
    display: inline-flex;
    font-family: var(--tt-font-accent);
    font-weight: 700;
    height: 36px;
    justify-content: center;
    width: 36px;
  }

  [data-tt-landing] .tt-public-steps p,
  [data-tt-landing] .tt-public-card p,
  [data-tt-landing] .tt-public-detail-row p,
  [data-tt-landing] .tt-public-leader__point p,
  [data-tt-landing] .tt-public-copy p,
  [data-tt-landing] .tt-public-note p,
  [data-tt-landing] .tt-public-form-panel__copy p {
    color: var(--tt-color-muted);
  }

  [data-tt-landing] .tt-public-detail-list {
    background: var(--tt-color-surface);
    border: 1px solid color-mix(in srgb, var(--tt-color-purple-light) 46%, var(--tt-color-white));
    border-radius: var(--tt-radius-3);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
  }

  [data-tt-landing] .tt-public-detail-row {
    display: grid;
    gap: var(--tt-space-2);
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-detail-row + .tt-public-detail-row {
    border-inline-start: 1px solid color-mix(in srgb, var(--tt-color-purple-light) 46%, var(--tt-color-white));
  }

  [data-tt-landing] .tt-public-detail-row h3 {
    font-size: var(--tt-step-1);
  }

  [data-tt-landing] .tt-public-detail-row p {
    margin: 0;
  }

  [data-tt-landing] .tt-public-card-grid {
    display: grid;
    gap: var(--tt-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-tt-landing] .tt-public-card {
    background: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-2);
    color: var(--tt-color-text);
    display: grid;
    gap: var(--tt-space-3);
    padding: var(--tt-space-5);
    text-decoration: none;
  }

  [data-tt-landing] a.tt-public-card:hover {
    background: var(--tt-color-surface-tint);
    color: var(--tt-color-text);
  }

  [data-tt-landing] .tt-public-card__meta {
    color: var(--tt-color-purple) !important;
    font-family: var(--tt-font-accent);
    font-weight: 700;
  }

  [data-tt-landing] .tt-public-card__button {
    justify-self: start;
    margin-top: var(--tt-space-2);
  }

  [data-tt-landing] .tt-public-price-grid {
    display: grid;
    gap: var(--tt-space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [data-tt-landing] .tt-public-price-card {
    align-content: start;
    background: var(--tt-color-surface);
    border: 1px solid color-mix(in srgb, var(--tt-color-purple-light) 50%, var(--tt-color-white));
    border-radius: var(--tt-radius-3);
    box-shadow: var(--tt-shadow-1);
    display: grid;
    gap: var(--tt-space-3);
    min-height: 430px;
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-price-card--featured {
    border-color: color-mix(in srgb, var(--tt-color-gold) 78%, var(--tt-color-white));
    box-shadow: 0 18px 40px color-mix(in srgb, var(--tt-color-purple) 18%, transparent);
  }

  [data-tt-landing] .tt-public-price-card__top {
    align-items: center;
    display: flex;
    gap: var(--tt-space-3);
    justify-content: space-between;
  }

  [data-tt-landing] .tt-public-price-card h3 {
    font-size: 31px;
  }

  [data-tt-landing] .tt-public-price-card__top span {
    background: color-mix(in srgb, var(--tt-color-gold) 24%, var(--tt-color-white));
    border: 1px solid color-mix(in srgb, var(--tt-color-gold) 70%, var(--tt-color-white));
    border-radius: var(--tt-radius-pill);
    color: color-mix(in srgb, var(--tt-color-purple) 86%, var(--tt-color-charcoal));
    flex: 0 0 auto;
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step--1);
    font-weight: 700;
    padding: var(--tt-space-1) var(--tt-space-3);
  }

  [data-tt-landing] .tt-public-price-card__price {
    color: var(--tt-color-purple);
    font-family: var(--tt-font-accent);
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
  }

  [data-tt-landing] .tt-public-price-card__per {
    color: var(--tt-color-text);
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step-1);
    font-weight: 700;
    margin: 0;
  }

  [data-tt-landing] .tt-public-price-card__facts {
    border-block: 1px solid color-mix(in srgb, var(--tt-color-purple-light) 38%, var(--tt-color-white));
    display: grid;
    gap: var(--tt-space-1);
    padding-block: var(--tt-space-3);
  }

  [data-tt-landing] .tt-public-price-card__facts span {
    color: var(--tt-color-text-muted);
  }

  [data-tt-landing] .tt-public-price-card__facts strong {
    color: var(--tt-color-purple);
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step-1);
  }

  [data-tt-landing] .tt-public-price-card p:not([class]) {
    color: var(--tt-color-text-muted);
    margin: 0;
  }

  [data-tt-landing] .tt-public-price-card .tt-button {
    justify-self: start;
    margin-block-start: auto;
  }

  [data-tt-landing] .tt-public-split {
    align-items: center;
    display: grid;
    gap: var(--tt-space-6);
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  }

  [data-tt-landing] .tt-public-copy {
    background: var(--tt-color-surface);
    border-radius: var(--tt-radius-2);
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-copy--solo {
    max-width: 820px;
  }

  [data-tt-landing] .tt-public-note {
    background: var(--tt-color-purple);
    border-radius: var(--tt-radius-3);
    color: var(--tt-color-white);
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-note p {
    color: color-mix(in srgb, var(--tt-color-white) 88%, var(--tt-color-purple-light));
    font-size: var(--tt-step-1);
  }

  [data-tt-landing] .tt-public-leader {
    display: grid;
    gap: var(--tt-space-5);
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  }

  [data-tt-landing] .tt-public-image--leader {
    min-height: 320px;
  }

  [data-tt-landing] .tt-public-leader__body {
    align-content: center;
    display: grid;
    gap: var(--tt-space-4);
  }

  [data-tt-landing] .tt-public-leader__points {
    display: grid;
    gap: var(--tt-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-tt-landing] .tt-public-leader__point {
    border-top: 2px solid color-mix(in srgb, var(--tt-color-purple-light) 54%, var(--tt-color-white));
    display: grid;
    gap: var(--tt-space-2);
    padding-top: var(--tt-space-3);
  }

  [data-tt-landing] .tt-public-leader__point h3 {
    font-size: var(--tt-step-0);
  }

  [data-tt-landing] .tt-public-leader__point p,
  [data-tt-landing] .tt-public-leader__meta {
    margin: 0;
  }

  [data-tt-landing] .tt-public-leader__meta {
    color: var(--tt-color-purple);
    font-family: var(--tt-font-accent);
    font-weight: 700;
  }

  [data-tt-landing] .tt-public-form-panel {
    align-items: start;
    display: grid;
    gap: var(--tt-space-5);
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  }

  [data-tt-landing] .tt-public-form-panel__copy {
    background: var(--tt-color-purple);
    border-radius: var(--tt-radius-3);
    color: var(--tt-color-white);
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-form-panel__copy p {
    color: color-mix(in srgb, var(--tt-color-white) 88%, var(--tt-color-purple-light));
    font-size: var(--tt-step-1);
  }

  [data-tt-landing] .tt-public-form {
    background: var(--tt-color-surface);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-3);
    display: grid;
    gap: var(--tt-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--tt-space-5);
  }

  [data-tt-landing] .tt-public-form label {
    color: var(--tt-color-purple);
    display: grid;
    font-family: var(--tt-font-accent);
    font-size: var(--tt-step--1);
    font-weight: 700;
    gap: var(--tt-space-1);
  }

  [data-tt-landing] .tt-public-form__trap {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
  }

  [data-tt-landing] .tt-public-form input {
    background: var(--tt-color-surface-tint);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-1);
    min-height: 46px;
    padding: var(--tt-space-2) var(--tt-space-3);
  }

  [data-tt-landing] .tt-public-form textarea {
    background: var(--tt-color-surface-tint);
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-1);
    min-height: 108px;
    padding: var(--tt-space-2) var(--tt-space-3);
    resize: vertical;
  }

  [data-tt-landing] .tt-public-form input:focus,
  [data-tt-landing] .tt-public-form textarea:focus {
    background: var(--tt-color-white);
    border-color: var(--tt-color-purple-mid);
    outline: 3px solid var(--tt-color-focus);
    outline-offset: 2px;
  }

  [data-tt-landing] .tt-public-form .tt-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  [data-tt-landing] .tt-public-form__status {
    color: var(--tt-color-muted);
    font-weight: 700;
    grid-column: 1 / -1;
    margin: 0;
  }

  [data-tt-landing] .tt-public-form[data-tt-inquiry-state="success"] .tt-public-form__status {
    color: var(--tt-color-teal);
  }

  [data-tt-landing] .tt-public-form[data-tt-inquiry-state="error"] .tt-public-form__status {
    color: var(--tt-color-red);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-form label:last-of-type,
  [data-tt-landing][data-page="kalas"] .tt-public-form label:last-of-type,
  [data-tt-landing][data-page="teambuilding"] .tt-public-form label:last-of-type {
    grid-column: 1 / -1;
  }

  [data-tt-landing][data-page="villkor"] .tt-public-hero__inner,
  [data-tt-landing][data-page="cookies"] .tt-public-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  [data-tt-landing][data-page="kalas"] .tt-public-facts {
    column-gap: var(--tt-space-4);
    display: grid;
    grid-template-columns: repeat(2, max-content);
    row-gap: var(--tt-space-1);
  }

  [data-tt-landing][data-page="kalas"] .tt-public-facts span {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-facts span + span::before {
    content: none;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__inner,
  [data-tt-landing][data-page="klippkort"] .tt-public-hero__inner,
  [data-tt-landing][data-page="villkor"] .tt-public-hero__inner {
    grid-template-columns: minmax(0, 860px);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__copy,
  [data-tt-landing][data-page="klippkort"] .tt-public-hero__copy {
    padding-block: var(--tt-space-6);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero h1,
  [data-tt-landing][data-page="klippkort"] .tt-public-hero h1 {
    max-width: 18ch;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__intro,
  [data-tt-landing][data-page="klippkort"] .tt-public-hero__intro {
    max-width: 760px;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--details .tt-public-detail-list {
    background: transparent;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--tt-color-purple-light) 54%, var(--tt-color-white));
    border-radius: 0;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--details .tt-public-detail-row {
    padding: var(--tt-space-4) var(--tt-space-4) var(--tt-space-3) 0;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--details .tt-public-detail-row + .tt-public-detail-row {
    border-inline-start: 0;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--steps .tt-public-steps {
    gap: 0;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--steps .tt-public-steps li {
    background: transparent;
    border: 0;
    border-radius: 0;
    border-top: 2px solid color-mix(in srgb, var(--tt-color-purple-light) 54%, var(--tt-color-white));
    padding: var(--tt-space-4) var(--tt-space-4) 0 0;
  }

  [data-tt-landing][data-page="kalas"] .tt-public-section--form {
    background: var(--tt-color-bg-alt);
  }

  [data-tt-landing][data-page="kalas"] .tt-public-form-panel {
    grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr);
  }

  [data-tt-landing][data-page="om-oss"] .tt-public-hero__inner {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  }

  [data-tt-landing][data-page="om-oss"] .tt-public-hero__copy {
    padding-block-end: var(--tt-space-6);
  }

  [data-tt-landing][data-page="om-oss"] .tt-public-image--hero {
    min-height: 360px;
  }

  [data-tt-landing][data-page="om-oss"] .tt-public-hero h1 {
    max-width: 18ch;
  }

  [data-tt-landing][data-page="om-oss"] .tt-public-section--text {
    background: var(--tt-color-white);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--tt-color-purple-light) 16%, var(--tt-color-white)),
      var(--tt-color-white)
    );
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__inner {
    grid-template-columns: minmax(0, 860px);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__copy {
    color: var(--tt-color-text);
    padding-block: var(--tt-space-6);
    padding-inline-end: 0;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero h1 {
    color: var(--tt-color-purple);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero .tt-kicker {
    color: var(--tt-color-gold);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-hero__intro {
    color: var(--tt-color-text);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-facts span {
    background: var(--tt-color-surface);
    border-color: var(--tt-color-border);
    color: var(--tt-color-purple);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-section--cards {
    background: var(--tt-color-white);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-card-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-card {
    align-content: start;
    min-height: 188px;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-card__meta {
    margin-block-start: auto;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-section--form {
    background: var(--tt-color-bg-alt);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-form-panel {
    align-items: start;
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-form-panel__copy {
    align-content: start;
    background: var(--tt-color-purple);
    display: grid;
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-form {
    border: 0;
    box-shadow: var(--tt-shadow-1);
  }

  [data-tt-landing][data-page="kontakt"] .tt-public-form label:nth-last-of-type(-n + 2) {
    grid-column: 1 / -1;
  }

  @media (max-width: 1120px) {
    [data-tt-landing][data-page="kalas"] .tt-public-section--steps .tt-public-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-tt-landing][data-page="kalas"] .tt-public-leader {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1024px) {
    [data-tt-landing] .tt-public-hero__inner,
    [data-tt-landing] .tt-public-split,
    [data-tt-landing] .tt-public-form-panel {
      grid-template-columns: 1fr;
    }

    [data-tt-landing] .tt-public-steps,
    [data-tt-landing] .tt-public-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-hero {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tt-color-purple-light) 16%, var(--tt-color-white)),
        var(--tt-color-white)
      );
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-hero__inner,
    [data-tt-landing][data-page="kontakt"] .tt-public-form-panel {
      grid-template-columns: 1fr;
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-hero__copy {
      padding-inline-end: 0;
    }
  }

  @media (max-width: 760px) {
    [data-tt-landing] .tt-public-hero h1 {
      font-size: 36px;
      max-width: 14ch;
    }

    [data-tt-landing] .tt-public-image--hero {
      min-height: 280px;
    }

    [data-tt-landing] .tt-public-steps,
    [data-tt-landing] .tt-public-card-grid,
    [data-tt-landing] .tt-public-form {
      grid-template-columns: 1fr;
    }

    [data-tt-landing] .tt-public-leader__points {
      grid-template-columns: 1fr;
    }

    [data-tt-landing] .tt-public-form label:last-of-type {
      grid-column: auto;
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-card-grid,
    [data-tt-landing][data-page="kontakt"] .tt-public-form,
    [data-tt-landing][data-page="kontakt"] .tt-public-form-panel {
      grid-template-columns: 1fr;
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-image--hero {
      display: none;
    }

    [data-tt-landing][data-page="kontakt"] .tt-public-form label:nth-last-of-type(-n + 2) {
      grid-column: auto;
    }
  }
