/* Small integration fixes; source design styles remain unchanged. */
.legal-content[dir="ltr"] { text-align: left; }
.legal-section ol { margin: .7rem 0 .9rem 1.3rem; color: #3d5550; }
.app-store-button[aria-disabled="true"] { cursor: default; }
/* Source headings overflow on narrow German legal pages. */
.legal-hero h1 { overflow-wrap: anywhere; }
/* The source connector's intrinsic 720px width overflows the tablet container. */
@media (min-width: 761px) and (max-width: 900px) {
  .journey-compact-wrap .compact-line { width: calc(100% - 96px); }
}
/* The journey grid follows the number of phases in the lang files (five: Explore to Implement). */
@media (min-width: 761px) {
  .compact-phases { grid-template-columns: repeat(var(--phase-count, 5), 1fr); }
}
/* Shared QR block and the device-aware download landing page. */
.app-download-layout { display: flex; flex-direction: column; min-height: 100vh; }
.app-download-layout main { flex: 1; background: var(--teal); }
.app-download-qr { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin: 2.5rem auto 0; }
.app-download-qr a { display: block; width: 240px; max-width: 100%; overflow: hidden; border-radius: 12px; background: #fff; }
.app-download-qr a:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.app-download-qr img { display: block; width: 100%; height: auto; }
.app-download-qr figcaption { display: flex; flex-direction: column; gap: .35rem; max-width: 320px; color: #c6d4d5; font-size: .875rem; }
.app-download-qr figcaption strong { color: #fff; font-size: 1rem; font-weight: 500; }
.download-page { background: var(--teal); padding: 5rem 1.5rem; text-align: center; }
.download-page-inner { max-width: 760px; margin: 0 auto; }
.download-page h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.1; color: #fff; font-weight: 600; }
.download-description { max-width: 520px; margin: 1.5rem auto 0; color: #c6d4d5; font-size: 1.0625rem; }
.download-page .app-store-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.download-page .app-store-button { display: inline-flex; align-items: center; gap: 1rem; min-width: 218px; min-height: 72px; padding: .875rem 1.5rem; border: 1px solid #70888d; border-radius: 12px; background: #081b20; color: #fff; text-align: left; text-decoration: none; }
.download-page .app-store-button:hover { background: #102d34; border-color: var(--gold); }
.download-page .app-store-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.download-page .app-store-button img { width: 30px; height: 34px; flex-shrink: 0; }
.download-page .app-store-copy { display: flex; flex-direction: column; gap: .2rem; }
.download-page .app-store-copy small { font-size: .8125rem; line-height: 1.2; font-weight: 400; }
.download-page .app-store-copy strong { font-size: 1.375rem; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.download-page .app-download-note { margin-top: 1.25rem; color: #a8bfc3; font-size: .875rem; line-height: 1.6; }
@media (max-width: 580px) {
  .download-page .app-store-buttons { flex-direction: column; align-items: center; }
  .download-page .app-store-button { width: 100%; max-width: 280px; min-width: 0; }
}

/* Beta feedback form (/feedback): builds on the legal page layout. */
.feedback-hero p { max-width: 640px; margin-left: auto; margin-right: auto; }
.feedback-page { max-width: 720px; }
.feedback-form { display: grid; gap: .5rem; }
.feedback-section { display: grid; gap: 1.4rem; }
.feedback-section[hidden] { display: none; }
.feedback-section h2 { margin-bottom: 0; }
.feedback-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-q { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.fb-q[hidden] { display: none; }
.fb-q > label, .fb-q > legend { color: var(--teal); font-weight: 500; padding: 0; margin-bottom: .5rem; }
.fb-hint { font-size: .85rem; color: #5b6f6b; margin: 0; font-weight: 300; }
.fb-q > .fb-hint { margin-top: -.35rem; }
.feedback-form input[type=email], .feedback-form textarea { width: 100%; font: inherit; color: #1a1a1a; background: #fff; border: 1px solid rgba(17,57,66,.22); border-radius: .75rem; padding: .75rem .9rem; }
.feedback-form textarea { min-height: 5.5rem; resize: vertical; }
.feedback-form [aria-invalid="true"] input, .feedback-form input[aria-invalid="true"], .feedback-form textarea[aria-invalid="true"] { border-color: #a4321f; }
.feedback-form :focus-visible, .fb-chip input:focus-visible + span, .fb-scale input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fb-stack { flex-direction: column; align-items: stretch; }
.fb-chip { position: relative; }
.fb-chip input, .fb-scale input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-chip span { display: inline-block; padding: .55rem 1rem; border: 1px solid rgba(17,57,66,.22); border-radius: 999px; background: #fff; color: #1a1a1a; font-size: .92rem; cursor: pointer; }
.fb-stack .fb-chip span { display: block; border-radius: .75rem; }
.fb-chip input:checked + span { background: var(--teal); color: #fff; border-color: var(--teal); }
.fb-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.fb-scale label { position: relative; }
.fb-scale span { display: grid; place-items: center; height: 2.8rem; border: 1px solid rgba(17,57,66,.22); border-radius: .75rem; background: #fff; color: var(--teal); font-weight: 600; cursor: pointer; }
.fb-scale input:checked + span { background: var(--gold); border-color: var(--gold); color: #0a1f24; }
.fb-ends { display: flex; justify-content: space-between; font-size: .75rem; color: #5b6f6b; }
.feedback-errors { border: 1px solid #a4321f; background: #fbeeea; color: #5c1d12; border-radius: .9rem; padding: 1rem 1.2rem; }
.feedback-errors ul { margin: .5rem 0 0 1.2rem; }
.fb-actions { padding-top: 2rem; }
.fb-submit { width: 100%; font: inherit; font-weight: 600; font-size: 1rem; background: var(--teal); color: #fff; border: 0; border-radius: .9rem; padding: 1rem 1.2rem; cursor: pointer; }
.fb-submit:hover { background: #0a1f24; }
.fb-submit:disabled { opacity: .6; cursor: default; }
.feedback-thanks p { margin: .4rem 0; color: #3d5550; }
.feedback-thanks a { color: var(--teal); text-decoration-color: var(--gold); }
@media (max-width: 720px) { .feedback-layout .legal-nav { position: static; } }

/* Team with three people: one row of three on wide screens, one centred column below 900px
   (the source grid is built for two cards). */
.team-grid:has(> .team-card:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1140px; gap: 2rem; }
@media (max-width: 900px) {
  .team-grid:has(> .team-card:nth-child(3)) { grid-template-columns: 1fr; max-width: 560px; }
}
/* Why IDRAK Journey with a vertical (9:16) video beside the statement; the video side comes from
   config('website.home_video.side'). Without a video file a placeholder frame is shown. */
section#why-idrak.usp-with-video .usp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
section#why-idrak.usp-video-left .usp-layout { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
section#why-idrak.usp-video-left .usp-video { order: -1; }
section#why-idrak.usp-with-video .usp-statement h2 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
section#why-idrak.usp-with-video .usp-subline { text-align: left; margin: 2rem 0 2.2rem; }
section#why-idrak.usp-with-video .usp-logo { justify-content: flex-start; }
.usp-video { margin: 0; justify-self: center; width: 100%; max-width: 340px; }
/* One frame for the poster, the placeholder and the playing video: 9:16, dark teal, thin gold border. */
.usp-video-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; background: radial-gradient(120% 80% at 50% 20%, #1d4957 0%, #113942 55%, #081b20 100%); box-shadow: 0 24px 60px rgba(17, 57, 66, 0.22); }
.usp-video-frame::after { content: ""; position: absolute; inset: 10px; z-index: 3; border: 1px solid rgba(181, 156, 109, 0.35); border-radius: 20px; pointer-events: none; }
/* A square or wide video plays whole, centred in the frame. */
.usp-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.usp-video-cover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; padding: 0 0 2.25rem; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.usp-video-cover[hidden] { display: none; }
.usp-video-cover.has-poster { justify-content: flex-end; }
.usp-video-cover.has-poster::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 27, 32, 0) 40%, rgba(8, 27, 32, 0.55) 70%, rgba(8, 27, 32, 0.9) 100%); }
.usp-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.usp-video-play { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding-left: 4px; border-radius: 50%; background: rgba(8, 27, 32, 0.45); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); transition: transform .2s ease, background .2s ease; }
.usp-video-cover:hover .usp-video-play, .usp-video-cover:focus-visible .usp-video-play { transform: scale(1.06); background: rgba(8, 27, 32, 0.6); }
.usp-video-cover:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.usp-video-soon { position: relative; z-index: 2; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 900px) {
  section#why-idrak.usp-with-video .usp-layout, section#why-idrak.usp-video-left .usp-layout { grid-template-columns: 1fr; }
  section#why-idrak.usp-video-left .usp-video { order: 0; }
  section#why-idrak.usp-with-video .usp-subline { text-align: center; margin: 2rem auto 2.2rem; }
  section#why-idrak.usp-with-video .usp-logo { justify-content: center; }
  .usp-video { max-width: 300px; }
}

/* Homepage · The person behind: one person, portrait photo beside the bio (stacked on phones). */
.team-single { background: linear-gradient(180deg, #fff 0%, var(--offwhite) 100%); }
.team-single .team-grid { grid-template-columns: 1fr; max-width: 1040px; margin-top: 3.5rem; }
.team-card-photo { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; padding: 0; background: none; border-radius: 0; }
.team-photo-frame { position: relative; margin: 0 1.1rem 1.1rem 0; }
.team-photo-frame::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 1px solid var(--gold); border-radius: 1.5rem; }
.team-photo { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 24px 60px rgba(17, 57, 66, 0.18); }
.team-card-photo h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.15; margin-bottom: .4rem; }
.team-card-photo .role { margin-bottom: 1.6rem; }
.team-card-photo .role::after { content: ""; display: block; width: 3rem; height: 1px; margin-top: 1.4rem; background: var(--gold); }
.team-card-photo p { font-size: 1rem; line-height: 1.8; color: #3d5550; margin-bottom: 1rem; }
.team-card-photo p:first-of-type { font-size: 1.08rem; color: var(--teal); font-weight: 400; }
.team-card-photo p:last-of-type { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; line-height: 1.45; font-style: italic; color: var(--teal); font-weight: 500; margin: 1.5rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--gold); }
.team-linkedin { display: inline-flex; align-items: center; gap: .55rem; margin-top: 2rem; padding: .7rem 1.25rem; border: 1px solid rgba(17, 57, 66, 0.25); border-radius: 999px; color: var(--teal); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.team-linkedin:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.team-linkedin:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) {
  .team-card-photo { grid-template-columns: 1fr; gap: 2.5rem; }
  .team-photo-frame { width: min(78%, 300px); justify-self: center; }
  .team-single .team-grid { margin-top: 2rem; }
}

/* Homepage · IDRAK Journey on mobile: one closing section (text and store buttons left, QR right). */
.app-download-home { padding: 7rem 3rem; text-align: left; }
.app-download-home::before { background: radial-gradient(ellipse at 85% 60%, rgba(181,156,109,.20), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(204,239,0,.06), transparent 50%); }
.app-download-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.app-download-home h2 { font-size: clamp(2.5rem, 4.1vw, 3.6rem); }
.app-download-home .section-desc { margin: 0; max-width: 540px; }
.app-download-home .app-store-buttons { justify-content: flex-start; margin-top: 2.25rem; }
.app-download-home .app-download-note { text-align: left; }
.app-download-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.app-download-qr-card { position: relative; margin: 0; padding: 1.75rem 1.75rem 1.5rem; border-radius: 1.5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(181,156,109,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); text-align: center; z-index: 1; }
.app-download-qr-card a { width: 200px; }
.app-download-qr-card figcaption { align-items: center; }
/* The jumping figure stands in the free space right of the QR card (wide screens only); the
   artwork has a dark backdrop, so lighten blends it into the section. */
.app-download-figure { position: absolute; right: max(1.5rem, calc(50% - 760px)); bottom: 2.5rem; width: 170px; height: auto; opacity: .85; mix-blend-mode: lighten; pointer-events: none; z-index: -1; }
@media (max-width: 1499px) { .app-download-figure { display: none; } }
@media (max-width: 960px) {
  .app-download-home { padding: 5rem 1.5rem; text-align: center; }
  .app-download-grid { grid-template-columns: 1fr; gap: 0; }
  .app-download-home .section-desc { margin: 0 auto; }
  .app-download-home .app-store-buttons { justify-content: center; }
  .app-download-home .app-download-note { text-align: center; }
  /* A QR code can't be scanned from the phone it is shown on. */
  .app-download-visual { display: none; }
}