.tripmatch-app{
    --tm-primary: #14B8A6;
    --tm-primary-dark: #0d9488;
    --tm-dark: #0F172A;
    --tm-gold: #F59E0B;
    --tm-bg: #F8FAFC;
    --tm-white: #FFFFFF;
    --tm-muted: #64748b;
    --tm-border: rgba(15,23,42,0.08);
    --tm-radius-lg: 22px;
    --tm-radius-md: 16px;
    --tm-shadow-sm: 0 4px 14px rgba(15,23,42,0.06);
    --tm-shadow-md: 0 12px 32px rgba(15,23,42,0.10);
    --tm-shadow-lg: 0 30px 70px rgba(15,23,42,0.18);
    --tm-ease: cubic-bezier(0.16, 1, 0.3, 1);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--tm-bg);
    color: var(--tm-dark);
    min-height: 100vh;
    display:block;
    padding: 0 0 60px;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Eigener Stacking-Context: verhindert, dass absolut positionierte
       Elemente ausserhalb der App (z.B. der Seiten-Header) auf Mobile
       über interaktiven Elementen liegen und Taps abfangen. */
    position: relative;
    z-index: 1;
  }
  .tripmatch-app *{ box-sizing: border-box; }
  /* Entfernt den blauen Tap-Highlight-Kasten, den mobile Browser
     (v.a. Android Chrome) standardmässig auf Buttons/Links zeigen,
     und schaltet den 300ms-Doppeltipp-Delay aus. */
  .tripmatch-app button,
  .tripmatch-app a{
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .tm-app-shell{
    width:100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 16px 0;
  }

  .tm-banner-full{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(245,158,11,0.08));
    min-height: 140px;
    overflow: hidden;
  }
  .tm-banner-full img{
    display:block;
    width:100%;
    height:auto;
    max-height: 420px;
    object-fit: contain;
  }

  .tm-screen{
    display:none;
    animation: tmFadeIn 0.5s var(--tm-ease) both;
  }
  .tm-screen.tm-active{ display:block; }
  /* Zusätzliche Absicherung: das native "hidden"-Attribut gewinnt in
     jedem Fall, auch falls Klassen aus irgendeinem Grund nicht
     synchron sein sollten (siehe showScreen() im Script, das beides
     immer gemeinsam setzt). */
  .tripmatch-app .tm-screen[hidden]{ display:none !important; }

  @keyframes tmFadeIn{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .tm-start{
    background: var(--tm-white);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    padding: 48px 28px;
    text-align:center;
    /* Eigener Stacking-Context als Absicherung, falls Theme-Elemente
       (z.B. der Seiten-Header) sich mit diesem Bereich überschneiden. */
    position: relative;
    z-index: 2;
  }
  .tm-start-error{
    margin-top: 14px;
    font-size: 0.85rem;
    color: #b91c1c;
    font-weight: 600;
  }
  .tm-start-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tm-primary-dark);
    background: rgba(20,184,166,0.1);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .tm-start h1{
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    line-height: 1.2;
  }
  .tm-start p{
    color: var(--tm-muted);
    font-size: 1.02rem;
    max-width: 420px;
    margin: 0 auto 28px;
    line-height: 1.55;
  }
  .tm-start-meta{
    display:flex;
    justify-content:center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    font-size: 0.85rem;
    color: var(--tm-muted);
    font-weight: 600;
  }
  .tm-start-meta span{ display:inline-flex; align-items:center; gap:6px; }

  .tm-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 16px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    border:none;
    cursor:pointer;
    transition: transform 0.3s var(--tm-ease), box-shadow 0.3s var(--tm-ease);
  }
  .tm-btn-primary{
    background: linear-gradient(135deg, var(--tm-primary) 0%, var(--tm-primary-dark) 100%);
    color: var(--tm-white);
    box-shadow: 0 16px 36px rgba(20,184,166,0.3);
  }
  .tm-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 44px rgba(20,184,166,0.38); }
  .tm-btn-primary:disabled{
    opacity:0.4;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
  }
  .tm-btn-ghost{
    background: transparent;
    color: var(--tm-dark);
    border: 1.5px solid var(--tm-border);
  }
  .tm-btn-ghost:hover{ border-color: var(--tm-primary); color: var(--tm-primary-dark); }

  .tm-btn:focus-visible,
  .tm-answer-card:focus-visible,
  .tm-skip-hint:focus-visible{
    outline: 2px solid var(--tm-primary-dark);
    outline-offset: 3px;
  }
  .tripmatch-app button{ font-family: inherit; }

  /* Verhindert, dass WordPress/Kadence-Theme-Stile die Farben des
     Start-Buttons in irgendeinem Touch-/Fokus-/Aktiv-Zustand
     überschreiben (Ursache des kurzzeitigen blauen Einfärbens ohne
     Funktion). Der sichtbare :focus-visible-Zustand für
     Tastaturnutzer bleibt davon unberührt (siehe Regel oben). */
  #tmStartBtn,
  #tmStartBtn:hover,
  #tmStartBtn:focus,
  #tmStartBtn:active{
    color: #ffffff !important;
    background: linear-gradient(135deg, #14B8A6 0%, #0d9488 100%) !important;
    border: none !important;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Absicherung gegen Überlagerung durch andere (z.B. dekorative)
     Elemente auf der Seite: der Startbereich und der Button selbst
     bekommen einen klaren eigenen Stacking-Context und bleiben
     garantiert antippbar. */
  #tmStartBtn{
    position: relative;
    z-index: 3;
    pointer-events: auto;
  }

  .tm-question-card{
    background: var(--tm-white);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    padding: 32px 24px 28px;
  }

  .tm-progress-wrap{
    display:flex;
    align-items:center;
    gap: 12px;
    margin-bottom: 26px;
  }
  .tm-progress-track{
    flex:1;
    height: 8px;
    border-radius: 999px;
    background: rgba(15,23,42,0.07);
    overflow:hidden;
  }
  .tm-progress-fill{
    height:100%;
    border-radius:999px;
    background: linear-gradient(90deg, var(--tm-primary), var(--tm-gold));
    width: 0%;
    transition: width 0.5s var(--tm-ease);
  }
  .tm-progress-label{
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tm-muted);
    flex-shrink:0;
    font-variant-numeric: tabular-nums;
  }

  .tm-question-title{
    font-size: clamp(1.2rem, 4.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  .tm-multiselect-hint{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tm-primary-dark);
    background: rgba(20,184,166,0.1);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .tm-multiselect-hint.tm-limit-reached{
    color: var(--tm-dark);
    background: rgba(245,158,11,0.16);
  }

  .tm-answers{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  @media (min-width: 480px){
    .tm-answers.tm-answers-grid2{ grid-template-columns: 1fr 1fr; }
  }

  /* Kompaktes Monatsraster: 3 Spalten mobil, 4 ab kleinem Tablet-Breakpoint */
  .tm-answers.tm-answers-months{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }
  @media (min-width: 420px){
    .tm-answers.tm-answers-months{ grid-template-columns: repeat(4, 1fr); }
  }
  .tm-answers.tm-answers-months .tm-answer-card{
    flex-direction: column;
    text-align:center;
    padding: 12px 6px;
    gap: 4px;
    font-size: 0.85rem;
  }
  .tm-answers.tm-answers-months .tm-answer-card .tm-answer-check{ display:none; }
  .tm-answers.tm-answers-months .tm-answer-card.tm-month-offen{
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content:center;
    font-size: 0.92rem;
  }
  .tm-answers.tm-answers-months .tm-answer-card.tm-month-offen .tm-answer-check{ display:flex; }

  .tm-answer-card{
    display:flex;
    align-items:center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--tm-radius-md);
    border: 1.5px solid var(--tm-border);
    background: var(--tm-white);
    cursor:pointer;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--tm-dark);
    text-align:left;
    transition: transform 0.25s var(--tm-ease), border-color 0.25s var(--tm-ease), box-shadow 0.25s var(--tm-ease), background 0.25s var(--tm-ease);
  }
  .tm-answer-card:hover{
    border-color: var(--tm-primary);
    box-shadow: var(--tm-shadow-sm);
    transform: translateY(-2px);
  }
  .tm-answer-card.tm-selected{
    border-color: var(--tm-primary);
    background: rgba(20,184,166,0.07);
    box-shadow: 0 8px 20px rgba(20,184,166,0.18);
  }
  .tm-answer-card.tm-disabled{
    opacity: 0.42;
    cursor: not-allowed;
    transform:none !important;
    box-shadow:none !important;
  }
  .tm-answer-check{
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--tm-border);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .tm-answer-card.tm-selected .tm-answer-check{
    border-color: var(--tm-primary);
    background: var(--tm-primary);
  }
  .tm-answer-check::after{
    content:"";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tm-white);
    opacity:0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .tm-answer-card.tm-selected .tm-answer-check::after{ opacity:1; transform: scale(1); }

  .tm-answer-card,
  .tm-answer-card:hover,
  .tm-answer-card:focus,
  .tm-answer-card:active,
  .tm-answer-card.tm-selected,
  .tm-answer-card.tm-selected:hover,
  .tm-answer-card.tm-selected:focus{
    color: var(--tm-dark) !important;
    background-color: var(--tm-white) !important;
    outline: none;
  }
  .tm-answer-card.tm-selected,
  .tm-answer-card.tm-selected:hover,
  .tm-answer-card.tm-selected:focus{
    background-color: rgba(20,184,166,0.07) !important;
  }
  .tm-btn-ghost,
  .tm-btn-ghost:hover,
  .tm-btn-ghost:focus{
    color: var(--tm-dark) !important;
    background-color: transparent !important;
  }
  .tm-btn-primary,
  .tm-btn-primary:hover,
  .tm-btn-primary:focus{
    color: var(--tm-white) !important;
  }

  .tm-nav-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px;
  }
  .tm-nav-row .tm-btn{ flex:1; }

  #tmQuestionBody.tm-anim{
    animation: tmQuestionSlideIn 0.55s var(--tm-ease);
  }
  @keyframes tmQuestionSlideIn{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }

  .tm-confirm-bubble{
    display:flex;
    flex-direction: column;
    align-items:center;
    text-align:center;
    gap: 10px;
    background: linear-gradient(150deg, rgba(20,184,166,0.09), rgba(245,158,11,0.06));
    border: 1.5px solid rgba(20,184,166,0.18);
    border-radius: var(--tm-radius-lg);
    padding: 30px 26px;
    min-height: 150px;
    justify-content:center;
    cursor: pointer;
  }
  .tm-confirm-bubble.tm-anim{
    animation: tmBubbleIn 0.5s var(--tm-ease);
  }
  @keyframes tmBubbleIn{
    from{ opacity:0; transform: scale(0.95) translateY(8px); }
    to{ opacity:1; transform: scale(1) translateY(0); }
  }
  .tm-confirm-avatar{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--tm-primary), var(--tm-primary-dark));
    box-shadow: 0 10px 24px rgba(20,184,166,0.3);
    margin-bottom: 2px;
    opacity: 0;
    transform: scale(0.7);
  }
  .tm-confirm-avatar.tm-anim{
    animation: tmAvatarPop 0.4s var(--tm-ease) forwards;
  }
  @keyframes tmAvatarPop{
    from{ opacity:0; transform: scale(0.7); }
    to{ opacity:1; transform: scale(1); }
  }
  .tm-confirm-label{
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tm-primary-dark);
  }
  .tm-confirm-text{
    font-size: 1.03rem;
    font-weight: 600;
    color: var(--tm-dark);
    line-height: 1.5;
    max-width: 380px;
    opacity: 0;
    transform: translateY(6px);
  }
  .tm-confirm-text.tm-anim{
    animation: tmTextFadeIn 0.4s var(--tm-ease) 0.15s forwards;
  }
  @keyframes tmTextFadeIn{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .tm-skip-hint{
    font-size: 0.74rem;
    color: var(--tm-muted);
    font-weight: 600;
    margin-top: 2px;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
  }

  .tm-result-hero{
    background: linear-gradient(140deg, var(--tm-dark) 0%, #1e293b 55%, #164e4a 100%);
    border-radius: var(--tm-radius-lg);
    padding: 40px 26px;
    text-align:center;
    color: var(--tm-white);
    margin-bottom: 24px;
    position: relative;
    overflow:hidden;
  }
  .tm-result-hero::before{
    content:"";
    position:absolute;
    top:-90px; right:-90px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(20,184,166,0.35), transparent 70%);
    border-radius:50%;
    pointer-events:none;
  }
  .tm-result-eyebrow{
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5eead4;
    margin-bottom: 14px;
    position:relative; z-index:1;
  }
  .tm-result-flag{ font-size: 3rem; margin-bottom: 6px; position:relative; z-index:1; }
  .tm-result-name{
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    position:relative; z-index:1;
  }
  .tm-result-score{
    font-size: clamp(2.4rem, 9vw, 3.2rem);
    font-weight: 800;
    color: var(--tm-primary);
    font-variant-numeric: tabular-nums;
    line-height:1;
    margin-bottom: 14px;
    position:relative; z-index:1;
  }
  .tm-result-score span{ font-size: 1.4rem; color: rgba(255,255,255,0.6); }
  .tm-result-explain{
    color: rgba(255,255,255,0.82);
    font-size: 0.95rem;
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.6;
    position:relative; z-index:1;
    text-align:left;
  }

  .tm-top5-label{
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tm-muted);
    margin: 4px 0 14px;
  }

  .tm-country-list{
    display:flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
  }
  .tm-country-card{
    background: var(--tm-white);
    border-radius: var(--tm-radius-md);
    box-shadow: var(--tm-shadow-sm);
    padding: 18px 20px;
    transition: transform 0.3s var(--tm-ease), box-shadow 0.3s var(--tm-ease);
  }
  .tm-country-card:hover{ transform: translateY(-3px); box-shadow: var(--tm-shadow-md); }

  .tm-country-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 6px;
  }
  .tm-country-name{
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 800;
  }
  .tm-country-rank{
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--tm-bg);
    color: var(--tm-muted);
    font-size: 0.75rem;
    font-weight: 800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .tm-country-score{
    font-weight: 800;
    color: var(--tm-primary-dark);
    font-variant-numeric: tabular-nums;
    flex-shrink:0;
  }

  .tm-country-bar-track{
    height: 6px;
    border-radius: 999px;
    background: rgba(15,23,42,0.07);
    overflow:hidden;
    margin-bottom: 12px;
  }
  .tm-country-bar-fill{
    height:100%;
    border-radius:999px;
    background: linear-gradient(90deg, var(--tm-primary), var(--tm-gold));
    width:0%;
    transition: width 1s var(--tm-ease);
  }

  .tm-country-personal{
    font-size: 0.88rem;
    color: var(--tm-dark);
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .tm-country-reasons{
    display:flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
  }
  .tm-country-reasons span{
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(20,184,166,0.1);
    color: var(--tm-primary-dark);
  }
  .tm-country-highlight{
    font-size: 0.8rem;
    color: var(--tm-muted);
    margin-bottom: 8px;
  }
  .tm-country-highlight b{ color: var(--tm-dark); }

  .tm-country-warning{
    font-size: 0.82rem;
    color: var(--tm-muted);
    line-height: 1.45;
    border-top: 1px solid rgba(15,23,42,0.06);
    padding-top: 10px;
    margin-top: 4px;
  }
  .tm-country-warning b{ color: var(--tm-dark); }

  /* Aufklappbarer "Mehr anzeigen"-Bereich je Länder-Karte */
  .tm-details-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--tm-bg);
    border: 1.5px solid var(--tm-border);
    border-radius: 999px;
    color: var(--tm-primary-dark) !important;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--tm-ease), border-color 0.2s var(--tm-ease);
  }
  .tm-details-toggle:hover{ border-color: var(--tm-primary); }
  .tm-details-toggle .tm-details-chevron{
    display:inline-block;
    transition: transform 0.25s var(--tm-ease);
    font-size: 0.7rem;
  }
  .tm-details-toggle[aria-expanded="true"] .tm-details-chevron{ transform: rotate(180deg); }

  .tm-country-details{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15,23,42,0.06);
    animation: tmFadeIn 0.35s var(--tm-ease) both;
  }
  .tm-details-section{ margin-bottom: 12px; }
  .tm-details-section:last-of-type{ margin-bottom: 0; }
  .tm-details-label{
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tm-muted);
    margin-bottom: 4px;
  }
  .tm-details-text{
    font-size: 0.86rem;
    color: var(--tm-dark);
    line-height: 1.55;
  }
  .tm-details-chip-row{
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .tm-details-chip-row span{
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tm-bg);
    color: var(--tm-dark);
    border: 1px solid var(--tm-border);
  }
  .tm-details-link-row{
    margin-top: 16px;
    text-align:center;
  }
  .tm-btn-details-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration:none;
    background: var(--tm-dark);
    color: var(--tm-white) !important;
    transition: transform 0.25s var(--tm-ease), background 0.25s var(--tm-ease);
  }
  .tm-btn-details-link:hover{ background: #1e293b; transform: translateY(-2px); }

  .tm-restart-row{ text-align:center; }

  .tm-deep-match{
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(0,0,0,0.22), transparent 62%),
      linear-gradient(165deg, #0b1322 0%, var(--tm-dark) 42%, #111d30 100%);
    border-radius: var(--tm-radius-lg);
    padding: 44px 28px;
    margin-top: 32px;
    text-align:center;
    color: var(--tm-white);
    box-shadow: var(--tm-shadow-lg);
    animation: tmFadeIn 0.6s var(--tm-ease) both;
    animation-delay: 0.15s;
  }
  .tm-deep-match::before{
    content:"";
    position:absolute;
    top:-130px; left:-110px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(245,158,11,0.16), transparent 72%);
    border-radius:50%;
    pointer-events:none;
  }
  .tm-deep-match::after{
    content:"";
    position:absolute;
    bottom:-140px; right:-110px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(20,184,166,0.16), transparent 72%);
    border-radius:50%;
    pointer-events:none;
  }
  .tm-deep-match-badge{
    position:relative; z-index:1;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-dark);
    background: linear-gradient(120deg, #fcd34d, var(--tm-gold));
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 6px 16px rgba(245,158,11,0.22);
  }
  .tm-deep-match-title{
    position:relative; z-index:1;
    font-size: clamp(1.3rem, 4.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #ffffff;
    max-width: 460px;
    margin: 0 auto 14px;
  }
  .tm-deep-match-text{
    position:relative; z-index:1;
    color: rgba(241,245,249,0.88);
    font-size: 0.97rem;
    line-height: 1.65;
    max-width: 420px;
    margin: 0 auto 30px;
  }
  .tm-deep-match-features{
    position:relative; z-index:1;
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    text-align:left;
    max-width: 440px;
    margin: 0 auto 30px;
  }
  @media (min-width: 480px){
    .tm-deep-match-features{ grid-template-columns: 1fr 1fr; }
  }
  .tm-deep-match-feature{
    display:flex;
    align-items:center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--tm-radius-md);
    padding: 11px 14px;
    transition: background 0.25s var(--tm-ease), transform 0.25s var(--tm-ease), border-color 0.25s var(--tm-ease);
  }
  .tm-deep-match-feature:hover{
    background: rgba(255,255,255,0.09);
    border-color: rgba(245,158,11,0.35);
    transform: translateY(-2px);
  }
  .tm-deep-match-feature-icon{
    flex-shrink:0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(245,158,11,0.16);
    color: #fcd34d;
    border: 1px solid rgba(245,158,11,0.3);
  }
  .tm-btn-premium{
    position:relative; z-index:1;
    background: linear-gradient(135deg, var(--tm-gold) 0%, #d97706 100%);
    color: var(--tm-dark) !important;
    box-shadow: 0 16px 36px rgba(245,158,11,0.3);
    text-decoration:none;
  }
  .tm-btn-premium:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(245,158,11,0.4);
  }
  .tm-deep-match-hint{
    position:relative; z-index:1;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin: 16px auto 0;
    max-width: 380px;
    line-height: 1.5;
  }

  .tm-below-app{
    max-width: 640px;
    margin: 36px auto 0;
    padding: 0 16px;
    text-align:center;
  }
  .tm-below-app p{
    color: var(--tm-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  @media (max-width: 420px){
    .tm-start{ padding: 38px 20px; }
    .tm-question-card{ padding: 26px 18px 22px; }
    .tm-result-hero{ padding: 32px 20px; }
    .tm-nav-row .tm-btn{ padding: 14px 18px; font-size: 0.94rem; }
    .tm-deep-match{ padding: 32px 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    .tripmatch-app *{
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }